자바스크립트는 크게 원시 타입과 객체 타입으로 나눌 수 있습니다. 이 두 타입은 메모리에 저장되는 방식에 큰 차이가 있습니다.
원시 타입 (불변값)
원시 타입의 값은 변경할 수 없는 불변값이라고도 부릅니다. 이는 상수처럼 값을 바꿀 수 없다는 의미가 아니라 변수에 새로운 값을 할당할 때 기존 메모리 공간의 값이 바뀌는 것이 아니라 새로운 메모리 공간에 새로운 값이 만들어지고 변수가 그곳을 가리키게 된다고 해서 불변값이라고 부릅니다.
let p1 = 1;
let p2 = p1;
p2 = 2;
이렇게 되면 메모리에 사용하지 않는 값들은 어떻게 될까요? 자바스크립트에서도 가바지 컬렉션이 있어서 더 이상 사용하지 않은 값은 자동으로 제거해줍니다.
객체 타입(가변값)
객체 타입은 메모리에 값을 저장하지 않고 참조값을 저장하기 때문에 객체의 프로퍼티를 변경해도 메모리 위치는 변경되지 않습니다.
let ojb1 = { name: "peel"}
let ojb2 = ojb1;
객체 타입 주의사항
1. 의도치 않은 값 수정 (얕은 복사)
- 위의 사진을 보면 두 객체의 참조값이 같으므로 단 한개의 객체의 프로퍼티 값을 수정해도 둘 다 수정되는 걸 볼 수 있습니다. 원본 객체나 복사 객체가 수정되면 함께 변경되어서 두 객체의 프로퍼티 값이 수정되어 예상치 못한 값이 수정되어 오류가 발생할 수 있습니다.
- 해결 방법: Spread 연산자나 Object.assign() 등을 사용하여 원본 객체에 참조값과 다른 독립적인 객체(깊은 복사)가 생성됩니다.
2. 객체간의 비교 상황(얕은 비교)
- 객체를 비교 연산자로 서로 비교하면 참조값을 비교하게 됩니다.
- 해결 방법: JSON.stringify() 같은 객체를 문자열로 형변환하는 함수를 이용해서 해결할 수 있습니다.(깊은 비교)
객체의 참조 값으로 이루어지는 행동을 얕은xx라고 부르며, 객체 프로퍼티 값들을 하는 행동을 깊은 xx라고 합니다.