JavaScript에서 두 객체의 차이 구하기: 키 비교 함수 완벽 가이드

JavaScript 개발을 하다 보면 두 객체를 비교하여 한쪽에만 존재하는 데이터를 추출해야 하는 경우가 자주 발생합니다. 폼 입력값의 변경 사항을 감지하거나, API 응답 데이터 간의 차이를 확인할 때 특히 유용합니다.

이번 글에서는 두 개의 객체(중첩된 객체도 처리 가능)를 인자로 받아, 첫 번째 객체에는 있지만 두 번째 객체에는 없는 키만으로 새로운 객체를 생성해 반환하는 함수를 만들어 보겠습니다.

구현 코드

const obj1 = {
    "firstName": "Raghav",
    "lastName": "Raj",
    "age": 43,
    "address": "G-12 Kalkaji",
    "email": "raghavraj1299@yahoo.com",
    "salary": 90000
};
const obj2 = {
    "lastName": "Raj",
    "address": "G-12 Kalkaji",
    "email": "raghavraj1299@yahoo.com",
    "salary": 90000
};
const objectDifference = (first, second) => {
    return Object.keys(first).reduce((acc, val) => {
        if(!second.hasOwnProperty(val)){
            acc[val] = first[val];
        };
        return acc;
    }, {});
};
console.log(objectDifference(obj1, obj2));

실행 결과

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

{ firstName: 'Raghav', age: 43 }

코드 동작 원리

함수의 핵심 로직을 단계별로 살펴보겠습니다.

• Object.keys(first): 첫 번째 객체의 모든 키를 배열 형태로 가져옵니다.
• reduce(): 각 키를 순회하면서 빈 객체({})를 초기값으로 삼아 결과 객체를 누적적으로 생성합니다.
• hasOwnProperty(val): 두 번째 객체에 해당 키가 존재하는지 검사합니다. 존재하지 않는 경우에만 첫 번째 객체의 값을 결과 객체에 추가합니다.

위 예제에서 obj1에는 있지만 obj2에는 없는 키는 firstName과 age 두 개뿐입니다. 따라서 최종 결과 객체에는 이 두 키와 그에 대응하는 값만 담기게 됩니다.

참고 사항

이 함수는 얕은(shallow) 비교 방식으로 동작합니다. 즉, 중첩된 객체 내부의 속성까지 깊게 비교하지는 않습니다. 중첩 객체의 내부 키까지 비교하려면 재귀 호출을 활용한 깊은(deep) 비교 로직을 추가로 구현해야 합니다.