원시 타입과 객체 타입의 차이점
자바스크립트는 7개의 데이터 타입을 크게 원시 타입과 객체 타입으로 구분할 수 있는데, 3가지 측면에서 다르다.
- 변경 가능 여부
- 원시 값: 변경 불가능
- 객체 값: 변경 가능
- 변수에 저장되는 값
- 원시 값: 실제 값
- 객체 값: 참조 값
- 재할당의 과정
- 원시 타입: 값에 의한 전달(pass by value)
- 객체 타입: 참조에 의한 전달(pass by reference)
원시 값
원시 값은 한 번 생성되면, 읽기 전용 값으로 변경할 수 없게 된다.
이때 변수와 값을 구분해서 생각해야 되는데
"변수"는 값을 저장하기 위한 메모리 공간이고, "깂"은 변수에 저장된 값이 평가되어 생성된 결과다.
따라서 변경할 수 없는 것은 변수가 아니라, "값"이 변경 불가능한 것이다.
원시 값은 변경이 불가능하기 때믄에, 값을 직접 변경할 수 없다. 변수 값을 변경하려면 원시 값을 재할당하여 메모리 공간의 주소를 변경해야 한다.
즉, 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면, 변수가 참조하던 메모리 공간의 주소가 바뀐다. 이런 특징을 불변성이라고 한다.
변수 vs 상수
변수(variable)
- 변수는 언제든지 "재할당"을 통해 변수 값을 변경할 수 있다
상수(constant)
- 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 "변수"라고 할 수 있다.
- 하지만, 상수는 단 한 번만 할당이 허용하므로 변수 값을 변경할 수 없다.문자열과 불변성
자바스크립트는 원시 타입인 문자열 타입을 제공한다. 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 각 문자에 접근할 수 있다. 하지만, 일부 문자를 변경하는 것은 불가능하다.
따라서 원시 값은 어떤 일이 있어도 불변한다. 이는 데이터의 신뢰성을 보장한다.
var str = 'Hello';
str = 'world'; // 새로운 메모리에 world를 저장
str=[0] = 'W';
console.log(str); // world값에 의한 전달 (pass by value)
변수에 변수를 할당했을 때 무엇이 어떻게 전달될까?
변수에 원시 값을 갖는 변수를 할당하면, 변수의 원시 값이 복사되어 전달된다.
값에 의한 전달은 값을 전달하는게 아니라, 메모리 주소를 전달한다.
따라서, 한 변수에 원시 값을 갖는 변수를 할당하면 두 변수의 원시 값은 서로 다른 메모리 공간에 저장되어 어느 한쪽에서 재할당을 해도 서로 간섭할 수 없다.
var score = 80;
var copy = score; // copy 변수에도 80이 할당됨
console.log(score); // 80
console.log(copy); // 80
score = 100;
console.log(score); // 100
console.log(copy); // 80, 다른 메모리에 저장된 별개의 값이기 때문객체
자바스크립트의 객체 관리 방법 -> V8 자바스크립트 엔진의 히든 클래스 (hidden class)
객체는 변경 가능한 값으로 "참조 값"으로 객체에 접근할 수 있다.
객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.
자바스크립트 객체가 변경 가능한 값 이어야하는 이유는 메모리의 효율적 소비가 어렵고 성능이 나빠지는 것을 최소화 하기 위해서다.
객체를 원시 값처럼 이전 값을 복사해서 새롭게 생성 한다면 → 명확하고 신뢰성이 확보
하지만, 객체는 크기가 매우 클 수 있고, 원시 값처럼 크기가 일정하지도 않고, 프로퍼티 값이 객체일 수도 있어서 복사(deep copy)해서 생성하는 비용이 많이 든다.
따라서, 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계한 것이다.
참조에 의한 전달 (pass by reference)
원시 값과 다르게, 여러 개의 식별자가 하나의 객체를 공유할 수 있다.
객체를 가리키는 변수를 다른 변수에 할당하면, 원본의 참조 값이 복사되어 전달되는데 메모리 주소는 다르지만 동일한 참조 값을 가지게 된다.
따라서, 어느 한쪽에서 객체를 변경(재할당이 아니라 값을 변경, 추가, 삭제)하면 서로 영향을 주고받는다.
결국 "값에 의한 전달"과 "참조에 의한 전달"은 식별자가 기억하는 메모리 공간에 저장되어 이는 값을 복사해서 전달한다는 것은 동일하다. 메모리 공간에 있는 값이 원시 값이냐, 참조 값이냐의 차이만 있다.
자바스크립트에는 참조에 의한 전달은 존재하지 않고 값에 의한 전달만 존재한다고 말할 수 있다.
얕은 복사 (shallow copy) vs 깊은 복사 (deep copy)
얕은 복사: 한 단계까지만 복사
깊은 복사: 객체에 중첩되어 있는 객체까지 복사
이러한 복사로 생성된 객체는 원본과는 다른 객체다.
const o = {x: {y: 1} };
// 얕은 복사
const c1 = { ...o };
console.log(c1 === o); // false
console.log(c1.x === o.x); // true
const _ = require('lodash'); // lodash의 cloneDeep을 사용한 깊은 복사
// 깊은 복사
const c2 = _.clondeDeep(o);
console.log(c2 === o); // true
console.log(c2.x === o.x); // false