남현준 질문

• 아래의 코드를 기준으로, (1)과 (2)에서의 this는 동일한가요?
  • 동일하지 않다면, 콜백 함수 와 this 키워드를 통해 그 이유를 설명해주세요.

const clothes = {
  shirt: function (x) {
    console.log(x, this);
  },
};

["oxford", "t", "linnen", "polo"].forEach(clothes.shirt);     // (1) oxford Window
																															//     t  Window
clothes.shirt("tuxedo");                                      // (2) tuxedo {shirt: f} 

답변: 함수 호출 시 ‘this’가 결정되는 방식 때문에 다르다.

1) 출력 결과에서 ‘this’는 각 배열 요소에 대한 함수 호출의 컨텍스트를 나타냄

‘forEach’ 메서드는 배열 하나하나 요소에 대해 주어진 함수를 호출.

‘this’는 호출되는 함수 ‘clothes.shirt’의 컨텍스트가 아닌 각 배열 요소가 됨.

즉, ‘x’는 배열의 요소인 각각의 문자열이고 ‘this’는 각 배열 요소 자체를 의미

왜 전역객체가 아닌 각 배열 요소 자체가 되나?

‘forEach’메서드는 콜백 함수를 인자로 받고, 이 콜백 함수가 각 배열 요소에 대해 호출됨.

내부 구현은 콜백함수를 일반 함수로 호출하는 것이 아니라,

내부에서 각 배열 요소를 ‘this’로 지정하여 함수를 호출

이렇게 함으로써, 콜백 함수 내부에서 ‘this’를 사용할 수 있도록 함.

ex)

[’oxford’, ‘t’, ‘linnen’, ‘polo’] 배열에 대해 ‘forEach’ 메서드를 호출하면

‘forEach’ 메서드 내부에서는 각 배열 요소에 대해 콜백 함수를 호출

1. ‘clothes.shirt.call(’oxford’, ‘oxford’)`…

• 이렇게 콜백함수를 호출할 때 첫번 째 인자로 전달된 값이 ‘this’가 됨.
  • 따라서, 각 배열 요소 자체가 콜백 함수 내부에서 ‘this’로 사용됨.