원시값과 객체

자바스크립트가 제공하는 데이터 타입은 크게 원시타입 (primitive type)과 객체타입 (object/reference type)으로 구분할 수 있다. 원시타입과 객체타입은 근본적으로 3가지의 측면에서 차이점이 있다.

 

1. 원시값은 변경 불가능한 값 (immutable value) 이다. 이에 비해 객체는 변경 가능한 값 (mutable value) 이다.
2. 원시값을 변수에 할당하면 메모리공간에 실제 값이 저장된다. 객체는 메모리공간에 참조값 (주소)이 저장된다.
3. 원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. (pass by value) 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다 (pass by reference)

 

---

 

원시값

한번 생성된 원시값은 읽기 전용 값으로서 변경할 수 없다. 값을 변경할 수 없다는 것이 정확히 어떤 의미일까?

먼저 변수와 값은 구분해야 한다. 변수란? 하나의 값을 저장하기 위한 메모리 공간을 식별하기 위해 붙인 이름이다. 값이란? 변수에 저장된 데이터이다. 즉 변경 불가능하다는 것은 변수가 아니라 값에 대한 의미이다. 이 글만 봤을 땐 아직도 정확하게 와닿지가 않는다. 원시값 변경 불가능하다 라는 것은 원시 값 자체를 변경 못한다는 것이지 변수 값을 변경할 수 없다는 뜻이 아니다. 변수는 언제든지 재할당을 통해 변수 값을 교체할 수 있다. 그렇기 때문에 변수라고 부른다.

 

변수와 상대되는 개념으로 상수가 있는데 상수는 재할당이 금지된 변수를 의미한다. 상수도 값을 저장하기 위해 메모리 공간이 필요하므로 변수라고 할 수 있다.

 

const obj = {}; // const로 선언한 변수는 재할당이 금지된 변수이다.

// const로 선언한 변수에 할당한 원시 값(상수)는 변경할 수 없다.
// 하지만 const로 선언한 변수에 할당한 객체는 변경할 수 있다.
o.name = 'kpl';
console.log(obj); // {name : 'kpl'}

 

원시값을 할당한 변수에 새로운 원시값을 재할당 하면 메모리 공간에 저장되어 있는 재할당 이전의 원시값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당 한다. 값을 저장한 후 변수는 새롭게 재할당한 원시 값을 가리킨다.

 

// point가 원시값 일 경우
let point; // 변수선언 -> point 변수의 주소 : 0x000000F2, 값 : undefined
point = 100; // 값의할당 -> point 변수의 주소 : 0x00001332, 값 : 100
point = 50; // 값의재할당 -> point 변수의 주소 : 0x0069F913, 값 : 50

/*
변수가 참조하던 메모리 공간의 주소가 변경된 이유는 변수에 할당된 원시값이 변경 불가능한 값이기 때문이다.
*/

 

---

문자열

자바스크립트의 문자열은 원시값이다. 하지만 독특한 특징이 있는데, 0개 이상의 문자로 이뤄진 집합이다.

이것은 문자열이 생성된 이후에는 변경할 수 없음을 의미한다.

 

let string = "Hello"; // 저장된 메모리 공간의 첫번째 메모리 셀 주소를 가리킨다.
string = "world"; // 이전에 저장된 Hello를 수정하는 것이 아니라 새로운 문자열 world을 메모리에 생성하고 string은 이것을 가리킨다.

string[0] = "h";  // 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다.

 

즉 Hello와 world은 모두 메모리에 존재하고 변수 string은 문자열 Hello를 가리키고 있다가 world를 가리키도록 변경되었을 뿐이다.

 

---

 

값에 의한 전달

let score = 100;
let copy = score;

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

score = 200;

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

 

그렇다면 변수에 변수를 넣었을 때 무엇이 어떻게 전달될까? copy = score에서 score는 변수값 100으로 평가되므로 copy 변수에도 100이 할당될 것이다. 이때 새로운 숫자 값 100이 생성되어 copy 변수에 할당된다. 이처럼 변수에 원시값을 갖는 변수를 할당하면 할당받는 변수(copy) 에는 할당되는 변수(score)의 원시 값이 복사되어 전달된다. 

 

---

 

객체

객체 타입의 값, 즉 객체는 변경 가능한 값이다. 

원시값을 할당한 변수는 원시값 자체를 값으로 갖는다. 하지만 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조값에 접근할 수 있다. 참조값은 생성된 객체가 저장된 메모리 공간의 주소 그 자체이다.

 

let person = {
	name : "Kang"
}

// 프로퍼티 값 갱신 및 동적 생성
person.name = "Pureum";
person.address = "Dongtan";

	0x00000000
person	0x000000F2	0x00001332
	0x00001332	{     name : "Pureum",     address : "Dongtan" }
	0xFFFFFFFF

위와 같이 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조값을 통해 실제 객체에 접근한다. 

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 경신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.

 

---

 

얕은복사와 깊은복사

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말한다. (원본객체를 하나라도 참조하고있음) 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 말한다. (원본객체와의 참조가 완전히 끊어짐). 이렇게만 말하면 와닿지 않으니 소스코드를 확인해는게 좋을것 같다.

 

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

// 얕은 복사
const c1 = { ...obj };
console.log(c1 === obj); // false
console.log(c1.x === o.x); // true

// lodash의 cloneDeep을 사용한 깊은 복사
// "npm install lodash"로 설치 후 Node.js 환경에서 실행해야 한다.
const _ = require('lodash');

// 깊은 복사
const c2 = _.cloneDeep(obj);
console.log(c1 === obj); // false
console.log(c1.x === o.x); // false


const v = 1;
const v1 = v; // 깊은복사
console.log(v === v1); // true

const o = { x: 1 };
const o1 = o; // 얕은 복사
console.log(o === o1); // true

 

얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다. 하지만 얕은 복사는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사하고, 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 값 처럼 완전한 복사본을 만든다는 차이가 있다.