[JavaScript] 객체(2) - 메서드와 this

메서드

 JavaScript에서 객체는 사용자, 주문처럼 현실에 존재하는 개체를 표현할 때 사용하며 사용자를 예시로 더 자세히 보면, 사용자의 이름, 나이를 속성으로 담을 수도 있지만 현실에서는 로그인하기, 로그아웃하기와 같은 행동들이 존재한다. 객체도 행동을 함수 프로퍼티를 할당함을 통해 구현할 수 있으며 이를 메서드라고 부른다. 다음과 같이 객체에 행동을 부여할 수 있다.

 

let user = {
  name: "Jaeyoon",
  age: 24
 };
 
user.sayHi = function() {
  alert("안녕하세요!");
}

user.sayHi(); // 안녕하세요!

 

함수 표현식을 통해 함수를 만들어 user 객체에 sayHi라는 이름으로 함수 프로퍼티를 만들어주었다. 이런 식으로 객체에 할당된 함수를 호출하면 객체에 존재하는 함수가 실행되며 앞서 말한 메서드가 이 것이다.

 

this

 메서드는 객체에 저장된 정보에 접근할 수 있어야 그 진가를 발휘할 수 있다. 또한, 존재하는 메서드의 대부분이 객체 프로퍼티의 값을 활용한다. 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있으며 코드와 함께 살펴보자.

 

let user = {
  name: "Jaeyoon",
  age: 24,
  
  sayHi() {
	// 'this'는 실행 시점 당시 현재 객체를 나타낸다.
    alert(this.name);
  }  
 };

user.sayHi(); // Jaeyoon

 

코드를 보면 '점 앞'의 this가 객체를 나타내며, 이 객체는 메서드를 호출할 때 사용된 객체를 뜻한다. user.sayHi()가 실행되는 동안에 this는 user 객체이기 때문에 user의 name 프로퍼티인 'Jaeyoon'이 출력되는 것이다.

 

this를 사용하지 않고 외부 변수를 참조해 객체에 접근할 수도 있지만 외부 변수를 사용해 객체를 참조했을 때, 외부 변수가 null과 같은 다른 값이 할당된다면 에러가 발생할 수 있으니 이 점을 유의해야 한다.

 

앞서 호출할 때라는 단어로 표현했듯이 this 값은 런타임에 결정된다. 즉, 상황에 따라 달라진다는 것이다. 동일한 함수라도 다른 객체에서 호출됐다면 'this'가 참조하는 값이 달라진다.

 

let user = { name: "Jaeyoon" }
let admin = { name: "admin" }

function sayHi() {
  alert(this.name);
}

// 별개의 객체에 동일 함수를 저장
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점 앞'의 객체를 참조하기 때문에 this 값이 달라진다.
user.f(); // Jaeyoon (this == user)
admin.f(); // admin (this == admin)