11장 원시 값과 객체의 비교

* 해당 글은 모던 자바스크립트 Deep Dive를 공부하며 정리한 글입니다. *

 

원시 타입 (primitive type)

- 변경 불가능한 값

- 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨

- 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달됨 (=값에 의한 전달)

 

객체 타입 (object/reference type)

- 참조 타입이라고도 한다

- 변경 가능한 값

- 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨

- 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달됨 (=참조에 의한 전달)

 

원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 값을 변경하기 위해서는 재할당을 해야 하는데, 재할당 시에는 변수가 참조하던 메모리 공간의 주소가 변경된다. 이러한 특성을 불변성이라고 한다.

 

 

문자열의 특성

원시 값을 저장하려면 먼저 확보해야 하는 메모리 공간의 크기를 결정해야 한다. 원시 값인 문자열은 다른 값들과 다른 특징이 있는데, 문자 1개당 2바이트의 메모리 공간이 사용된다. 반면, 숫자는 1이던, 10000이던 동일한 8바이트가 적용된다.

 

유사 배열 객체 (array-like-object)

- 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.

- 여기서 문자열은 배열처럼 인덱스로 접근할 수 있는 유사 배열 객체며, for문으로 순회가 가능하다.

let str = 'Hello';

console.log(str); // Hello
console.log(str[0]); // H

// H, e, ... , o 이렇게 콘솔창에 찍힘
for(let i=0; i<str.length; i++) {
	console.log(str[i]);
}

- 문자열은 유사 배열 이므로 인덱스로 접근 가능하지만, 원시 값이므로 값을 변경할 수 없다.

따로 에러가 나지 않기 때문에 유의해야 하는 사항이다.

let str = 'String';
str[0] = 's';
console.log(str[0]); // S

크롬 콘솔창에서 테스트 해 본 결과

 

간단한 퀴즈 1

맨 마지막에 copy를 콘솔창에 찍었을 때 어떤 값이 나올까?

let score = 70;
let copy = score;

console.log(score); // 70
console.log(copy); // 70

score = 100;

console.log(score); // 100
console.log(copy); // ?

 

객체

- 객체는 원시 값처럼 사전에 메모리 공간의 크기를 정해둘 수 없다.

- 자바스크립트는 클래스 없이 객체를 생성할 수 있고, 객체가 생성된 이후라도 동적으로 프로퍼티와 메서드를 추가할 수 있다.

- 그래서 V8 자바스크립트 엔진에서는 프로퍼티에 접근하기 위해서 동적 탐색대신 히든 클래스라는 방식을 사용한다.

- 히든 클래스는 자바와 같이 고정된 객체 레이아웃(클래스)과 유사하게 동작한다.

 

객체(참조) 타입의 값은 변경 가능한 값이다.

let person = {
	name: 'JungAh'
}

객체를 할당한 변수에는 실제로 저장된 메모리 공간의 주소가 저장되어 있다. 이 값을 참조 값이라고 한다.

원시 값은 변경 불가능한 값이어서 값을 변경하려면 재할당 밖에 방법이 없지만, 객체는 재할당 없이 프로퍼티를 동적으로 추가하거나 삭제할 수 있다.

객체는 여러 개의 식별자가 하나의 객체를 공유한다는 점이 단점이다.

 

얕은 복사와 깊은 복사

객체를 프로퍼티 값으로 갖는 객체의 경우에서 얕은 복사는 한 단계까지만 복사하는 것을 말하고, 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다.

const o = { x: { y: 1 } };

// 얕은 복사
const c1 = { ...o };

// 깊은 복사, lodash의 cloneDeep을 이용
const c2 = _.clonDeep(o);

 

참고로, 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고도 한다.

 

간단한 퀴즈 2

순서대로 어떤 boolean 값이 나올까?

let person1 = {
 name: 'jungah'
}

let person2 = {
 name: 'jungah'
}

console.log(person1 === person2); // ?
console.log(person1.name === person2.name); // ??