[JS] this 키워드 : 이것 뭐에요?

 

📚 새로운 도전에 대한 새로운 마음가짐

 

다시 한 번 취준에 터닝 포인트가 되기를 바라는 생각으로 멋쟁이사자처럼의 프론트엔드 부트캠프 플러스 5기에 지원을 해서 합격했다. 

개강까지는 시간이 좀 남았지만 개강 전까지 이것저것 기초적인 것들을 다시 다져놓고자 해서 위키북스의 '모던 자바스크립트 Deep Dive'와 한빛 미디어의 '모던 자바스크립트 핵심 가이드'를 오가며 읽어보고 있다.

 

공부를 하는 순서는 딱히 없다.

그냥 목차를 보다가 심도있게 바라보고 싶은 곳을 펼쳐서 공부한다.

그 이전의 파트를 공부해야 할 필요가 있다면 그것은 잠시 기술부채로 남겨두고, 이해할 수 있는 부분까지만 공부를 한 뒤에

기술부채는 차차 해결해나갈 생각이다. 이렇게 연쇄적으로 공부를 해보자는 심산(?)

 

우선 오늘 첫 번째로 써내려가 볼 TIL은 this 키워드다.

그리고 더 나아가 this 바인딩에 대한 이야기를 좀 해볼까 한다.

 

---

 

 

👆 this 키워드, 이것 뭐에요?

 

객체지향 프로그래밍에서 객체는 상태를 나타내는 '프로퍼티'와 동작을 나타내는 '메서드'를 하나의 논리적인 단위로 묶은 자료구조다.

그리고 응당 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 또 변경할 수 있어야 한다. 그렇지 못하면 메서드가 객체에 묶여있을 이유가 없지.

 

쩝, 그래서 어쨌든 객체에 포함되어 있는 메서드가 해당 객체의 프로퍼티를 참조하려면, 자기 자신을 가리키기 위한 식별자가 필요한데,

JS에서는 이를 this 키워드로 대체한다.

 

객체 리터럴에서 메서드가 자기가 포함된 객체를 가리키는 방법

아래 예제를 확인해보자.

const myCar = {
  color: "grey",
  getColor() {
    return myCar.color;
  }
};

console.log(`myCar's color is ${myCar.getColor()}.`);

 

객체 리터럴 방식으로 생성된 객체에서는 메서드 내부에서 선언된 객체 이름을 통해 재귀적으로 자기 자신을 참조하고 변경할 수 있다.

'모던 자바스크립트 Deep Dive' 에서는 이 참조 표현식이 평가되는 시점은 메서드가 호출되어 함수 몸체가 실행되는 시점이라고 설명하고 있다. 또한, 선언된 객체 리터럴은 myCar 변수에 할당되기 직전에 평가된다고도 알려주고 있다.

 

즉, getColor() 메서드가 호출되는 시점에서는 이미 객체 리터럴의 평가는 완료되어있고, myCar 식별자에 객체가 할당된 이후기 때문에 myCar를 참조할 수 있는 것이다.

 

하지만 우리가 실제로 JS를 사용해 코딩을 하다보면 객체를 리터럴로 선언, 정의하는 경우는 거~~~~의 없다.

 

 

난 일단 아예 없어요.

 

 

우리는 객체 리터럴을 잘 안쓰잖아요.

 

우리는 주로 객체를 이용할 때에는 클래스의 생성자 함수를 이용하여 식별자에 인스턴스를 할당하고는 한다.

그리고 생성자 함수 내부에서는 자신이 생성할 인스턴스를 참조할 수 있어야 한다.

생성자 함수에 의한 객체 생성 방식은 먼저 생성자 함수를 정의한 이후에 생성자 함수를 호출하는 단계가 필요하다.

 

헌데, 객체의 평가는 식별자에 할당하기 '직전'에 평가된다고 한다.

그렇다면, 생성자 함수를 정의하는 시점에서는 인스턴스가 생성되기 이전이기 때문에 우리는 식별자의 이름을 통해 재귀적으로 메서드가 포함된 객체 자기 자신을 참조할 수가 없다는 이야기가 된다. 어떤 식별자에 어떤 객체의 인스턴스를 할당할 줄 알고?

 

그래서 자바스크립트에서는 자신이 속한 객체, 또는 객체 자신이 생성할 인스턴스를 가리키는 특수한 식별자, this를 제공한다.

 

아래는 this 키워드에 대한 '모던 자바스크립트 Deep Dive'의 정의다.

"this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다."

 

 

 

😓 this 바인딩

this 키워드는 자동으로, 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 

this를 전역 변수로도, 지역 변수로도 활용할 수 있다.

 

하지만 this가 가리키는 값은 함수 호출 방식에 의해 동적으로 결정된다. 그리고 이것을 this 바인딩이라고 한다.

 

바인딩이란?

식별자와 값을 연결하는 과정을 의미한다. 예를 들어 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다. 

 

 

즉, this 바인딩이란 this 식별자와 this가 가리킬 객체를 바인딩하는 것이다.

 

