JavaScript에서 배열 및 객체 비교하기

JavaScript에서 배열이나 객체를 비교할 때는 주의해야 할 몇 가지 중요한 개념이 있습니다. 특히, 두 배열이나 객체가 같은지 비교할 때는 그들의 참조(reference)와 내용을 구분할 필요가 있습니다. 이 글에서는 JavaScript에서 배열과 객체를 비교하는 방법에 대해 설명하겠습니다.

배열과 객체의 참조 비교

JavaScript에서 배열과 객체는 참조 타입(reference type)입니다. 이는 변수에 실제 값이 아니라 메모리 주소(참조)가 저장된다는 것을 의미합니다. 따라서 === 연산자를 사용하여 두 배열이나 객체를 비교할 때는 두 변수가 같은 메모리 주소를 참조하고 있는지를 비교합니다.

예제

let arr1 = [];
let arr2 = [];

console.log(arr1 === arr2); // false

위 예제에서 arr1과 arr2는 모두 빈 배열이지만, 각각은 서로 다른 메모리 주소를 참조하고 있기 때문에 arr1 === arr2는 false를 반환합니다.

배열과 객체의 내용 비교

두 배열이나 객체가 같은 내용을 가지고 있는지를 비교하려면 참조가 아닌 내용을 비교해야 합니다. 이를 위해 배열의 length 속성을 사용하거나, 직접 내용을 비교하는 방법을 사용할 수 있습니다.

배열이 빈 배열인지 확인하기

배열이 비어 있는지 확인할 때는 length 속성을 사용하는 것이 일반적입니다.

let arr = [];

console.log(arr.length === 0); // true

arr.length === 0은 배열이 비어 있음을 확인하는 올바른 방법입니다.

조건문에서 배열을 비교하는 방법

조건문에서 배열이 비어 있는지를 확인하고, 비어 있으면 [-1]을 반환하고, 그렇지 않으면 원래 배열을 반환하는 예제를 살펴보겠습니다.

코드 예제

function checkAndReturnAnswer(stk) {
    let answer = stk;
    if (answer.length === 0) {
        return [-1];
    } else {
        return answer;
    }
}

// 테스트 케이스
let result1 = checkAndReturnAnswer([]);
console.log(result1); // [-1]

let result2 = checkAndReturnAnswer([1, 2, 3]);
console.log(result2); // [1, 2, 3]

위 코드에서 if (answer.length === 0)를 사용하여 배열이 비어 있는지를 확인합니다. 이 방식은 배열의 내용을 비교하는 올바른 방법입니다.

객체 내용 비교

객체의 내용을 비교하려면 키와 값을 하나씩 비교하는 방법을 사용해야 합니다. 이를 위해 JSON.stringify를 사용하거나, 깊은 비교를 수행하는 함수를 작성할 수 있습니다.

예제: JSON.stringify 사용

let obj1 = { a: 1, b: 2 };
let obj2 = { a: 1, b: 2 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

JSON.stringify를 사용하면 객체를 문자열로 변환한 후 비교할 수 있습니다. 이 방법은 객체의 키와 값이 순서대로 정렬되어 있는 경우에만 올바르게 작동합니다.

깊은 비교 함수 작성

깊은 비교를 수행하는 함수를 직접 작성할 수도 있습니다. 이는 두 객체의 모든 키와 값을 재귀적으로 비교합니다.

function deepEqual(obj1, obj2) {
    if (obj1 === obj2) return true;

    if (typeof obj1 !== 'object' || obj1 === null ||
        typeof obj2 !== 'object' || obj2 === null) {
        return false;
    }

    let keys1 = Object.keys(obj1);
    let keys2 = Object.keys(obj2);

    if (keys1.length !== keys2.length) return false;

    for (let key of keys1) {
        if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
            return false;
        }
    }

    return true;
}

// 테스트 케이스
let obj1 = { a: 1, b: { c: 3 } };
let obj2 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true

이 함수는 객체의 모든 키와 값을 재귀적으로 비교하여 두 객체가 같은 내용을 가지고 있는지 확인합니다.

결론

JavaScript에서 배열이나 객체를 비교할 때는 참조와 내용을 구분해야 합니다. 참조 비교는 두 변수가 같은 메모리 주소를 가리키는지를 확인하며, 내용 비교는 두 배열이나 객체가 동일한 값을 가지고 있는지를 확인합니다. 배열이 비어 있는지 확인할 때는 length 속성을 사용하고, 객체의 내용을 비교할 때는 JSON.stringify 또는 깊은 비교 함수를 사용할 수 있습니다.