JavaScript에서 특정 키 하나를 제외한 객체 복제 방법

JavaScript 객체에서 특정 키 하나만 제외하고 복제하는 가장 간단한 방법은 객체 전체를 복제한 뒤, 필요 없는 속성을 제거하는 것입니다. 이때 객체 복제는 크게 두 가지 방식으로 나뉩니다.

• 얕은 복사(Shallow Copy)
• 깊은 복사(Deep Copy)

얕은 복사(Shallow Copy)

얕은 복사는 최소한의 데이터만 복제합니다. 컬렉션을 얕게 복사하면 컬렉션의 구조만 새로 만들어질 뿐, 내부 요소들은 원본과 복사본이 서로 공유하게 됩니다. 따라서 중첩된 객체를 수정하면 그 변경 사항이 원본에도 그대로 반영됩니다.

예제

let innerObj = {
    a: 'b',
    c: 'd'
}
let obj = {
    x: "test",
    y: innerObj
}
// 얕은 복사 생성
let copyObj = Object.assign({}, obj);
// copyObj와 obj의 y 속성은 동일한 innerObj를 참조하므로 변경 사항이 서로에게 반영됩니다.
innerObj.a = "test"
console.log(obj)
console.log(copyObj)

실행 결과:

{ x: 'test', y: { a: 'test', c: 'd' } }
{ x: 'test', y: { a: 'test', c: 'd' } }

얕은 복사는 재귀적으로 복제하지 않고 최상위 수준에서만 복사가 이루어진다는 점에 유의하세요.

깊은 복사(Deep Copy)

깊은 복사는 모든 것을 복제합니다. 컬렉션을 깊게 복사하면 원본의 모든 요소가 완전히 새롭게 복제된, 서로 독립적인 별개의 컬렉션이 만들어집니다.

예제

let innerObj = {
    a: 'b',
    c: 'd'
}
let obj = {
    x: "test",
    y: innerObj
}
// 깊은 복사 생성
let copyObj = JSON.parse(JSON.stringify(obj))
// copyObj의 y 속성은 원본과 독립적이므로 innerObj를 변경해도 영향을 받지 않습니다.
innerObj.a = "test"
console.log(obj)
console.log(copyObj)

실행 결과:

{ x: 'test', y: { a: 'test', c: 'd' } }
{ x: 'test', y: { a: 'b', c: 'd' } }

다만 JSON 직렬화 방식은 함수, undefined, Symbol 등은 복사할 수 없다는 한계가 있습니다. 최신 JavaScript 환경에서는 내장 메서드인 structuredClone()을 사용하는 것이 더 안전하고 권장됩니다.

delete 키워드로 불필요한 키 제거하기

위 방법 중 하나로 복사본을 만든 후에는 delete 키워드를 사용해 원하지 않는 속성을 제거할 수 있습니다.

예제

let original = { x: 'test', y: { a: 'test', c: 'd' } }
let copy = JSON.parse(JSON.stringify(original))
delete copy['x']
console.log(copy)
console.log(original)

실행 결과:

{ y: { a: 'test', c: 'd' } }
{ x: 'test', y: { a: 'test', c: 'd' } }

추가 팁: 구조 분해 할당으로 더 간결하게

ES2018부터 지원되는 구조 분해 할당과 rest 연산자(...)를 활용하면 복제와 키 제거를 한 번에 처리할 수 있어 더욱 간결합니다.

const original = { x: 'test', y: { a: 'test', c: 'd' } }
const { x, ...rest } = original
console.log(rest) // { y: { a: 'test', c: 'd' } }