JavaScript로 두 객체를 비교해 공통 값을 가진 키만 배열로 반환하기

두 개의 객체를 인수로 전달받아, 두 객체 모두에 존재하면서 값까지 서로 같은 공통 키(key)만 모아 배열로 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.

구현 아이디어

핵심 로직은 다음 세 단계로 정리할 수 있습니다.

• Object.keys()로 첫 번째 객체의 모든 키를 추출합니다.
• filter()를 사용해 각 키가 두 번째 객체에도 존재하는지(hasOwnProperty) 확인하고, 두 객체에서 해당 키의 값이 일치(===)하는지 검사합니다.
• 조건을 통과한 키들만 모아 새로운 배열로 반환합니다.

코드 예제

const obj1 = { a: true, b: false, c: "foo" };
const obj2 = { a: false, b: false, c: "foo" };

const compareObjects = (obj1 = {}, obj2 = {}) => {
    const common = Object.keys(obj1).filter(key => {
        if(obj1[key] === obj2[key] && obj2.hasOwnProperty(key)){
            return true;
        }
        return false;
    });
    return common;
};

console.log(compareObjects(obj1, obj2));

실행 결과

콘솔에는 다음과 같이 출력됩니다.

['b', 'c']

동작 원리 살펴보기

위 예제에서 키 'a'는 obj1에서는 true, obj2에서는 false로 값이 달라 제외됩니다. 반면 'b'는 두 객체 모두 false, 'c'는 두 객체 모두 "foo"이므로 조건을 만족해 최종 결과 배열에 포함됩니다.

한 가지 주의할 점은 === 연산자의 비교 방식입니다. 문자열, 숫자, 불리언 같은 원시 타입은 값을 직접 비교하지만, 객체나 배열 같은 참조 타입은 메모리상의 참조 주소를 기준으로 비교합니다. 따라서 중첩된 객체의 깊은 비교(deep compare)가 필요하다면 재귀적으로 속성을 비교하는 별도의 로직을 작성하거나, Lodash의 isEqual 같은 검증된 유틸리티 라이브러리를 활용하는 것이 안전합니다.