자바스크립트 (배열 및 객체) 얕은 복사와 깊은 복사의 개념 정리

자바스크립트 복사

 

배열 Array안에 2중 배열이 선언되있거나 객체가 선언되어 있다고 가정했을때 이 배열을 복사하려고 하면,

얕은복사나 깊은복사 중 1개를 선택해야 한다.

 

 

얕은 복사

 

ex)

const array = [{a : ' java '}, {b : ' script '}];

const array2 = [...array]; // 스프레드 문법을 이용하여 얕은 복사를 할 수 있다. ))) 방법 1

const array3 = array.slice(); // slice() 메서드를 이용하여 얕은 복사를 할 수 있다. ))) 방법 2

const array4 = array.concat(); // concat() 메서드를 이용하여 얕은 복사를 할 수 있다. ))) 방법 3

console.log(array === array2); // false 반환

console.log(array[1] === array2[1]) // true 반환

 

-  가장 바깥에 있는 array 배열은 관계가 끊어져 각각의 배열이 만들어 진다.

-  배열 요소인 객체는 각 배열  array, array2 안 객체 관계가 끊어지지 않고 같은 객체를 가리키게 된다.

-  slice(), concat() 메서드를 이용하여 얕은 복사를 할 수 있다.

 

 

깊은 복사

 

ex)

const array = [{a : ' java '}, {b : ' script '}];

const array2 = JSON.parse(JSON.stringify(array)); // JSON.parse, JSON.stringify를 이용하여 깊은 복사를 할 수 있다.

console.log(array === array2); // false 반환

console.log(array[1] === array2[1]) // false 반환

 

- 깊은 복사를 하게 된다면 배열 각각 다른 객체가 각자 생성되므로 모든 값은 false가 나오게 된다.

- JSON.parse( ), 문자열을 객체로 바꾸는 메서드

- JSON.stringify( ), 객체를 문자열로 바꾸는 메서드

 

사카에역 인근 악기숍 보스 이펙터들