[JavaScript] this가 무엇일까요? 코드 예제로 쉽게 알아봅시다.

[JavaScript] this가 무엇일까요? 코드 예제로 쉽게 알아봅시다.

this 키워드의 정의

자바스크립트에서 this는 현재 실행 컨텍스트를 참조하는 특별한 키워드입니다.

기본적으로 실행 컨텍스트가 생성될 때 함께 결정이 되는데요.

즉, this의 값은 함수가 어떻게 호출되었는지에 따라 변하며, 일반적으로는 함수를 호출한 객체를 참조합니다.

일반 함수에서의 this

일반함수에서 this는 '전역 객체'를 가리킵니다.

전역 객체란?
브라우저 환경에서는 window,
Node.js 환경에서는 global 객체를 가리킵니다.

window객체가 가지고 있는 속성들

 

function main() {
  console.log(this);
}
main(); // window 객체 또는 global 객체 출력

위와 같이 이렇게 전역적으로 함수를 호출하는 것은

function main() {
  console.log(this);
}
windoow.main(); // window 객체 출력

브라우저 환경 기준으로 window 객체의 main 함수를 호출하는 것과 같습니다.

(전역에서의 호출은 window를 생략한 것과 같다고 봐도 무방합니다.)

 

위에서 this는 '함수를 호출한 객체를 참조' 한다고 설명했습니다.

main 함수를 직접적으로 호출한 객체는 window 객체이기 때문에 main 함수의 this는 window 객체가 되는 것입니다.

다만 'use strict' 모드를 사용할 때에는 전역 공간에서 window 객체를 통해 함수를 호출하지 않으면 해당 함수의 this는 undefined를 출력하게 됩니다.

메서드에서의 this

객체의 메소드에서 this는 해당 메서드를 호출한 객체를 가리킵니다.

const obj = {
  name: 'yong',
  sayHello: function () {
    console.log(this);
  },
};
obj.sayHello(); // {name: 'yong', sayHello: ƒ} 출력

위 코드를 보면 obj라는 객체로부터 sayHello 메서드를 호출했습니다.

---

const obj = {
  name: 'yong',
  sayHello: function () {
    console.log(this.name);
  },
};
const obj2 = obj.sayHello;

obj.sayHello(); // {name: 'yong', sayHello: ƒ} 출력
obj2(); // window 객체 출력

obj2는 왜 obj의 sayHello를 참조함에도 불구하고 왜 window 객체가 출력될까요?
바로 obj의 호출 주체는 window가 되기 때문입니다. ( window.obj2() == obj2() )

---

const obj = {
  name: 'yong',
  sayHello: {
    name: 'jun',
    sayBye: function () {
      console.log(this);
    },
  },
};

obj.sayHello.sayBye(); // {name: 'jun', sayBye: ƒ} 출력

위 코드에서는 sayBye메소드를 직접적으로 실행한 건 sayHello객체이기 때문에 sayHello 객체가 출력이 되었습니다.

즉, 어떤 함수를 메소드로서 호출하는 경우 호출 주체는 바로 함수명(프로퍼티명) 앞의 객체입니다.

점 표기법의 경우 마지막 점(.) 앞에 명시된 객체가 곧 this가 되는 것입니다.

생성자 함수에서의 this

new 키워드를 사용하여 생성자 함수를 호출할 때 'this'는 새로 생성된 객체를 가리킵니다.

생성자 함수를 호출하면 우선 생성자의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객채(인스턴스)를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여합니다. 이렇게 해서 구체적인 인스턴스가 만들어집니다.
(해당 내용은 JavasScript의 prototype에 대한 이해가 필요합니다.)

const Human = function (name, age) {
  this.name = name;
  this.age = age;
};

const yong = new Human('yong', 3);
const jun = new Human('jun', 10);

console.log(yong); // {name: 'yong', age: 3} 출력
console.log(jun); // {name: 'jun', age: 10} 출력

화살표 함수에서의 this

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용합니다.

즉, 자신만의 this가 없고 자신을 감싸고 있는 scope로 올라가서 this를 찾게 됩니다.

// innerFunction 일반 함수
const obj = {
  name: 'yong',
  main: function () {
    const innerFunction = function () {
      console.log(this);
    };
    innerFunction();
  },
};

obj.main(); // Window 객체 출력

// innerFunction 화살표 함수
const obj = {
  name: 'yong',
  main: function () {
    const innerFunction = () => {
      console.log(this);
    };
    innerFunction();
  },
};

obj.main(); // {name: 'yong', main: ƒ} 출력

왜 결과가 다른지 볼까요?

먼저 innerFunction 일반 함수 먼저 살펴보겠습니다.

innerFunction 함수를 호출한 주체는 window이기 때문에 window 객체가 출력됩니다.

 

다음으로 innerFunction 화살표 함수를 살펴보면,

화살표 함수의 this는 상위 스코프의 this를 그대로 활용한다고 했습니다.

그래서, 상위 스코프인 main 메서드의 this는 obj가 호출을 했기 때문에 main 메소드의 this는 obj 객체가 됩니다.

즉, innerFunction은 main 메소드의 this를 그대로 활용해서 this는 obj 객체가 되어서 obj 객체를 출력하게 됩니다.

 

