[모던 자바스크립트 딥다이브] 11장 원시 값과 객체의 비교

제목에서 보듯이 원시 타입과 객체 타입으로 구분 하는 이유가 무엇일까요,,?
원시 타입과 객체 타입은 근본적으로 다르다는 의미일 것입니다.

원시 타입의 값은 변경 불가능한 값(immutable value)입니다.
객체 타입은 변경 가능한 값(mutable value)입니다.
원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됩니다.
객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됩니다.

원시 값

원시 값은 변경 불가능한 값입니다. 다시 말해 한번 생성된 원시 값은 읽기 전용 값으로 변경할 수 없습니다. 변수는 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이고, 값은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과를 말합니다.
변경 불가능하다는 것은 변수가 아니라 값에 대한 진술입니다.

상수는 재할당이 금지된 변수를 말합니다. 상수도 값을 저장하기 위한 메모리 공간 이 필요하므로 변수라고 할 수 있습니다. 변수는 언제든 재할당을 통해 변수 값을 교체 할 수 있지만, 상수는 단 한번만 할당이 허용되므로 변수 값을 교체 할 수 없습니다. 상수는 재할당이 금지된 변수일 뿐입니다.

// const키워드로 선언한 변수는 재할당이 금지됩니다.
const o = {};

// const로 선언한 변수에 할당한 객체는 변경할 수 있습니다.
o.a = 1;
console.log(o) // { a:1 }

원시 값은 변경 불가능한 값입니다. 원시 값은 어떤 일이 있어도 불변합니다. 이러한 특성은 데이터의 신뢰성을 보장합니다.

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

유사 배열 객체란 마치 배열처럼 인덱스로 접근이 가능하고, length 프로퍼티를 갖는 객체를 말합니다.

var str = 'string';

// 문자열은 유사 배열이므로 인덱스를 각 문자에 접근할 수 있습니다.
console.log(str[0]); // s

// 문자열은 원시 값이므로 변경할 수 없습니다. 이때 에러가 발생하지 않습니다.
str[0] = 'S';
console.log(str); // string

값에 의한 전달

var score = 80;
var copy = score;

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

console.log(score === copy); // true

copy = 100; // copy에 100을 재할당합니다.

console.log(score); // 80
console.log(copy); // 100 서로 다른 메모리공간에 저장되기 때문에, score 변수의 값에는 어떠한 영향도 주지 않습니다.

변수 score에 80을 할당했습니다. copy변수에 score변수를 할당했습니다. 그 이후 copy변수에 100을 재할당하면 score값은 어떻게 될까요?

위 예제의 경우 copy 변수에 원시 값을 갖는 score변수를 할당하면 할당받는 변수 copy에는 할당되는 변수(score)의 원시 값 80이 복사되어 전달됩니다.

여기서 중요한 점은 서로 다른 메모리 공간에 저장된 별개의 값입니다.

객체, 변경 가능한 값

객체는 프로퍼티의 개수가 정해져 있지 않고, 동적으로 추가되고 삭제할 수 있습니다. 프로퍼티도 제약이 없으며 객체는 원시값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없습니다.

변경 가능한 값,
객체 타입의 값, 즉 객체는 변경 가능한 값입니다. 변수에 객체를 할당하면 우선 메모리 공간을 확보하고 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근 할 수 있습니다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소입니다.

var person = {
	name : 'son',
};

객체도 변경할 때마다 원시 값처럼 이전 값을 복사해서 새롭게 생성한다면 명확하고 신뢰성이 확보되겠지만 객체는 크기가 매우 클 수도 있고, 원시 값처럼 크기가 일정하지도 않으며, 프로퍼티 값이 객체일 수도 있어서 복사해서 생성하는 비용이 많이 들고 메모리의 효율적 소비가 어렵고 성능이 나빠집니다.
성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어 있습니다.
이러한 구조적 단점에 따른 부작용이 있습니다. 원시 값과는 다르게 여러개의 식별자가 하나의 객체를 공유할 수 있다는 점입니다.

얕은 복사와 깊은 복사

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

const c1 = {
	x: 1,
  	y: { a : 1 }, 
};

// 얕은 복사
const copy = { ...c1 }; // 스프레드 문법 1단계 까지는 완전한 복사가 됩니다.

console.log(c1 === copy); // false 다른 메모리 주소를 참조하기 때문에

copy.x = 2; // copy { x : 2 y : { a : 1 }}

console.log(c1.x === copy.x) // false 1, 2

copy.y.a = 2 // copy { x : 2 y : { a : 2 }}
console.log(c1.y.a === copy.y.a) // true 
// 얕은 복사는 1단계 까지만 복사가 되고 2단계 부터는 깊은 복사가 되지 않기 때문에
// copy.y.a 값을 변경하면 c1.y.a값도 같이 변경됩니다.


// lodash의 cloneDeep을 사용한 깊은 복사
// npm install lodash로 lodash를 설치한 후, Node.js 환경에서 실행합니다.
const o = { x: { y: 1 } };
const _ = require('lodash');
// 깊은 복사
const c2 = _.cloneDeep(o);
console.log(c2 === o); // false
console.log(c2.x === o.x) // false

참조에 의한 전달

var person = {
	name : 'Son'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

객체를 가리키는 변수(person)를 다른 변수(copy)에 할당하면 원본의 참조값이 복사되어 전달됩니다. 이를 참조에 의한 전달이라 합니다.

위 그림에서 처럼 person을 copy에 할당하면 원본 person의 참조 값을 복사해서 copy에 저장합니다. 이때 원본person과 사본copy는 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖습니다. person과 copy는 동일한 객체를 가리킵니다. 이것은 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미합니다.원본과 사본 어느 한 곳에서 값을 변경하면 서로에게 영향을 주고 받습니다.

var person = {
	name: 'Son'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

// person과 copy는 동일한 객체를 참조합니다.
console.log(person === copy); // true

// copy를 통해 객체를 변경합니다.
copy.name = 'Kim';

// person을 통해 객체를 변경합니다.
person.age = '30';

// copy와 person은 동일한 객체를 가르킵니다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로에게 영향을 줍니다.
console.log(person); // {name: 'Kim', age: 30}
console.log(copy); // {name: 'Kim', age: 30}

결국 값에 의한 전달과 참조에 의한 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 동일합니다. 식별자가 기억하는 메모리 공간, 즉 변수에 저장되어 있는 값이 원시값이냐, 참조 값이냐의 차이만 있을 뿐입니다. 자바스크립트에는 참조에 의한 전달은 존재하지 않고 값에 의한 전달만이 존재한다고 말할 수 있습니다.

자바스크립트의 이 같은 동작 방식을 설명하는 정확한 용어가 존재하지 않습니다. 그래서 공유에 의한 전달이라고 하는 경우도 있습니다. 이 용어 또한 ECMAScript 사양에 정의된 자바스크립트의 공식적인 용어가 아니며 자바스크립트의 동작 방식을 정확히 설명하지 못합니다.

var person1 = {
	name: 'Lee'
};

var person2 = {
	name: 'Lee'
};

console.log(person1 === person2); // 1
console.log(person1.name === person2.name); // 2

1번의 답은 false입니다. 이유는 서로 다른 참조 값을 가르키고 있기 때문에 false입니다.
2번의 답은 true입니다. 이유는 서로 다른 참조 값을 가르키고 있지만, person1.name은 'Lee'이고, person2.name도 'Lee'이기 때문에 두 표현식 모두 원시 값 'Lee'로 평가됩니다. 그래서 true입니다.