JavaScript에서 객체 병합과 속성 삭제하기

JavaScript로 개발을 하다 보면 여러 개의 객체를 하나로 합치거나, 불필요한 속성을 제거해야 하는 상황이 자주 발생합니다. 이번 글에서는 객체 배열을 단일 객체로 병합하는 방법과 특정 속성을 삭제하는 방법을 예제와 함께 살펴보겠습니다.

문제 상황

다음과 같이 두 개의 객체를 담고 있는 배열이 있다고 가정해 보겠습니다. 우리가 해야 할 작업은 이 두 객체를 하나로 합친 뒤, chk 속성을 완전히 제거하는 것입니다.

const err = [
    {
        "chk" : true,
        "name": "test"
    },
    {
        "chk" :true,
        "post": "test"
    }
];

1단계: Object.assign()으로 객체 병합하기

Object.assign() 메서드는 하나 이상의 출처(source) 객체로부터 대상(target) 객체로 속성을 복사하여 새로운 객체를 만들어 줍니다. 전개 연산자(...)를 함께 사용하면 배열에 담긴 모든 객체를 한 번에 병합할 수 있습니다.

const errObj = Object.assign(...err);

위 코드에서 ...err는 배열의 요소들을 개별 인수로 펼쳐주기 때문에, 결과적으로 두 객체의 모든 속성이 하나의 객체로 합쳐집니다. 만약 동일한 키가 여러 객체에 존재한다면, 뒤에 오는 객체의 값이 앞선 값을 덮어쓰게 됩니다.

2단계: delete 연산자로 속성 삭제하기

병합된 객체에서 chk 속성을 제거하려면 delete 연산자를 사용합니다.

delete errObj['chk'];
console.log(errObj);

delete 연산자는 객체에서 지정한 속성과 그 값을 완전히 제거하며, 삭제에 성공하면 true를 반환합니다.

전체 코드 예제

지금까지의 과정을 하나의 코드로 정리하면 다음과 같습니다.

const err = [
    {
        "chk" : true,
        "name": "test"
    },
    {
        "chk" :true,
        "post": "test"
    }
];
const errObj = Object.assign(...err);
delete errObj['chk'];
console.log(errObj);

실행 결과

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

{ name: 'test', post: 'test' }

두 객체가 성공적으로 하나로 병합되었고, chk 속성은 깔끔하게 제거된 것을 확인할 수 있습니다.

참고: 스프레드 연산자를 활용한 방법

ES2018부터는 객체 스프레드 문법을 사용하여 더 간결하게 병합할 수도 있습니다.

const { chk, ...rest } = Object.assign(...err);
console.log(rest); // { name: 'test', post: 'test' }

구조 분해 할당(destructuring)으로 chk를 분리해내고 나머지 속성만 남기는 방식으로, 원본 객체를 변경하지 않으면서 새로운 객체를 얻을 수 있다는 장점이 있습니다.