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는 변하지 않음
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으로 변경됨.
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링크