[JavaScript] 메서드와 this

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

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

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

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

 

- 메서드 만들기

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

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

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

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

함수 표현식으로 함수를 만들고 객체 프로퍼티 user.sayHi에 함수를 할당해 주었다.

이제 객체에 할당된 함수를 호출하면 user가 인사를 해준다.

이렇게 객체 프로퍼티에 할당된 함수를 메서드 라고 부른다. 위 예시에선 user에 할당된 sayHi가 메서드이다.

let user = {
  // ...
};

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

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

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

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

 

- 메서드 단축 구문

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

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

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

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

 

- 메서드와 this

: 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다. 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용한다. user.sayHi()의 내부 코드에서 객체 user에 저장된 이름(name)을 이용해 인사말을 만드는 경우가 이런 경우에 속한다.

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

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

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

};

user.sayHi(); // John

user.sayHi()가 실행되는 동안에 this는 user를 나타낸다. this를 사용하지 않고 외부 변수를 참조에 객체에 접근하는 것도 가능하다.

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

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

};

 

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