JavaScript로 두 배열의 요소별 절대값 차이 구하기

문제 상황

다음과 같은 두 개의 숫자 배열이 있다고 가정해 보겠습니다.

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

이 두 배열을 인자로 받아, 서로 대응되는 요소들 간의 절대값 차이(absolute difference)를 담은 새로운 배열을 반환하는 JavaScript 함수를 작성해야 합니다.

즉, 위 배열의 경우 각 위치별로 |1−9|, |2−8|, |3−7|, |4−5|, |5−8|, |6−3|을 계산해야 하므로, 기대하는 출력 결과는 다음과 같습니다.

const output = [8, 6, 4, 1, 3, 3];

풀이 접근 방법

가장 기본적인 방법은 for 반복문을 활용하는 것입니다. 반복문 안에서 각 인덱스에 해당하는 두 요소의 차이를 구하고, Math.abs() 메서드로 절대값을 변환한 뒤 새로운 배열에 순차적으로 저장합니다. 모든 요소를 처리한 후에는 완성된 배열을 반환하면 됩니다.

예제

위 접근 방식을 구현한 전체 코드는 다음과 같습니다.

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

const absDifference = (arr1, arr2) => {
   const res = [];
   for(let i = 0; i < arr1.length; i++){
      const el = Math.abs((arr1[i] || 0) - (arr2[i] || 0));
      res[i] = el;
   };
   return res;
};
console.log(absDifference(arr1, arr2));

(arr1[i] || 0)처럼 기본값 0을 지정하면, 한쪽 배열의 길이가 짧거나 특정 인덱스의 값이 undefined인 경우에도 오류 없이 안전하게 처리할 수 있습니다.

출력 결과

코드를 실행하면 콘솔에 다음과 같은 결과가 출력됩니다.

[ 8, 6, 4, 1, 3, 3 ]

보너스: map()으로 더 간결하게 작성하기

map() 메서드를 사용하면 동일한 로직을 한 줄로 더욱 깔끔하게 표현할 수 있습니다.

const absDifference = (arr1, arr2) =>
   arr1.map((num, i) => Math.abs(num - (arr2[i] || 0)));

console.log(absDifference([1,2,3,4,5,6], [9,8,7,5,8,3]));
// [ 8, 6, 4, 1, 3, 3 ]