메서드와 this

• 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성됩니다.

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

• 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다.

메서드 만들기

• 객체 user에게 인사할 수 있는 능력을 부여해 줍시다.

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

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

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

• 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 주었습니다.
• 이제 객체에 할당된 함수를 호출하면 user가 인사를 해줍니다.
• 이렇게 객체 프로퍼티에 할당된 함수를 메서드(method) 라고 부릅니다.
• 위 예시에선 user에 할당된 sayHi가 메서드이죠.
• 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있습니다.

let user = {
  // ...
};

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

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

메서드와 this

• 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다.
• 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용합니다.
• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있습니다.
• 이때 '점 앞’의 this는 객체를 나타냅니다. 정확히는 메서드를 호출할 때 사용된 객체를 나타내죠.

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

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

};

user.sayHi(); // John

자유로운 this

• 자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다릅니다.
• 자바스크립트에선 모든 함수에 this를 사용할 수 있습니다.

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

• 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 값을 가져옵니다.
• 아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 됩니다.

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

user.sayHi(); // 보라

요약

• 객체 프로퍼티에 저장된 함수를 '메서드’라고 부릅니다.
• object.doSomthing()은 객체를 '행동’할 수 있게 해줍니다.
• 메서드는 this로 객체를 참조합니다.

this 값은 런타임에 결정됩니다.

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

화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특합니다. 화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옵니다.