어제 콜백함수에 대해서 공부하다가 콜백함수의 가장 대표적인 예시 중에 하나라고 할 수 있는 forEach를 예시로 한 코드를 보았다.
"콜백함수는 자신을 위임하는 상위 함수나 메서드에 제어권을 넘기게 되는데 제어권을 구성하는 요소는 1.호출시점, 2.인자, 3.this이다."
에서 두번째 '인자'에 대한 부연 설명으로
forEach나 map함수는 첫번째 매개변수가 무조건 currentvalue 즉, 두번째 매개변수로 들어올 콜백함수가 적용 될 개별적 요소, 즉 forEach나 map의 실행주체가 되는 배열의 요소들 하나하나가 되며, 두번째 매개변수는 무조건 그 요소들 하나하나의 인덱스가 된다고 했다.
forEach로 각각의 value, 즉 요소들을 조작하는 작업은 예시에서 많이 해봤는데 기왕에 forEach나 map에서 매개변수로 인덱스를 잡아놨으니, 인덱스에 모종의 삽질을 하면 어떻게 될지가 조금 궁금해졌다.
시도)
<script>
var arr1 = [10, 20, 30];
arr1.forEach((currentValue, index) => {
index += 5;
console.log(index);
console.log(arr1[index])
console.log(arr1[5]);
});
</script>저렇게 임의로 index값을 조작하면 어떻게 될지가 궁금했다. 나름대로는 놀랍게도 첫번째 console에서 index값이 변하였다.
그러므로
첫번째 예상, 배열은 여전히
arr1 = [10, 20, 30]이고, 각각에 대한 인덱스 값이 5, 6, 7이 되며 arr1[5]로 불러도 10이 나와야 함.
두번째 예상, 배열 자체가
arr1 = [undefined, undefined, undefined, undefined, undefined, 10, 20, 30]이 되고, 각각의 인덱스값이 5, 6, 7이 되며, arr1[5]로 불러도 10이 나와야 함.
모든 예상은 빗나갔고, index는 console로 읽을 수 있는데 arr1[index]는 왜 읽을 수 없는지 이해가 잘 되지 않았다.
하지만 여러 시도 끝에 생각대로 변경되지 않는걸 알았고, forEach의 매개변수로 들어오는 currentValue와 index는 원본 배열에서 '복사'해온 '별개의 변수'일 뿐 원본배열에 영향을 미칠 수 있는 것이 아님을 알게 되었다.
같은 원리로
<script>
let obj1 = {a:1, b:1, c:1}
for(key in obj1) {
key += 5
}
</script>를 시도하여도, 원본의 key의 값을 건드릴 수는 없다. 다시 한번 말하지만 원본으로부터 '복사'해온 '별개의 변수'이기 때문에.
알게 된 것
forEach같은 특정 함수나 메서드를 대함에 있어서 "각각의 요소에 대해서 두번째 콜백함수를 적용하는거 아냐?"같은 적당한 생각으로 알고 있었던 것 같다.(전혀 틀린 말은 아니지만)
사실 forEach 자체는 "메서드의 주체가 되는 배열에 대해 해당 배열의 요소와 인덱스를 변수로 복사해와서 배열의 요소 수 만큼 반복하여 함수를 수행하겠다"는 의미 그 이상도 그 이하도 아닌 것인데.
함수나 메서드를 사용함에 있어서 보다 정교하게 알아야 할 필요성을 느꼈다.
