Web/모던 자바스크립트 Deep Dive
[모던 자바스크립트 Deep Dive] 11. 원시 값과 객체의 비교
동띵
2023. 8. 28. 15:58
원시 값
변경 불가능한 값
- 원시 값은 변경 불가능한 값 ⇒ 한번 생성된 원시 값은 **읽기 전용** 값으로서 변경할 수 X
- 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값 저장 후 그 메모리 공간을 참조함 ⇒ 불변성 (immutability)
- 불면성 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값 변경할 수 있는 방법 X
문자열의 불변성
- 원시 값을 저장하려면 확보해야 하는 메모리 공간의 크기 결정해야 됨
- 숫자 값은 크기와 상관없이 무조건 8바이트 필요
- 문자열은 문자 개수 * 2바이트
- 문자열은 유사 배열 객체여서 인덱스로 접근 가능하지만, 읽기 전용이므로 인덱스로 접근하여 값을 변경하는 것은 불가능
- 그러나 변수에 새로운 문자열을 재할당하는 것은 가능
값에 의한 전달
- 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달
- 같은 수를 갖게 되지만, **다른 메모리 공간에 저장된 별개의 값**이므로 어느 하나의 값을 변경해도 다른 하나의 값에 영향 X
- 값을 복사하여 메모리 주소를 전달하는 방식 (할당 시점에 두 변수가 기억하는 메모리 주소가 다름)
- 할당되는 변수의 메모리 주소를 그대로 전달하는 방식 (할당 시점에 두 변수가 기억하는 메모리 주소가 같고, 어느 한쪽의 변수에 재할당이 이뤄졌을 때 새로운 메모리 공간에 재할당된 값을 저장함)
- 같은 수를 갖게 되지만, **다른 메모리 공간에 저장된 별개의 값**이므로 어느 하나의 값을 변경해도 다른 하나의 값에 영향 X
⇒ 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭 X
객체
- 객체는 프로퍼티 개수가 정해져 있지 않고, 동적으로 추가 삭제가 가능하여 **확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 X**
변경 가능한 값
- 객체는 변경 가능한 값
- 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖지만, 객체를 할당한 변수가 기억하는 **메모리 주소**를 통해 **메모리 공간에 접근**하면 **참조 값에 접근 가능** ⇒ 참조 값을 통해 실제 객체에 접근
- 참조 값 : 생성된 객체가 저장된 메모리 공간의 주소
- 객체를 할당한 변수는 재할당 없이 객체를 직접 변경, 동적으로 추가, 갱신, 삭제 가능
- 재할당하지 않았으므로 객체를 할당한 변수의 참조 값 변경되지 X
- 원시 값과 다르게 **여러 개의 식별자가 하나의 객체 공유** 가능하다는 단점이 있음
- 객체의 얕은 복사 : 중첩된 객체의 경우 참조 값을 복사함 (ex. spread 연산자를 사용해 할당)
- 객체 수정 시 다른 값에 영향을 미침
const o = {x:{y:1}}; const c1 = {...o}; console.log(c1 === o) // false console.log(c1.x === o.x) // true - 객체의 깊은 복사 : 중첩된 객체라도 모두 복사하여 원시 값처럼 완전한 복사본을 만듦 (ex. lodash의 cloneDeep)
- 객체 수정하더라도 서로 영향을 미치지 X
const o = {x:{y:1}}; const _ = require('lodash'); const c2 = _.cloneDeep(o); console.log(c1 === o) // false console.log(c1.x === o.x) // false
참조에 의한 전달
- 객체를 가리키는 변수를 다른 변수에 할당하면 **원본의 참조 값이 복사되어 전달**됨 ⇒ 참조에 의한 전달
- 변수 2개가 저장된 메모리 주소는 각각 다르지만 동일한 참조 값을 가짐 ⇒ **모두 동일한 객체를 가리켜** 하나의 객체의 프로퍼티 값이 변경되면 서로 영향을 주고받음