[JavaScript] 자바스크립트 객체 복사하기

063_자바스크립트 객체 복사하기

[적용]

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

---

[문법]

구문	의미
[...복사대상객체]	대상 객체의 각 요소를 분할 대입(복사)

[문법]

메소드	의미	반환
Object.assign({}, 복사대상객체)	객체를 복사	객체

---

const object1 = {
    result: true,
    members: [
        { id: 1, name: '여우' },
        { id: 2, name: '호랑이' },
        { id: 3, name: '사자' }
    ]
};

// 객체를 복사
const copiedObject1 = Object.assign({}, object1);

console.log(copiedObject1);
// 객체가 복사됨
// {
//     result:true,
//     members: [
//        { id: 1, name: '여우' },
//        { id: 2, name: '호랑이' },
//        { id: 3, name: '사자' }
//    ]
// };

 

스프레드 연산자 '...'를 사용하면 다음과 같이 코드를 간략하게 만들 수 있다.

const object2 = {
    result: true,
    members: [
        { id: 1, name: '여우' },
        { id: 2, name: '호랑이' },
        { id: 3, name: '사자' }
    ]
};

// 객체를 복사
const copiedObject2 = { ...object2 };

console.log(copiedObject2); // 객체가 복사됨

실행결과

copiedObject2를 콘솔로 확인

 

Object.assign()과 스프레드 연산자를 사용하면 얕은 복사 (Shallow Copy)가 이루어진다.

얕은 복사란, 복사 전 데이터와 복사 후의 데이터가 같은 곳을 참조하는것이다.

그러므로 복사전의 데이터를 수정하면 복사 후의 데이터에도 영향을 미친다.

---

[예시]

다음의 샘플 코드는 스프레드 연산자를 사용해 객체를 복사한다. 복사 대항인 members속성의 배열을 살펴보자.

첫 번째 요소를 John으로 변경하면 복사된 데이터 역시 변경된 것을 확인할 수 있다.

이것이 얕은 복사의 특징이다.

// 복사 전 객체
const object3 = {
    id: 1,
    members: [ '사자', '토끼', '거북이' ]
};

// 객체의 복사
const copiedObject3 = { ...object3 };

// 복사 전 객체 members 속성의 배열을 수정
object3.members[0] = 'John';

// 복사된 members 속성의 배열도 영향을 받음
console.log(copiedObject3.members[0]); // 결과: 'John'

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김