[책] 자바스크립트 코드 레시피 278 - 55일차

객체 복사하기

• 데이터를 복사하고 싶을 때

구문

복사하고 싶은 객체 작성해줍니다.

{...Object.assign({}, object1);

실습

const object = {
    result: true,
    members: [
        {
            id: 1,
            name: '가',
        },
        {
            id: 2,
            name: '나',
        },
        {
            id: 3,
            name: '다',
        },
    ]
};
const copiedObject1 = Object.assign({}, object);
console.log(copiedObject1);

---

스프레드 연산자 '...' 를 사용할 수도 있습니다.

const object2 = {
    result: true,
    members: [
        {
            id: 1,
            name: '가',
        },
        {
            id: 2,
            name: '나',
        },
        {
            id: 3,
            name: '다',
        },
    ]
};
// 객체를 복사
const copiedObject2 = {...object2};
console.log(copiedObject2);

---

Object.assign() 과 스프레드 연산자를 사용하면 얕은 복사(Shallow Copy가 이루어진다. 얕은 복사란, 복사 전 데이터와 복사 후의 데이터가 같은 곳을 참조하는 것이다. 그러므로 복사 전의 데이터를 수정하면 복사 후의 데이터에도 영향이 미친다.

const object = {
    id: 1,
    members: ['사자', '토끼', '거북이'],
};
// 객체의 복사
const copiedObject3 = {...object};
console.log(copiedObject3.members[0]); // 사자
// 복사 전 객체 members 속성의 배열을 수정
object.members[0] = 'John';
// 복사된 members 속성의 배열도 영향을 받음
console.log(copiedObject3.members[0]); // John