[JavaScript] 메서드와 this

메서드 만들기

객체 user에게 인사할 수 있는 능력을 부여해보자

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

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

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

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

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

let user = {
  // ...
};

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

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

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

 

중요! - 객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식을 부르는데 (object-oriented programming, OOP)

이는 그 자체만으로도 학문의 분야를 만드는 중요한 주제이다.

올바른 개체를 선택하는 방법, 개체 사이의 상호작용을 나타내는 방법 등에 관한 의사결정은 객체 지향 설계를 기반으로 이뤄집니다. 

 

메서드 단축 구문

// 아래 두 객체는 동일하게 동작합니다.

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

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

이렇게 function을 생략해도 메서드를 정의할 수 있다.

일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않다. 객체 상속과 관련된 미묘한 차이가 있지만

일단 지금으로선 이 차이가 중요하지 않기에 넘어가도록 하자.

 

메서드와 this

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다. 모든 메서드가 그런건 아니지만

대부분의 메서드가 객체 프로퍼티의 값을 활용한다.

 

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

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다. 이 때 '점 앞'의 this는 객체를 나타낸다.

정확히는 메서드를 호출할 때 사용된 객체를 나타냄.

예시:

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

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

};

user.sayHi(); // John

this 대신에 외부 변수(user)를 참조해 객체에 접근하는 것도 가능하다.

 

하지만 이후에 user = null 같이 다른 값으로 덮어씌운다면 에러가 발생 할 수도 있다.

 

자유로운 this

JS의 this 는 다른 언어의 this와 달리 동작 방식이 다르다. JS에선 모든 함수에 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 가 만드는 결과

다른 언어를 사용하다 JS로 넘어온 개발자는 this를 혼동하기 쉬운데

this는 항상 메서드가 정의된 객체를 참조할 것이라고 착각한다. 이런 개념을 'bound this'라고 한다.

 

JS에서 this는 런타임에 결정되는데 메서드가 어디있는지에 상관없이 this는

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

 

이렇게 this가 런타임에 결정되면 장점도 있고 단점도 있는데 함수(메서드)를 하나만 만들어

여러 객체에서 재사용할 수 있다는 것은 장점이지만, 이런 유연함 이 실수로 이어질 수 있다는 것이 단점.

 

JS가 this를 다루는 방식이 좋은지 나쁜지는 판단할게 아니다. 우리가 충분히 동작방식을 이해하면 됨.

this 가 없는 화살표 함수

화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않습니다. 화살표 함수에서 this를 참조하면,

화살표 함수가 아닌 '평범한' 외부 함수에서 this값을 가져옵니다.

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

 

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

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

user.sayHi(); // 보라