일반 함수와 화살표 함수의 this에 대한 차이를 정리해 보면 아래와 같습니다.

• 화살표 함수: 선언된 시점에서 결정이 됩니다.
• 일반 함수: 어디서 선언이 되었는지 상관없이 함수가 호출된 방법에 따라서 this가 동적으로 할당됩니다.

명시적으로 this를 바인딩하는 방법 (call/apply/bind)

상황마다 달라지는 this에 대해서 명시적으로 this를 지정해줄 수 있습니다.

call 메서드

call 메서드는 메서드의 호출 주체인 함수를 this 값 및 각각 전달된 인수와 함께 함수를 즉시 실행하도록 하는 메서드입니다.

// 함수
const func = function (a, b, c) {
  console.log(this, a, b, c);
};

func(1, 2, 3); // Window 1 2 3객체 출력
func.call({ x: 1 }, 4, 5, 6); // {x: 1} 4 5 6 출력

// 메소드
const obj = {
  a:1,
  method: function (x,y) {
    console.log(this,x,y);
    
  } 
}

obj.method(2,3); // {a: 1, method: ƒ} 2 3 출력
obj.method.call({z:1},4,5); // {z: 1} 4 5 출력

call 메서드의 첫 번째 인자로는 this로 바인딩 할 값을 전달해주어서 this를 바인딩합니다.

이후의 인자들은 호출할 함수의 매개변수로합니다.

apply 메소드

apply 메서드는 call 메서드와 기능적으로 매우 동일합니다.

call 메소드는 첫 번째 인자를 제외한 모든 인자들을 호출할 함수의 매개변수로 지정하는 반면,

apply 메소드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정합니다.

const func = function (a, b, c) {
  console.log(this, a, b, c);
};

func(1, 2, 3); // Window 1 2 3출력
func.apply({ x: 1 }, [4, 5, 6]); // {x: 1} 4 5 6 출력

const obj = {
  a: 1,
  method: function (x, y) {
    console.log(this, x, y);
  },
};

obj.method(2, 3); // {a: 1, method: ƒ} 2 3 출력
obj.method.apply({ z: 1 }, [4, 5]); // {z: 1} 4 5 출력

bind 메소드

bind 메소드는 ES5에 추가된 기능입니다.

bind는 call/apply 메소드와 다르게 즉시 호출하지 않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환합니다.

const main = function () {
  console.log(this);
};
const mainBind = main.bind({ name: 'mainBind' });

main(); // Window 객체 출력
mainBind(); // {name: 'mainBind'} 출력

---

주의할 점은 이미 bind 된 것에 다시 bind를 할 수 없습니다.

즉, 최초로 bind 한 것에 대해서만 적용이 됩니다.

const main = function () {
  console.log(this);
};
const mainBind = main.bind({ name: 'mainBind' });
const mainBindBind = mainBind.bind({ name: 'mainBindBind' });

main(); // Window 객체 출력
mainBind(); // {name: 'mainBind'}
mainBindBind(); // {name: 'mainBind'}

---

또 다른 주의할 점으로는 화살표 함수에서는 bind가 적용되지 않습니다.

화살표 함수는 bind를 해 줄 자신만의 this를 갖고 있지 않기 때문에 bind를 할 수 없습니다.

선언되는 시점에서 결정이 되고 이후에는 변경되지 않기 때문에 bind를 해 줄 의미가 없고 bind를 한다고 하더라도 무시를 해버립니다.

const obj = {
  name: 'yong',
  main: function () {
    const innerFunction = (() => {
      console.log(this);
    }).bind({name:'bind'});
    innerFunction();
  },
};

obj.main(); // {name: 'yong', main: ƒ}

const greet = () => {
  console.log(`Hello, ${this.name}`);
};
const boundGreet = greet.bind({ name: 'yong' });

boundGreet(); // 'Hello, undefined'

 

✅ 정리

• this의 값은 함수가 어떻게 호출되었는지에 따라 변하며, 일반적으로는 함수를 호출한 객체를 참조한다.
• 엄격 모드에서는 일반 함수의 this가 'undefined'입니다.
• 일반함수에서 this는 '전역 객체'를 가리킵니다.
• 객체의 메소드에서 this는 해당 메서드를 호출한 객체를 가리킵니다.
• new 키워드를 사용하여 생성자 함수를 호출할 때 'this'는 새로 생성된 객체를 가리킵니다.
• 화살표 함수는 상위 스코프의 this를 그대로 활용
• 일반 함수: 실행 시점에서 this가 결정됨
• 화살표 함수: 선언 시점에서 this가 결정됨
• call과 'apply 메소드는 첫 번째 인자로 받은 특정 객체를 'this'로 설정하고, 나머지 인자들을 함수의 매개변수로 사용하여 함수를 호출
• call 메서드는 첫 번째 인자를 제외한 모든 인자들을 호출할 함수의 매개변수로 지정
• apply 메소드는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정
• bind는 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환

참고 문헌:

• 코어자바스크립트 this 목차
• https://www.youtube.com/watch?v=2lIde1abdBY&t=890s
• https://www.youtube.com/watch?v=j6VkGimAs-E&t=0s
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call