함수 호출 방법에 따라 달라지는 this

자바스크립트의 this 키워드는 다른 언어들과는 조금 다르게 동작합니다.

this는 자신이 속한 객체를 가리키는 키워드로, 함수의 호출 방식에 따라 가리키는 값이 달라지는 신기한 친구인데요, 이번엔 이 this에 대해 알아보도록 하겠습니다.

함수 호출 방법

this는 특정 함수가 어떻게 호출되었는지에 따라 달라지기 때문에 함수의 호출 방법에는 어떤 방법들이 있는지 나열해보면, 다음과 같이 나열할 수 있습니다.

0. 전역 공간
1. 일반 함수 호출
2. 메서드 호출
3. 생성자 함수 호출
4. 콜백 함수 호출

전역 공간

우선 전역 공간에 this를 출력하는 코드를 작성해서, 전역 공간에서의 this는 어떤 값을 가리킬지 확인해보면,

위의 이미지처럼, window 객체가 출력이 되는 것을 볼 수 있습니다.

이 window 객체는 브라우저 환경의 전역 객체로, 이렇게 전역 공간에서의 this는 자신이 속한 전역 공간의 객체를 가리키기 때문에 window 객체가 출력됩니다.

그럼 본격적으로 함수를 호출했을 때, 그 함수가 가지고 있는 this는 어떤 값을 가리키고 있는지 알아보겠습니다.

일반 함수 호출

function print() {
  console.log(this); //Window 객체
}

print();

위의 코드를 보면, this를 출력하는 코드가 있는 print 함수는 전역 공간에서 호출되고 있는데요, this는 자신을 포함하고 있는 함수가 어떻게 호출되고 있는지에 따라 값이 달라지기 때문에, print 함수가 호출되고 있는 이 전역 공간의 객체인 window 객체가 출력이 됩니다.

자바스크립트의 this는 함수가 어떻게 호출이 되었는지에 따라 가리키는 값이 달라지게 되기 때문에, 이렇게 어떠한 함수가 일반 함수로 전역 공간에서 호출될 때에 this는 전역 객체인 window 객체를 가리킵니다.

메서드 호출

그럼 이번에는 특정 함수가 메서드로써 호출이 되었을 때 this가 가리키는 값에 대해 알아보겠습니다.

const myCar = {
  model: 'Tesla',
  color: 'black',
  print: function () {
    console.log(this);
  },
};

myCar.print();

위의 코드와 같이 myCar 객체에는 model, color 프로퍼티가 있고, print 메서드가 있습니다.

그리고 이 print 메서드는, myCar 객체에 점 표기법을 통해 호출이 되고 있습니다.

자바스크립트에서 this 키워드는 함수가 어떻게 호출되었는지에 따라 가리키는 값이 달라진다고 했었죠.

이 코드에서는 print 함수가 myCar라는 객체에 의해 호출이 되고 있으므로, print 함수 내부의 this는 함수를 호출한 주체인 myCar 객체를 가리키게 됩니다.

실제로 코드를 실행하면, 이렇게 위의 그림과 같이 myCar 객체의 프로퍼티들이 출력되는 것을 볼 수 있습니다.

이처럼 객체의 메서드에 있는 this는 자신이 포함된 객체를 가리키기 때문에, 객체의 내부에서는 this.model, this.color로 myCar 객체의 프로퍼티 값들을 나타낼 수 있습니다.

const myCar = {
  model: 'Tesla',
  color: 'black',
  print: function () {
    console.log(this);
  },
};

const myCar2 = myCar.print;
myCar2();

그럼 위와 같은 코드에서 this는 어떠한 값을 가리킬까요?

이번에는 myCar 객체의 print 메서드를 바로 호출하지 않고 이렇게 myCar2라는 변수에 할당해서 호출을 했는데요, 마찬가지로 myCar2 함수는 현재 전역 공간에서 호출되고 있기 때문에, print 메서드의 this는 전역 객체인 window 객체를 가리키게 됩니다.

생성자 함수 호출

그럼 이번에는 특정 함수가 생성자 함수로서 호출이 된다면, this는 어떠한 값을 가리킬지 알아보도록 하겠습니다.

생성자 함수는 new 키워드와 함께 사용되며, 새로운 객체, 즉 인스턴스를 생성하는데 사용되는 함수입니다.

function Car(model) {
  console.log(this);
  this.model = model;
}

let myCar = new Car('Tesla');
console.log(myCar);

위와 같은 코드처럼 this 키워드가 포함되어 있는 Car 함수가 생성자 함수로서 호출된다면, this 어떠한 값이 출력이 될까요?

myCar 인스턴스를 출력해서 Car 함수를 생성자 함수로 호출한 결과, Car 함수 내부의 this에 어떠한 값이 저장되어 있는지 살펴보면, 이렇게 Car 객체를 가리킨다는 것을 알 수 있습니다. 특정 함수를 생성자 함수로서 호출하면, 다음과 같이 함수 내부의 this는 생성자 함수가 생성할 새로운 인스턴스를 가리킵니다.

콜백 함수 호출

그럼, 이제 마지막으로 함수가 콜백 함수로서 호출될 때 this가 어떠한 값을 가리킬지 알아봅시다.

const myCar = {
  model: 'Tesla',
  color: '',
  setColor: function (color) {
    this.color = color;
  },
};

function getColor(color, callback) {
  callback(color);
}

getColor('skyblue',myCar.setColor);
console.log(myCar);

코드를 먼저 살펴볼게요. myCar 객체에는 model, color 프로퍼티와 setColor 메서드가 있고, 이 setColor 메서드는 this가 가리키는 객체의 color 프로퍼티에 전달받은 color 값을 할당하는 역할을 하고 있습니다.

그리고 아래의 getColor 함수는 매개변수로 color와 callback을 전달받고, 전달받은 callback 함수에 color를 인수로 넣어 함수를 호출합니다. getColor 함수를 호출하면서 color로는 skyblue를, callback 함수로는 myCar객체의 setColor 메서드를 전달하는 코드입니다.

코드를 실행해서 출력 결과를 살펴보면, 이렇게 color 값이 비어있는 것을 볼 수 있는데요, 이말은 바로 setColor 메서드 내부의 코드가 알맞게 동작하지 않았다는 뜻이죠.

분명히 getColor 함수를 통해 myCar 객체의 color 프로퍼티 값을 변경해주었는데, 왜 값이 비어있는 것일까요?

코드를 다시 한 번 살펴보겠습니다. setColor 메서드는 myCar 객체의 내부에 작성되어 있지만, 실질적으로는 getColor 함수 내부에서 콜백함수로써 호출되었습니다. 그리고 메서드로서의 호출이 아닌, 이렇게 callback이라는 일반 함수로서 호출이 되었죠.

그렇기 때문에 setColor 메서드 내부의 this는 window 객체를 가리킵니다. 이를 확인해보기 위해 window.color 값을 출력해보면, 이렇게 skyblue라는 값이 출력이 되는 것을 볼 수 있습니다.

쿠폰 번호

이렇게 자바스크립트의 this라는 키워드에 대해 자세하게 다뤄보았는데요,

본 내용은 인프런-한 번에 끝내는 자바스크립트 강의 내용 중 일부입니다.
강의에 관심이 있는 분들은 아래의 쿠폰을 통해 30% 할인 가격으로 강의를 구매하실 수 있습니다.

쿠폰 번호 : 17720-92abb78afd84
사용 기간 : 무제한
강의 링크 : https://inf.run/WfRmY