Javascript에서 Object를 만드는 것은 생각보다 직관적이고 쉽습니다. 그리고 이 Object 안에 메소드를 함께 넣어서 만들 수도 있습니다. 연관된 값들을 메소드를 이용해서 계산하고 결과를 출력해 줄 수도 있습니다.
이번 포스팅에서는 Object와 메소드를 함께 이용하는 방법을 알아보겠습니다.
Object 내부 메소드 사용방법
Javascript Object를 생성시에 메소드를 만들 수 있습니다.
const student = {
num: 1,
name: 'koonsland',
hello: function(){
console.log('Welcome to Koonsland')
}
}
이렇게 만든 메소드는 점을 이용한 표현으로 아래와 같이 실행할 수 있습니다.
student.hello();
변수라면 student.hello 라고 입력할 수 있겠지만 메소드이고 실행하기 위해서는 반드시 괄호()를 사용해야 합니다.
Object 내부 메소드에서 변수 사용 방법
Javascript Object 내부에서 메소드를 위와 같은 방법으로 만들었을 때, 이 내부에서 변수를 사용하여 화면에 무엇인가를 출력할 수 있습니다. 이때 사용하는 키워드가 바로 this입니다.
const student = {
num: 1,
name: 'koonsland',
hello: function(){
console.log('Welcome to ' + this.name);
}
}
student.hello();
내부에서 사용하는 변수들은 모두 this와 점을 이용해서 접근하고 표현할 수 있습니다. 이때 사용한 this는 이 Object 내부의 key만 접근해서 사용할 수 있습니다.
그럼 이번에는 parameter를 받으면 어떻게 될까요?
const student = {
num: 1,
name: 'koonsland',
hello: function(name2){
this.name = name2;
console.log('Welcome to ' + this.name);
}
}
student.hello('koon');
parameter를 받고 name 변수의 값을 변환하였습니다. 역시 정상적으로 변환된 것을 볼 수 있습니다.
위 방법뿐만 아니라 student.name = 'koon'과 같이 사용해도 정상적으로 바뀌는 것을 알 수 있습니다. 내부에서만 사용하는 변수가 아니라 모두 접근이 가능한 변수입니다. Java와 같이 private 한 변수를 사용하는 방법은 다음 포스팅에서 다뤄볼 예정입니다.
이번 포스팅에서는 Javascript Object를 이용하고 그 내부에서 메소드를 사용하는 방법을 알아보았습니다. Javascript는 사용할수록 생각보다 직관적으로 프로그래밍이 가능하고, 또 결과를 바로 확인할 수 있어서 쉽게 배울 수 있는 언어인 것 같습니다. 도움이 되셨으면 합니다. 이상입니다.
'쿤즈 Dev > JS HTML CSS' 카테고리의 다른 글
[Javascript] 배열(Arrays)에 대해서 알아보자! (0) | 2021.05.08 |
---|---|
[Javascript] 생성자 함수(Constructor Function) 사용하기 (0) | 2021.05.07 |
[Javascript] Object의 생성과 사용 방법 (0) | 2021.05.01 |
[Javascript] 재귀 (Recursion) 함수 사용 방법 (0) | 2021.04.30 |
[Javascript] 함수(function) 만드는 방법 및 사용 방법 (0) | 2021.04.29 |
댓글