얇은복사 vs 깊은복사

aa·2022년 5월 22일
0

길게 말 할 것 없다! 아래 코드로 느낌 받기

1번: spread 연산자 사용으로 배열 복사에 성공

const obj = { a:1, b:2 }
const obj2 = {...obj}
obj2.a = 100
console.log(obj === obj2) // false 
console.log(obj.a) // 1

//obj2.a value에 100을 할당했지만 obj.a value는 변하지 않음

2번: spread 연산자 사용했지만 배열 복사 실패

const obj = { a: { b:1, c:1 }, d: 2}
const obj2 = {...obj}
obj.a.b = 100
console.log(obj === obj2) // false
console.log(obj2.a.b) // 100

//obj.a.b value에 100을 할당했을 때 obj2.a.b value도 같이 100으로 변경됨.

3번: 깊이를 고려한 spread 연산자 사용으로 배열 복사 성공

const obj = { a: { b:1, c:1 }, d: 2}
const obj2 = {...obj, a:{...obj.a}}
obj.a.b = 100
console.log(obj === obj2) // false
console.log(obj2.a.b) // 1

//obj.a.b value에 100을 할당했을 때 obj2.a.b value는 변경되지 않음.

spread 연산자는 1단계 깊이에서 효과적으로 동작한다.

3번 예시에서 1단계 깊이의 d 의 경우 깊은복사가 성공적으로 되었겠지만,
a 는 2단계 깊이기 때문에 얕은복사가 되었다.
객체 내부의 값들이 복사가 되지 않고 객체 자체의 주소가 복사된 것.

spread란 녀석 아주 까다로운 놈이군..

참고했던 블로그가 있다!
매우 감사한 분의 블로그 고마워요!! :)
그리고,
MDN링크

profile
소개소개~

0개의 댓글