모던자바스크립트를 보며 정리했습니다.

메서드

객체 프로퍼티에 할당된 함수를 메서드(method)라고 부르는데,
아래 코드에서 user에 할당된 sayHi가 메서드이다.

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

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

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

메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있다.

let user = {
  // ...
};

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

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

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

메서드와 this

메서드는 객체에 저장된 정보에 접근 할 수 있다.
(모든 메서드가 그런건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용함)

다음과 같이 메서드 내부에서 this키워드를 사용하여 객체에 접근 할 수 있다.

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

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

};

// user객체에서 sayHi()를 사용했으니, sayHi의 this.name은 user의 name이됨
user.sayHi(); // John

하지만, this를 사용하지 않고 외부 변수를 참조해 객체에 접근 할 수 도있다.

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

  sayHi() {
    alert(user.name); // 'this' 대신 'user'를 이용함
  }
};

근데 이처럼 외부 변수를 사용해 객체를 참조하면 예상치 못한 에러가 발생할 수 있다.
예를들면 다음과 같이 user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다면 sayHi는 null을 참조하게 된다.

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

  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }

};


let admin = user;
user = null; // user를 null로 덮어씀

admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러발생

alert 함수가 user.name 대신 this.name을 인수로 받았다면 에러는 발생하지 않았을 것이다.

자유로운 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(); // 보라

일반적인 경우라면 function(){}을 이용하는게 this의 예상치못한 오동작을 방지할 수 있지만, 별개의 this가 만들어지는건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우라면,화살표 함수를 사용하는게 유용할것 같다.