JavaScript로 두 배열의 대응하는 요소에 콜백 함수 적용하기

문제 상황

JavaScript에서 다음과 같은 조건을 만족하는 함수를 작성해야 합니다.

첫 번째 인수로는 두 개의 인수를 받아 하나의 값을 반환하는 콜백 함수를, 두 번째와 세 번째 인수로는 길이가 서로 같은 두 개의 배열을 전달받습니다.

그리고 이 함수는 입력된 두 배열에서 대응하는 요소들을 콜백 함수에 각각 전달한 뒤, 그 반환값들로 구성된 새로운 배열을 만들어 반환해야 합니다.

예제 코드

다음은 위 문제를 해결하는 코드입니다 −

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];

const add = (a, b) => a + b;

const applyFunction = (callback = () => {}, arr1 = [], arr2 = []) => {
   const res = [];
   arr1.forEach((num1, ind) => {
      const num2 = arr2[ind];
      res.push(callback(num1, num2));
   });
   return res;
};

console.log(applyFunction(add, arr1, arr2));

출력 결과

[6, 8, 10, 12]

코드 동작 원리

applyFunction 함수는 forEach 메서드를 사용해 첫 번째 배열(arr1)을 순회합니다. 순회 과정에서 현재 인덱스를 기준으로 두 번째 배열(arr2)의 같은 위치에 있는 요소를 가져온 뒤, 두 값을 콜백 함수에 전달합니다.

콜백 함수가 반환한 결과는 미리 선언된 빈 배열 res에 차례대로 저장되며, 모든 요소에 대한 처리가 끝나면 최종적으로 이 배열이 반환됩니다.

위 예제에서는 덧셈을 수행하는 add 함수를 콜백으로 전달했기 때문에, 두 배열의 대응 요소들이 더해진 [6, 8, 10, 12]가 출력됩니다.

map 메서드를 활용한 더 간결한 방법

forEach와 별도의 결과 배열 대신, map 메서드를 사용하면 같은 로직을 한 줄로 더 깔끔하게 표현할 수 있습니다.

const applyFunction = (callback = () => {}, arr1 = [], arr2 = []) =>
   arr1.map((num1, ind) => callback(num1, arr2[ind]));

map은 콜백의 반환값으로 새로운 배열을 자동으로 생성해 주므로, 불필요한 중간 변수 없이 의도를 명확하게 드러낼 수 있다는 장점이 있습니다.