JavaScript object에 메소드 추가, this 키워드

 

안녕하세요 besforyou입니다.

 

이번 글은 JavaScript object에 메소드 추가하는 방법입니다.

 

---

자바에 class가 있듯이 자바스크립트에는 object가 있습니다. 완전히 똑같진 않지만 쓰임이 비슷합니다.

 

user라는 오브젝트를 생성해보겠습니다.

 

let user = {
  name: "Mike",
  age: 23
};

 

이 user 오브젝트에 method를 추가하는 법은 간단합니다.

 

let user = {
  name: "Mike",
  age: 23
};
 
user.sayHi = function() {
  alert("Hello!");
};
 
user.sayHi(); // Hello!

 

 

메소드를 생성하면서 새로 만든 오브젝트의 property sayHi 에 할당해주면 됩니다.

 

이제 오브젝트 user는 sayHi라는 새로운 property를 가지게 되었고 sayHi()를 호출하면 alert("Hello!"); 가 실행됩니다.

 

 

이렇게 오브젝트의 property(속성)인 함수를 method라고 부릅니다.

 

---

메소드 내부에서 오브젝트 속성 접근 ( this 키워드 )

 

메소드를 실행할때 오브젝트의 다른 속성 데이터에 접근하고 싶을때가 있을겁니다. 

 

예로 위 예시의 메소드인 sayHi 메소드는 user 오브젝트의 속성인 name에 담긴 데이터를 접근하여 출력하고 싶은 경우가 있을겁니다.

 

그럴때는 this 키워드를 사용합니다.

 

let user = {
  name: "Mike",
  age: 23,
 
  sayHi() {
    alert(this.name);
  }
 
};
 
user.sayHi(); // Mike

 

위 예시처럼 this 키워드를 통해 자신이 속한 오브젝트의 다른 속성들에 접근할 수 있습니다.

 

---

this 키워드는 bound 상태가 아닙니다.

 

this가 가리키는것이 어떤것인지는 런타임에 판단되므로 특정 오브젝트에 묶여있지 않습니다.

그러므로 다음과 같은 코드도 오류없이 실행됩니다.

 

let user = { name: "John" };
let admin = { name: "Admin" };
 
function sayHi() {
  alert( this.name );
}
 
user.f = sayHi;
admin.f = sayHi;
 
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)