얕은복사, 깊은복사, 구조분해할당

■  얕은복사

외부 객체만 복사되고 내부 객체는 참조 관계를 유지하는 복사

 

☛  ... 연산자(스프레드 문법) : 기존 객체의 속성을 새 객체에 대입할 때 사용

    배열은 [ ...배열 ]    /    객체는 { ...객체 } 로 사용

 

☛  concat( );  , slice( );  : 배열 메서드 사용

   (예시)  

    const array = [ { a : 'b' }, { c : 'd' } ];

    const light = array.slice();  메서드의 인수로 아무것도 넣지 않으면 됨

 

☛  for ~ in 구문 : 객체의 모든 프로퍼티에 접근

    객체를 복사 한 다음, 복사를 완료한 객체의 프로퍼티를 변경

 

 

■  깊은복사

외부 객체 뿐만 아니라 내부 객체(중첩)까지 참조 관계가 끊기면서 복사되는 것

 

☛ JSON.parse( )  ,  JSON.stringify( )  메서드를 조합해서 사용

    JSON.parse( ) : 문자열을 객체로 만듦

   JSON.stringify( ) : 객체를 문자열로 만듦 (*순환참조를 지원하지 않아서 객체 안에 객체가 주첩 되어 있는 경우 복사할 수 없음)

   * 원본 객체가 가지고 있는 모든 정보를 복사하지는 않는다. (함수, undefined와 같은 속성 값은 복사되지 않음)

   * 객체의 구조가 간단하고, 함수나 undefined 와 같은 속성값이 없는 경우 적합하다.

   (예시)  

   const array = [ { a : 'b' }, { c : 'd' } ];

   const deep = JSON.parse(JSON.stringify(array)); 

 

 

* 객체를 복사할 때는 내부 객체까지 복사할 건지를 생각해봐야 함!

 

 

■  구조분해할당

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

객체에서 객체의 속성 이름과 대입하는 변수명이 같을 때 줄여서 쓸 수 있음

여러 속성을 한번에 변수에 대입할 때 유용함!

const obj = { a:1, b:2 };
const a = obj.a;
const b = obj.b;
const { a, b } = obj; // 2,3번째 줄을 한줄로 표현 가능
a; // 1

const array = [1, 2, 5];
const one = array[0];
const two = array[1];
const five = array[2];
const [one, two, five] = array; // 세 줄을 한줄로 표현
five; // 5

// 변수 a 와 b 의 값을 서로 바꾸기
let a = 5;
let b = 3;
[b, a] = [a, b]; // [5, 3]
// a와 b를 [a, b] 배열로 만든 뒤에 구조분해할당을 해서 첫번째 요소는 b에 두번째는 a에 대입