모던 JS Deep dive #11 | 원시 값과 객체의 비교
2022년 09월 28일 00:49
📌 원시값과 객체의 차이
- 원시 타입의 값은 변경 불가능한 값이고, 객체(참조) 타입의 값은 변경 가능한 값이다.
- 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 ¹실제 값이 저장되고, 객체의 경우에는 ³참조 값이 저장된다.
- 원시 값을 갖는 변수를 다른 변수에 할당하면 ²값에 의한 전달이 되고, 객체를 가리키는 변수를 다른 변수에 할당하면 ⁴참조에 의한 전달이 된다.
📌 ¹JS의 원시값 관리방식 - 실제 값 저장
//값의 복사
var score = 80;
score = 90;
원시 값이 변경 불가능한 값이기 때문에(이러한 특성을 불변성) 새로운 메모리 공간을 확보하여 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경하게 된다. 그 이유는 예기치 않게 변수 값이 변경됐을 때 상태 변경을 추적하기 어렵기 때문이다.
📌 ²JS의 원시값 관리방식 - 값에 의한 전달
var score = 80;
var copy = score;
값에 의한 전달도 사실은 값을 전달하는 것이 아니라 메모리 주소를 전달한다는 것이다.
📌 ³JS의 객체 관리방식 - 참조 값 저장
// 프로퍼티 값 변경
person.name = "Kim";
person.address = "Seoul";
JS에서의 객체는 프로퍼티의 개수가 정해져 있지 않아 동적으로 추가되고 삭제될 수 있다.
이처럼 변경이 가능하기 때문에 원시 값처럼 객체를 변경할 때마다 원시 값처럼 이전 값을 복사해서 새로 생성한다면 성능이 나빠질 것이다.
📌 ⁴JS의 객체 관리방식 - 참조에 의한 전달
var person = {
name: "Lee",
};
//참조 값을 복사(얕은 복사)
var copy = person;
그림으로 보면 알 수 있듯이 “값에 의한 전달”과 “참조에 의한 전달”은 결국 식별자가 기억하는 메모리 공간(변수)에 저장되어 있는 값이 원시 값이냐 참조 값이냐의 차이만 있을 뿐이다. 따라서 JS에서는 “참조에 의한 전달”은 존재하지 않고 “값에 의한 전달”만 있다고 말할 수도 있겠다.
📌 얕은복사와 깊은복사
객체를 프로퍼티 값으로 갖는 객체의 경우, 얕은 복사는 한 단계까지만 복사하는 것을 말하고, 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.
const o = { x: { y: 1 } };
// 얕은 복사
const c0 = o;
console.log(c0 === o); // true
console.log(c0.x === o.x); // true
// 얕은 복사2 (조금 더 깊은)
const c1 = { ...o };
console.log(c1 === o); // false
console.log(c1.x === o.x); // true
// lodash의 cloneDeep을 사용한 깊은 복사
const _ = require("lodash");
const c2 = _.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x); // false
o.x.y = 2; // 값 변경
console.log(c0.x.y === o.x.y); // true
console.log(c1.x.y === o.x.y); // true
console.log(c2.x.y === o.x.y); // false
c1과 같은 얕은 복사로 생성된 객체는 원본과는 다른 객체이다. 즉, 원본과 복사본은 참조 값이 다른 별개의 객체이다. 이것은 c2와 같은 깊은 복사도 마찬가지이다. 하지만 중첩되어 있는 것을 복사하지 않고 가장 상위의 있는 것만 복사가 된다. 따라서 중첩된 객체들은 원본 객체들과 같은 메모리 공간의 주소 값을 참조한다.
c2와 같은 깊은 복사는 데이터를 참조하는 것이 아닌 객체의 값 그대로 복사함으로서 한 객체가 변경되어도 다른 객체의 데이터에는 영향이 없게 된다.
📌 객체 관리방식 언어별 차이점
자바스크립트 객체는 프로퍼티 키를 인덱스로 사용하는 해시 테이블과 유사하게(정확하게 같지는 않음) 구현되어 있다.
자바나 CPP같은 클래스 기반 객체지향 언어에서는 객체를 생성하기 이전에 클래스에 프로퍼티와 메서드가 정해져 있고, 객체가 생성된 이후에 프로퍼티를 추가할 수 없기 때문에 성능 면에서 이론적으로 JS가 객체의 생성과 프로퍼티 접근에 비용이 더 많이 드는 비효율적인 방식이다.
따라서 V8 JS엔진에서는 동적 탐색대신 히든 클래스를 사용해서 성능을 보장한다.