자바스크립트 : 깊은 복사 vs 얕은 복사

깊은 복사

 

깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다. 

 

즉 원본의 값만을 복사하여 반환 합니다.

 

// 일반변수의 깊은복사
let a = 2;
let b = a;
console.log (a, b) // 2, 2
b = 3;
console.log (a, b) // 2, 3

// 배열의 깊은복사
const a = [1, 2, 3, 4];
const b = [...a];
b[3] = 3
console.log(a) // 1, 2, 3, 4
console.log(b) // 1, 2, 3, 3

 

 

얕은 복사

 

반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다.

 

원본 배열의 참조 주소를 반환합니다.

 

// Object의 얕은 복사
let object = {a:0, b:0, c:0}
let object2 = object 
console.log(object.a, object2.a) // 2, 2
object2.a = 3
console.log(object.a, object2.a) // 3, 3

// 배열의 얕은 복사
const a = [1, 2, 3, 4];
const b = a;
b[3] = 3
console.log(a) // 1, 2, 3, 3
console.log(b) // 1, 2, 3, 3