callback 강의 질문

코어 자바스크립트

작성

253

const arr = [1,2,3,4,5];

const entries= [];

arr.forEach((v,i) => entries.push([i,v,this[i]]), [10,20,30,40,50]);

console.log(entries);

--------------------------------------------------------------------------------------------------------------

callback 강의에서 forEach메소드는 callback을 실행할때 this와 바인딩값을 두번째 인자에 넣는다고 했는데,

강의에서 나온 forEach 예제를 화살표 함수로 사용하니 결과가 다르게 나옵니다.

<질문>

1. arr.forEach( (v, i) => entries.push( [i, v, this[i]]), [10,20,30,40,50]); 에서

entires.push를 실행할때 this가 [10,20,30,40,50]과 바인딩 되어야 하는 것 아닌가요?

2. 위의 예제를 ExcutionContext가 call stack에 쌓이는 순서대로 표현하면 아래가 맞나요?

1) 전역 EC 생성 -> arr.forEach 메소드 EC생성 -> 익명함수 EC 생성 -> entries.push 메소드 EC 생성

2) entries.push 메소드 EC 종료 -> 익명함수 EC 종료 -> arr.forEach 메소드 EC종료 -> 전역 EC종료

자세한 설명 부탁드립니다.

javascript

답변 4

정재남

지식공유자

하루동안 고민해서 이미 원하시던 답을 찾으셨기를 바라지만,
혹시 그렇지 못해 답답하실 수도 있으니 추가답변 드립니다.
아래 내용은 가급적 위 힌트만을 먼저 본 상태에서 충분히 고민하고,
도저히 모르겠을 때에 확인하시기 바랍니다.

--------------------------------------------------------------------------------------------------------

콜백함수를 호출하는 구문이 일반적인 함수 또는 메소드 내부에서의 함수 호출이 아닌
call / apply 등 명시적으로 this를 바인딩한 방법이기 때문에,
일반적인 EC에서의 예상과는 this값이 다르게 동작할 수밖에 없습니다.

일반 함수의 경우 call 메서드에 지정한 this가 정상적으로 바인딩되지만,
화살표함수의 경우에는 call 메서드에 지정한 this가 무시됩니다.
this가 무시되었다는 것은 곧, 콜백함수가 '함수로써' 호출된 것임을 의미합니다.
함수로써 호출된 경우 함수 내부에서의 this는 EC가 어떻건 상관 없이 언제나 전역객체를 바라봅니다.

예의 코드상에서 this[i] 부분을 다음과 같이 this로만 바꾸고 테스트해보세요.
arr.forEach((v,i) => entries.push([i, v, this]), [10,20,30,40,50]);

정재남

지식공유자

this와 Execution Context도 중요하긴 하지만, 그게 전부는 아닙니다.
forEach 메서드 내부에서 콜백함수를 어떤식으로 호출하는지에 대해 설명한 부분을 살펴보시기 바랍니다.
힌트를 더 드리자면, 제가 임의로 forEach를 흉내낸 부분에서 callback.call() 부분입니다.

b2e

질문자

답변 감사합니다. 그런데 제가 수업을 듣고 이 문제로 계속 고민하고 있습니다.

정재남 님의 ES6 초급 과정도 신청해서 화살표 함수 부분을 들었구요.

화살표 함수는 this를 바인딩 하지 않는다도 알겠습니다.

그래도 위의 내용이 잘 정리가 안되는 부분이 있는데, 자세히 설명 좀 부탁드립니다.

이게 해결이 되어야 넘어갈 수 있을 것 같아요

1. 위에서 콜백함수(익명함수)가 실행될때 this는 바인딩 되지 않는다면, 상위 EC를 참조해서 this을 찾지 않나요?

그럼 상위 EC인 arr.forEach 메소드 EC에 있는 this는 메소드를 호출해서 생성되었기 때문에 arr이 this가 되지 않나요?

그럼 결국 콜백함수의 this는 arr이 되는 것이어야..... 강의에서 설명하신 this와 EC 개념에 맞는 것 같은데,

제가 어느부분을 잘못 이해하고 있는 건가요?

정재남

지식공유자

1. arrow function은 ES6에서 새로 추가된 함수로, 본 강좌에서는 다루지 않는 내용입니다.
arrow function은 this를 바인딩하지 않습니다.

2. 전체적으로 맞습니다. 다만 forEach에 의해 호출되는 콜백함수(익명함수)의 EC는 arr의 요소 개수만큼 생성/종료를 반복합니다.

인프런 커뮤니티 질문&답변

callback 강의 질문