let dog = "겨울"
let dog2 = dog
console.log(dog) // 겨울
console.log(dog2) // 겨울
dog2 = '반달'
console.log(dog2) // 반달
console.log(dog) // 겨울
원본에는 영향이 없음.
자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.
Call Stack 은 원시타입의 데이터가 저장되는 곳이고
Memory Heap 은 참조타입(객체 등)데이터가 저장되는 곳이다.
자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있습니다.
원시타입 객체는 위의 그림과 같이 각각의 메모리 주소에 값이 할당되어 서로에게 a와b의 값이 변경되어도 서로에게 영향을 미치지 않는다.
하지만 참조타입(객체,배열 등)의 데이터는 해당 메모리의 값이 참조되어 a,b의 값
이 서로 참조되어있어 원본데이터까지 변경되는 것인데, 이를 그림으로 표현해보면,
참조타입의 데이터는 메모리값에 참조되고, 변수 dog,dog2는 같은 메모리값을 참조하고 있게된다. 따라서 dog2.name을 변경하게 되면
같은 값을 참조하고있는 dog의 이름까지 같이 변경되는 것이다. 얕은복사는 하나의 객체라도 원본객체를 참조하고 있으면 얕은복사 참조하는 객체가 없으면 깊은복사라고 한다.
객체와의 참조를 끊기위해 우리는 lodash 의 JSON.stringfiy(obj)를 사용 할수 있다. 위 명령어는 객체를 문자로 바꿔주는 명령어 인데 이를 통해 객체에 참조된것들이 모두 끊기게 된다. 참조를 끊어준 후 다시 JSON.parse로 다시 객체로 변환하여 새로운 메모리 주소를 부여하는 방식이다. 이 방법은 lodash를 사용하여 굉장히 편하게 사용할 수 있지만, 전체를 문자열로 바꾸고 다시 새로운 객체로 만드는 것이기 때문에 속도가 느리다는 단점이있다.
const child1 = {
name: {first: "황", last: "겨울"},
age: 13,
schhol:"겨울초등학교"
}
JSON.stringify(child1)
JSON.parse(JSON.stringify(child1))
const child2 = JSON.parse(JSON.stringify(child1))
child2.name = {first : "황", last :"반달"}
console.log(child2)
원본 객체와는 상관없이 변경되는 것을 볼 수 있다.
