[Javascript Essentials] this keyword

앞서 함수 파트에서 살펴보지 않고 넘겼던 this에 대해 자세히 살펴본다.

this

this 키워드는 함수 내부에서 동적으로 결정되는 특별한 식별자로써

대표적으로 일반 함수와 화살표 함수에 따라 다르게 지칭된다.

1. 일반 함수 

function()을 사용하는 일반 함수는 자신을 호출하는 위치에서 this가 정의되며

호출할 때의 환경에 따라 달라지는 위치이므로 동적이라고 말할 수 있다.

2. 화살표 함수

자신이 선언된 렉시컬 범위 (부모 함수)에서 this가 정의되며

선언된 위치로 고정되므로 정적이라고 말할 수 있다.

3. 예시

다음 예제를 확인해보자.

const utils = {
  first: 'Neo',
  last: 'Anderson',
  user() {
    console.log(this) // utils 객체
    return {
      first: 'Eunhaa',
      last: 'Kim',
      age: 15,
      getFullA() {
        return `${this.first} ${this.last}`; 
      }
      getFullB: () => `${this.first} ${this.last}`
    }
  }
}

여기서 this는 총 3가지 메소드에서 접근되고 있다. 차근차근 하나씩 검증해보자.

첫번째, user() 내부의 this는 호출되었을 때 대상 객체가 this 위치로 정의된다.

따라서, user() 내부의 콘솔문에는 utils 객체가 출력되고, 반환값으로 새 u 객체가 반환된다.

const u = utils.user();

두번째, u 객체의 메소드 getFullA() 내부의 this는 호출되었을 때 대상 객체를 가리키고,

그 대상 객체는 앞에서 반환받은 새로운 u 객체이다.

따라서 u 객체의 first, last 속성인 Eunhaa와 Kim으로 출력된다.

console.log(u.getFullA()) // Eunhaa Kim

마지막으로 u 객체의 화살표 함수로 된 메소드 getFullB()의 this는 선언 위치의 부모 함수에서 정의된다.

따라서, 부모 함수의 대상 객체인 utils 객체가 this로 정의된다.

즉, utils 객체의 first, last 속성인 Neo와 Anderson으로 출력된다.

console.log(u.getFullB()) // Neo Anderson

call, apply, bind

this 키워드에서 특별히 제공하는 call, apply, bind 메소드는 

일반 함수를 호출할 때, this 키워드를 내가 원하는 객체로 설정할 수 있는 중요한 메소드이다.

※ 참고: 화살표 함수는 선언 위치에서 this 정의가 끝났으므로, 위의 메소드의 의미가 없다.

아래와 같은 2개의 객체가 있을 때 b 객체가 a 객체처럼 name 속성이 있어

getName() 메소드를 호출할 수 있는 구조라고 해보자.

const a = {
  name: 'Amy',
  getName(age) {
    return `${this.name} is {age} old`
  }
}
 
const b = {
  name: 'Eunhaa'
}

여기서 즉, b 객체도 a 객체처럼 getName()를 호출할 수 있도록 하는 것이 call(), apply(), bind() 메소드이다.

첫번째, call은 첫번째 인수로 this를 바인딩시킬 객체를 가져오고

두번째 인수부터 실제 함수의 인수를 전달한다.

console.log(a.getName.call(b, 15)); // Eunhaa is 15 old

두번째, apply는 첫번쨰 인수로 this를 바인딩시킬 객체를 가져오고

두번째 인수부터 실제 함수 인수를 배열로 전달한다.

console.log(a.getName.apply(b,[15]))

마지막으로, bind는 결과값을 반환할 함수를 바로 호출하는 것이 아니라

첫번째 인수로써, 전달할 객체를 넣고 만든 bind() 함수가 this를 연결한 새로운 함수를 반환한다.

그 반환된 함수는 최종적으로 원래 메소드처럼 동작하게 되며 실제 인자값을 받는다.

주로, 새로운 함수를 호출해야 하고, 지연 기능이 필요한 경우 많이 활용한다.

const b_get_name = a.getName.bind(b);
 
console.log(b_get_name(15)); // Eunhaa is 15 old.

최종적으로 b 객체 a 객체의 메소드를 빌려서 호출한다고 이해하면 편할 것이다.

Reference

• https://www.heropy.dev/p/N6phSt#h2_this

JS 함수 핵심 패턴자바스크립트 함수에 대한 기본적인 사용 방법부터 관련 용어, 고급 기법 등의 관련된 다양한 함수 패턴과 여러 개념을 살펴봅니다.www.heropy.dev