메서드와 'this'

메서드 만들기

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

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

이렇게 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부른다.

메서드 단축 구문 (method shorthand)

// 아래 두 객체는 동일하게 동작한다

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보인다
user = {
  sayHi() { // "sayHi: function()"과 동일하다
    alert("Hello");
  }
};

위처럼 function을 생략해도 메서드를 정의할 수 있다.

메서드와 'this'

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타낸다.
    alert(this.name);
  }

};

user.sayHi(); // John

자유로운 'this'

this 값은 런타임에 결정된다.

동일한 함수라도 다른 객체에서 호출했다면 'this'가 참조하는 값이 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

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

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

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

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

메서드가 어디서 정의되었는지에 상관없이

this는 '점 앞의' 객체가 무엇인가에 따라 '자유롭게' 결정된다.

'this'가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않는다.

화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 '평범한' 외부 함수에서 this 값을 가져온다.

 

아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 된다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.

정리

• 객체 프로퍼티에 저장된 함수를 '메서드'라고 부른다.
• 메서드의 this는 객체를 참조한다.

this 값은 런타임에 결정된다.

• 함수를 선언할 때 this를 사용할 수 있다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다.
• 함수를 복사해 객체 간 전달할 수 있다.
• 함수를 객체 프로퍼티에 저장해 object.method()같이 '메서드' 형태로 호출하면 this는 object를 참조한다.

화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특하다.

화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져온다.