arr.push를 콜백함수로 사용한다면?

회사에서 이런 코드를 보았다.

const arr = [1, 2, 3];
const target = [];

arr.forEach(target.push); // === arr.forEach((elem) => target.push(elem))

console.log(target)

코드를 실행시켜보니 에러가 뜬다.

원래 의도대로라면 주석처럼 forEach의 arguments가 통째로 target에 push 되어야 한다.

 

하지만 에러가 난다. this에 대한 제어권을 잃어서 그렇다.

 

우리는 this에 대해 배울때 함수를 선언한 스코프를 중심으로 설정된다고 배웠다.

 

하지만 콜백으로 넘기면서 this에 대한 제어권을 잃었다. 어떻게 된 것일까?

 

일반적으로 함수를 실행시키는건 문제가 없지만 콜백으로 함수 자체를 넘길경우에는 실행시점이나 파라미터 등 모든것에 대한 제어권이 넘어간다.

즉, this 또한 제어권이 넘어가므로 this의 스코프를 바인딩 해주어야 한다.

 

아래와 같이 작성해주면 된다.

const arr = [1, 2, 3];
const target = [];

arr.forEach(target.push.bind(target));

console.log(target) // [ 1, 0, [1, 2, 3], 2, 1, [1, 2, 3], 3, 2, [1, 2, 3] ]

 

각각의 원소가 push될 줄 알았는데 console이 이상하게 찍힌다.

 

forEach의 파라미터가 그대로 전부 push로 넘어가서 그렇다.

forEach의 파라미터는 element, index, arr원본으로 이루어진다.

target에 담긴 값들을 3개씩 나눠보면

element  index     arr

      1,         0,     [1, 2, 3]

      2,         1,     [1, 2, 3]

      3,         2,     [1, 2, 3]

 

이렇게 된다. 잘 나온것 같다.

 

 

의도대로 배열의 원소만 담고 싶으면 아래와 같이 하면 된다.

const arr = [1, 2, 3];
const target = [];

arr.forEach((elem) => target.push(elem));

console.log(target) // [ 1, 2, 3 ]