이번 포스트에서는 forEach 메서드가 콜백 함수를 어떻게 활용하는지, 콜백에 명시적으로 인자를 전달하지 않아도 되는 이유, 주의사항을 알아보겠습니다.
콜백이란?
자바스크립트에서 함수는 "일급 객체(first-class citizens)"입니다. 즉, 변수에 저장하거나 다른 함수에 인자로 넘기거나, 함수에서 반환값으로 사용할 수 있습니다.
이 개념은 컴퓨터 과학의 람다 계산법(lambda calculus)에서 유래한 것으로, 함수를 수학적 객체로 취급합니다. 이는 함수형 프로그래밍의 핵심으로, 함수가 자신의 범위 밖에서 부작용(side effects)을 일으키지 않도록 합니다.
forEach 메서드와 콜백 함수
forEach 메서드는 배열의 각 요소에 대해 정의된 콜백 함수를 한 번씩 실행하는 메서드입니다.
콜백 함수를 forEach 메서드에 전달할 때 괄호(())를 붙여 함수를 호출하지 않는다는 점입니다.
대신 함수의 참조만 넘기면, forEach 메서드가 내부적으로 콜백 함수를 호출하면서, 현재 처리 중인 배열 요소, 요소의 인덱스, 그리고 배열 자체를 인자 로 넘겨줍니다.
forEach 콜백 함수의 인자
forEach 메서드에 전달된 콜백 함수는 최대 세 개의 인자를 받을 수 있습니다:
- 현재 요소: forEach가 처리하고 있는 배열의 현재 요소입니다.
- 인덱스: 현재 요소의 위치를 나타내는 인덱스입니다.
- 배열: forEach 메서드가 호출된 배열입니다.
예시: 숫자 배열의 각 요소 로깅
[1, 2, 3].forEach(log); // 1, 2, 3
function log(a) {
console.log(a);
}이 코드에서 log 는 forEach 메서드에 의해 각 배열 요소에 대해 호출되는 콜백 함수입니다.
이 함수는 각 요소를 인자로 받아 처리합니다.
그런데 여기서 직접 인자를 전달하지 않아도, forEach 메서드가 알아서 각 요소를 log 함수에 전달해주는 것입니다.
forEach 내부 동작의 이해
forEach 메서드의 내부 구현은 기본적인 순회 알고리즘을 따릅니다.
배열의 첫 번째 요소부터 시작하여 배열의 끝까지 각 요소에 대해 주어진 콜백 함수를 호출합니다.
이 과정은 동기적으로 수행되며, 콜백 함수의 실행이 완료되어야 다음 요소로 넘어갑니다.
콜백 패턴 사용 시 주의할 점
콜백 패턴을 사용할 때 몇 가지 주의해야 할 사항이 있습니다:
- 비동기 동작: forEach 메서드는 동기적으로 실행되지만, 콜백 내에서 비동기 작업을 시작할 경우 예상치 못한 결과를 초래할 수 있습니다.
- 예외 처리: 콜백 함수 내에서 발생하는 예외는 적절하게 처리되어야 합니다.
- this 바인딩: 콜백 함수 내에서 this의 값이 예상과 다를 수 있으니 주의해야 합니다.
- 메모리 누수: 클로저를 사용할 때 메모리 누수가 발생하지 않도록 주의해야 합니다.
REF
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
https://en.wikipedia.org/wiki/Callback_(computer_programming)
