메서드와 'this'

사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있습니다.

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

메서드 만들기

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

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

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

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

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

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

let user = {
  // ...
};

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

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

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

메서드와 “this”

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

user.sayHi()의 내부 코드에서 객체 user에 저장된 이름(name)을 이용해 인사말을 만드는 경우가 이런 경우에 속합니다.

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

"점 앞"의 this는 객체를 나타냅니다. 정확히는 메서드를 호출할 때 사용된 객체를 나타내죠.

예시:

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

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

};

user.sayHi(); // John

참조: "this"가 없는 화살표 함수

화살표 함수는 일반 함수와는 다르게 “고유한” this를 가지지 않습니다. 화살표 함수에서 this를 참조하면, (화살표 함수가 아닌) “평범한” 외부 함수에서 this 값을 가져옵니다.

아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this를 사용합니다.

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

user.sayHi(); // Ilya

별개의 this가 만들어지는 건 원하지 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용합니다. 이에 대한 자세한 내용은 별도의 챕터,화살표 함수에 대한 재고에서 다루겠습니다.

메서드 체이닝

올라가기와 내려가기 메서드를 제공하는 객체 ladder가 있다고 합시다.

let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
    alert( this.step );
  }
};

만일 메서드를 연이어 호출하고자 한다면 아래와 같이 코드를 작성할 수 있습니다.

ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1

그러나 이 방법은 코드를 작성할 때 여간 번로로운 것이 아니죠.

위와 같은 불편함을 개선하기 위해 아래와 같이 메서드 호출 체이닝이 가능하도록 up, down, showStep을 수정할 수 있습니다.

메서드 호출 체이닝

ladder.up().up().down().showStep(); // 1

위와 같이 메서드 호출을 연속적으로 하기 위해서는 return this를 사용하여 다음과 같이 코드를 수정하면 됩니다.

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
    alert( this.step );
    return this;
  }
};

출처: https://ko.javascript.info/object-methods