JavaScript에서 두 배열의 요소별 절대 차이를 구하는 방법

JavaScript 개발을 하다 보면 두 배열의 대응되는 요소들끼리 비교하여 그 차이를 계산해야 하는 경우가 종종 있습니다. 이번 글에서는 두 배열의 요소별 절대 차이(absolute difference)를 새로운 배열로 반환하는 함수를 작성하는 방법을 알아보겠습니다.

문제 상황

예를 들어, 다음과 같은 두 개의 배열이 있다고 가정해 봅시다.

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

우리는 이 두 배열을 인자로 받아서, 각 배열의 대응되는 요소들 사이의 절대 차이를 담은 배열을 반환하는 JavaScript 함수를 작성해야 합니다.

따라서 위 배열들을 입력으로 넣으면 결과는 다음과 같아야 합니다.

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

해결 방법

가장 직관적인 방법은 for 반복문을 사용하는 것입니다. 배열을 순회하면서 각 위치의 두 요소 값에 Math.abs() 메서드를 적용하여 절대값 차이를 구하고, 그 결과를 새로운 배열에 순서대로 저장한 후 최종적으로 해당 배열을 반환하면 됩니다.

여기서 한 가지 눈여겨볼 점은 (arr1[i] || 0)과 같은 방식으로 기본값을 처리한다는 것입니다. 만약 두 배열의 길이가 다르더라도 존재하지 않는 요소는 0으로 간주하여 오류 없이 계산할 수 있게 해줍니다.

코드 예제

전체 코드는 다음과 같습니다.

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));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

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

추가 팁: map() 활용하기

반복문 대신 map() 메서드를 사용하면 코드를 더욱 간결하게 표현할 수 있습니다.

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

두 방식 모두 동일한 결과를 반환하지만, map()을 사용하면 불변성(immutability)을 유지하며 함수형 프로그래밍 스타일로 작성할 수 있다는 장점이 있습니다. 상황과 팀의 코딩 컨벤션에 맞게 선택하여 사용하시기 바랍니다.