JavaScript로 두 배열의 대응 요소 동등성 비교하기

JavaScript에서 두 배열이 완전히 같은지 확인하는 것은 생각보다 간단하지 않습니다. === 연산자는 참조 타입인 배열을 비교할 때 값이 아닌 메모리 주소를 기준으로 판단하기 때문에, 내용이 완전히 동일한 두 배열이라도 서로 다른 객체로 취급됩니다.

따라서 우리는 두 개의 리터럴 배열을 인수로 받아, 각 위치에 있는 대응 요소들을 하나씩 검사하는 함수를 직접 작성해야 합니다. 이 함수는 모든 대응 요소가 서로 같으면 true를 반환하고, 하나라도 다르면 false를 반환해야 합니다.

구현 방법

동등성 검사 로직은 다음과 같은 단계로 구성할 수 있습니다.

1. 길이 먼저 비교

두 배열의 길이가 다르다면 대응 요소가 성립할 수 없으므로 즉시 false를 반환합니다. 이 조건을 앞에 두면 불필요한 반복문 실행을 줄일 수 있습니다.

2. 요소별 순차 비교

반복문을 돌며 같은 인덱스의 요소끼리 엄격 동등 연산자(===)로 비교합니다. 중간에 하나라도 일치하지 않는 요소가 발견되면 바로 false를 반환하여 나머지 요소는 더 이상 검사하지 않습니다.

예제 코드

const arr1 = [6, 7, 8, 9, 10, 11, 12, 14];
const arr2 = [6, 7, 8, 9, 10, 11, 12, 14];

const areEqual = (first, second) => {
    if(first.length !== second.length){
        return false;
    };
    for(let i = 0; i < first.length; i++){
        if(first[i] === second[i]){
            continue;
        }
        return false;
    };
    return true;
};

console.log(areEqual(arr1, arr2));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

true

두 배열의 길이와 모든 대응 요소가 정확히 일치하므로 true가 출력됩니다.

추가 팁

위 방법 외에도 ES6 이상 환경에서는 every() 메서드를 활용해 더 간결하게 표현할 수 있습니다.

const areEqual = (first, second) =>
    first.length === second.length &&
    first.every((val, i) => val === second[i]);

단, 이 방식 역시 원시 타입(primitive) 요소에만 적합하며, 배열 안에 객체나 중첩 배열이 포함된 경우에는 깊은 비교(deep comparison) 로직이 추가로 필요하다는 점을 유의해야 합니다.