본문 바로가기

Javascript

콜백함수_인자 & this 바인딩

  1. 인자
  2. map 함수: 배열을 하나하나 순회하면서 각 배열 요소를 변환하여 새로운 배열을 반환합니다. 기존 배열을 변경하지 않고, 새로운 배열을 생성한다는 것을 알고 계시죠? 👍👍 

// map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요!
var newArr = [10, 20, 30].map(function (currentValue, index) {
	console.log(currentValue, index);
	return currentValue + 5;
});
console.log(newArr);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 15, 25, 35 ]

자, 그렇다면 콜백함수에서 여러분이 넣으신 currentValue, index 이 변수의 순서를 바꾸면 어떻게 될까요? 자동으로 인식할까요?

// map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요!
var newArr2 = [10, 20, 30].map(function (index, currentValue) {
	console.log(index, currentValue);
	return currentValue + 5;
});
console.log(newArr2);

// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 5, 6, 7 ]

컴퓨터는 사람이 아니기 때문에, **index - currentValue**의 의미를 사람처럼 이해할 수 없어요. 따라서 의도하지 않은 값이 나와버리죠.

이처럼, map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야 해요(콜백 내부의 인자도 물론 포함이죠!) 이 모든것은 전적으로 map 메서드. 즉, 콜백 함수를 넘겨받은 코드에게 그 제어권이 있습니다. 인자(의 순서)까지도 제어권이 그에게 있는 것이죠.

제어권이 넘어갈 map 함수의 규칙에 맞게 ‘나는’ 호출해야 합니다!

'Javascript' 카테고리의 다른 글

콜백 함수는 함수다  (0) 2023.12.18
콜백함수_this 바인딩  (0) 2023.12.18
콜백함수_제어권  (0) 2023.12.18
콜백함수 현명하게 사용하기  (0) 2023.12.18
call & apply & bind보다 편리한 방법은?_v3.11  (0) 2023.12.16