예제1).
const a = 1;
let b = a;
b=2 ;
console.log(a); // 1
console.log(b); // 2
예제2).
const a = {number : 1};
let b = a;
b.number = 2;
console.log(a); // {number : 2}
console.log(b); //{number : 2}
위의 예제1번을 보면 a의 console.log 값은 1이 나오고 b의 값은 2가 나오는 것을 볼 수 있다. 하지만 예제2번을 보면 b의 값이 변경됨에 따라 a의 number의 값도 변하는 것을 볼 수 있다.
왜냐하면 우선 자바스크립트는 변수에 값이 할당되면 자바스크립트 엔진이 해당값이 원시값인지 참조값인지 판단한다. 원시값은 위의 예제처럼 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다. 하지만 참조값은 변수가 객체의 주소를 가르키는 값이기 때문에 복사된 값(주소)가 같은 값을 가르킨다. 이러한 객체의 특징 때문에 객체를 복사하는 방법은 크게 두가지로 나뉜다.
얕은 복사 Shallow Copy
얕은 복사란 위의 예제처럼 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키는 것을 말한다. 다음은 얕은 복사를 하는 방법이다.
1. 전개연산자
const obj = {
a:1 ,
b:2 ,
c:3 ,
}
const copyObj = {...obj}
console.log(copyObj); // { a: 1, b:2 ,c:3}
2. 깊은 복사 Deep Copy
깊은 복사는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다. 가장 많은 메모리와 늦은 처리속도를 보인다.
1. JSON을 이용한 복사
const obj = {
a:1 ,
b:2 ,
c:3 ,
}
const deepObj = JSON.parse(JSON.stringfy(obj))
console.log(obj) // {a:1, b:2, c:3}
2. Object.assign()
Object.assign 는 첫번째 요소로 들어온 객체에 다음인자로 들어온 객체를 복사해준다.
const obj = {
a:1 ,
b:2 ,
c:3 ,
}
const copyObj = Object.assign({},obj};
console.log(copyObj); // { a: 1, b:2 ,c:3}
3. Deep + Shallow Copy
얇은 복사와 깊은 복사가 같이 합쳐져서 이루어지는 것이며 가장 많이 사용된다.
const obj = {a: 1, b:2, c:3 }
const obj2 = {number:obj, d:4} // shallow Copy
const copyObj = Object.assign({},obj2); // Deep Copy
console.log(copyObj) // {number: {a:1,b:2,c:3} ,d:4}
obj2.d = 1000;
console.log(copyObj) // {number: {a:1,b:2,c:3} ,d:4}
obj.a = 99;
console.log(copyObj) // {number: {a:99,b:2,c:3} ,d:4}
