Object.assign()할 때 JSON.parse()로 깊은 복사하기

copy......c....o...p...y

라이브러리를 사용하지 않고 하는 간단한 깊은 복사 방식

먼제 json 메소드 parse와 stringify를 알아야한다.

JSON.parse()

- JSON 문자열을 javascript 객체로 변환

- JavaScript 객체로 변환된 데이터는 . 나 [] 기호를 사용하여 각 속성에 접근할 수 있다.

- 외부 문자열을 내장 데이터 타입으로 변환하는 역직렬화(deserialization) 과정에서 사용

 

JSON.stringify()

- javascript 객체를 JSON 문자열로 변환

- 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 직렬화(serialization)과정에서 사용

 

Object.assign()으로 할당할 때 깊은 복사

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

  // 깊은 복사
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

깊은 복사 : 원본을 바꾸어도 복사본에 아무 변화 없는 것

얕은 복사 : 원본을 통째로 복사한게 아니라 주소만 참조한거라 값을 바꾸면 원본-복사본 서로 영향을 주는 것

 

복사하고자 하는 대상이 배열일 경우에는 Object.assign 대신 concat, slice, Array.from 를 주로 이용한다.

 

 

 

 

참조, 출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
https://www.daleseo.com/js-json/

Object.assign() - JavaScript | MDN

JSON.parse()와 JSON.stringify()