[javaScript] 객체의 깊은 복사 / 얕은 복사

얕은 복사는 객체의 참조값(주소)를 복사하고,

깊은 복사는 객체의 값 자체를 복사한다.

 

얕은 복사(Shallow Copy)

const user = {
	name : "lee",
	age : 99,
}
conset user2 = user;
user2.name ="kim";
//모두 똑같은 객체를 바라보고 있음 
console.log(user); // {name:"kim", age:99}
console.log(user2); // {name:"kim", age:99}

user를 user1에 넣었더니 기존의 user 값도 같이 변경된 것을 확인 할 수 있다.

데이터 자체를 복사한 것이 아니라 해당 데이터의 참조 값을 전달하여 하나의 데이터를 공유하는 것이다.

 

 

깊은 복사(Deep Copy)

얕은 복사처럼 참조 주소값이 복사 되는 것이 아닌, 값만 복사되는 것이다. 

원본과의 참조가 완저니 끊어진 객체이다.

깊은 복사 방법은 아래와 같다.

 

1. Object.assign()

Object.assign(생성할 객체, ...복사할 객체);
단, 2차원 객체는 얕은 복사가 됨

const user = {
	name : "lee",
	age : 99,
}
const user2 = object.assign({},user); // 값 초기화하고 user 복사
user2.name ="kim";

console.log(user); // {name:"lee", age:99}
console.log(user2); // {name:"kim", age:99}

 

 

2. 전개연산자(Spread Operator)

ECMAScript6(2015)에서 새로 추가된 문법

생성할 객체 = {...복사할 객체}
생성할 배열 = [...배열]
단, 2차원 객체는 얕은 복사가 됨

const user = {
	name : "lee",
	age : 99,
}
const user2 = {...user}
user2.name ="kim";

console.log(user); // {name:"lee", age:99}
console.log(user2); // {name:"kim", age:99}

 

 

3. JSON.parse && JSON.stringify

생성할 객체 = JSON.parse(JSON.stringify(복사할 객체));

const user = {
	name : "lee",
	age : 99,
}
const user2 = JSON.parse(JSON.stringify(user));
user2.name ="kim";

console.log(user); // {name:"lee", age:99}
console.log(user2); // {name:"kim", age:99}

 

JSON.stringify() 메소드로 객체를 json 문자열로 변환한다.

이때 원본 객체와의 참조가 끊어진다.
그 다음으로 JSON.parse() 메소드로 다시 원래 객체(자바스크립트 객체)로 변환한다.

단점은 속도가 느리고, 함수는 JSON.stringify()에서 undefined로 처리된다.