위에서 객체 리터럴로 선언했던 객체 myCar의 메서드에서 myCar 식별자를 this 키워드로 교체하면 아래와 같다.

const myCar = {
  color: "grey",
  getColor() {
    return this.color;
  }
};

console.log(`myCar's color is ${myCar.getColor()}.`);

 

이 경우 this가 가리키는 대상은 myCar이다.

 

생성자 함수로 생성된 객체의 인스턴스는 어떨까.

class Car {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }
}

const myCar = new Car("grey");

console.log(`myCar's color is ${myCar.getColor()}.`);

 

여기서 this가 가리키는 것은 생성자 함수가 생성할 인스턴스. 즉 myCar를 가리킨다.

 

이렇게 this는 상황에 따라 참조하는 대상이 달라진다.

JS의 this는 함수 호출 방식에 따라 this 바인딩이 동적으로 결정되는 특성을 가진다. 

 

 

🏃‍♂️ 함수 호출 방식에 따른 this 바인딩

그럼 함수 호출 방식에 따라 동적으로 결정되는 this 바인딩의 다양한 예를 살펴보자.

예제는 상기한 서적인 '모던 자바스크립트 Deep Dive'에서 일부 발췌했다.

1. 일반 함수 호출

일반 함수 호출에서 기본적으로 this에는 전역 객체, 즉 window 객체가 바인딩된다.

하지만 strict mode(엄격 모드)가 적용된 함수일 경우 this에는 undefined가 바인딩된다.

또한 콜백 함수가 일반 함수로 호출 되었을 경우에도 콜백 함수의 내부 this에는 전역 객체가 바인딩 된다.

즉, 어떠한 함수일지라도 일반 함수로 호출되었을 경우에는 this에 전역 객체가 바인딩 된다는 것이다.

그리고 this는 '객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수'이므로 객체를 생성하지 않는 일반 함수에서 this는 무의미하다.

 

function hello() {
  console.log("hello의 this: ", this); //window
  
  function world() {
    console.log("world의 this: ", this); //window
  }
  
  world();
};

hello();

 

위와 같이 메서드 내에서 중첩 함수를 정의하여 일반 함수로 호출하면 중첩 함수 내부의 this에도 전역 객체 window가 바인딩된다.

 

function hello() {
  'use strict';
  console.log("hello의 this: ", this); //undefined
  
  function world() {
    console.log("world의 this: ", this); //undefined
  }
  
  world();
};

hello();

 

use strict를 통해 함수에 strict mode를 지정해주면 전역 객체가 아닌 undefined가 바인딩된다.

 

2. 메서드 호출

그렇다면 객체의 메서드 호출의 경우는 어떨까?

메서드 내부의 this에는 메서드를 호출한 객체가 바인딩 된다.

const myCar = {
  color: "grey",
  getColor() {
    return this.color;
  }
};

console.log(`myCar's color is ${myCar.getColor()}.`); //myCar가 바인딩된다.

 

즉, 메서드 호출을 위해 사용되는 . 연산자 앞의 객체가 바인딩 된다는 뜻이다.

여기서 주의해야할 것이 있다. 해당 메서드를 소유하고 있는 객체가 아닌 메서드를 '호출한' 객체에 바인딩 된다는 뜻이다.

왜냐하면 위의 예제에서 getColor 메서드는 getColor라는 이름의 프로퍼티에 바인딩 된 함수다. 따라서 myCar 객체의 getColor 메서드는 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체일 뿐이고, getColor 프로퍼티가 해당 함수 객체를 참조하고 있을 뿐이라는 것이다. 따라서 getColor 메서드는 별도의 일반 변수에 할당하여 일반 함수로도 호출할 수 있다.

 

3. 생성자 함수 호출

생성자 함수 내부의 this는 해당 생성자 함수가 미래에 생성할 인스턴스가 바인딩 된다.

class Car {
  constructor(color) {
    this.color = color;
  }

  getColor() {
    return this.color;
  }
}

const myCar = new Car("grey");

console.log(`myCar's color is ${myCar.getColor()}.`); //Car의 인스턴스 myCar가 바인딩됨

 

 

이 외에도 Function.prototype.apply, Function.prototype.call, Function.prototype.bind 메서드에 의한 간접 호출에 따른 바인딩이 있지만, prototype이 기술 부채로 쌓여 있기 때문에 prototype에 대한 학습이 끝나는 대로 해당 파트를 다시 학습하여 정리해 볼 생각이다.

 

---

 

이번 TIL은 this 키워드와 this 바인딩에 대해 간단히 정리해보았다.

prototype이란 꽤 책의 앞 부분에서 설명하는 것이긴 하나, 그동안은 '자바스크립트를 이용해 결과를 만드는 것'에 집중한 나머지 이렇게 상세하게 들여다 보는 습관이 없었기에 지금의 내게는 기술 부채가 되었다. 이 점을 깊이 반성하며 이렇게 꼬리에 꼬리를 무는 연쇄 학습을 통해 다시 기본기를 탄탄히 만들어나가는 시간이 되었으면 좋겠다.