[모던 자바스크립트 Deep Dive] 11장 원시 값과 객체의 비교, 얇은 복사 깊은 복사

자비스크립트가 제공하는 7가지 데이터 타입 (숫자, 문자열, 불리언, Null, undfined, 심벌, 객체 타입)은 크게 원시 타입과 객체타입으로 구분할 수 있습니다. 

 

- 원시 타입의 값은 변경 불가능한 값입니다. 객체 타입의 값은 변경 가능한 값입니다. 

- 원시 값을 변수 할당 시 변수(확보된 메모리 공간)에는 실제 값이 저장됩니다. 객체 변수 할당 시 변수(확보된 메모리 공간)에는 참조 값이 저장됩니다. 

- 원시 값 변수를 다른 변수에 할당 시 값에 의한 전달 (pass by value)라고 하고, 객체를 가리키는 변수를 다른 변수에 할당하면 참조에 의한 전달 (pass by reference)라고 합니다. 

 

11.1 원시 값

---

11.1.1 변경 불가능한 값

const o = {}; // const 키워드를 사용해 선언한 변수는 재할당이 금지된다. 상수는 재할당이 금지된 변수일 뿐이다. 


// const 키워드를 사용해 선언한 변수에 할당한 원시 값은 변경할 수 없음
// const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있음 
o.a = 1;
console.log(o); // {a: 1}

불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없습니다.

 

11.1.2 문자열과 불변성

자바스크립트의 문자열은 원시타입이며, 변경 불가능합니다. 

다만, 문자열은 유사 배열 객체이면서 이터러블이므로 배열과 유사하게 문자에 접근할 수 있습니다. 

var str = "string";

console.log(str[0]); // s
console.log(str.length); // 6
console.log(str.toUpperCase()); // STRING

 

11.1.3 값에 의한 전달 

var score = 80;

var copy = score;

console.log(score, copy);
console.log(score === copy);

score = 100;

console.log(score, copy);
console.log(score == copy);


// 80 80
// true
// 100 80
// false

score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값입니다 . 사실 엄격하게 말하면 변수에 값이 전달되는 게 아니라 메모리 주소가 전달되는 것입니다. 두 변수의 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없습니다. 

 

11.2 객체

---

11.2.1 변경 가능한 값

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값입니다.

// 할당이 이뤄지는 시점에 객체 리터럴이 해석되고, 그 결과 객체가 생성됩니다 .
var person = {
	name: 'Lee'
}

// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근합니다. 
console.log(person) // { name: "Lee"}

원시 값은 변경 불가능한 값이므로 재할당 외는 방법이 없지만 객체는 변경 가능한 값입니다. 

 

얕은 복사(shallow copy)와 깊은 복사(deep copy)

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

 

얇은 복사와 깊은 복사로 생성된 객체는 원본과 다른 객체이므로 참조 값이 별개의 객체입니다. 참고로 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 깊은 복사, 객체를 할당한 변수를 다른 변수에 할당하는 것을 얕은 복사라고 부르는 경우도 있습니다. 

const v = 1;

// "깊은 복사" 라고 부르기도 한다.
const c1 = v;
console.log(c1 === v); // true

const o = { x: 1 };

const c2 = o;
console.log(c2 === o); // true

 

 

11.2.2 참조에 의한 전달

var person = {
  name: 'Lee'
}

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

원본의 참조 값이 복사되어 전달되었으므로 참조에 의한 전달이라고 합니다. 2개의 식별자가 하나의 객체를 공유하고 있기 때문에 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 영향을 주고 받습니다.

 

var person = {
  name: "Lee",
};

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

// 동일한 객체를 참조한다
console.log(copy === person);

// 변경
copy.name = "Kim";
person.address = "Seoul";

// copy와 person은 동일한 객체를 가리킨다
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고 받음
console.log(person);
console.log(copy);

값에 의한 전달, 참조에 의한 전달은 결국 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사 전달한다는 면에서 동일합니다. 

 

퀴즈

var person = {
  name: "Lee",
};

var person2 = {
  name: "Lee",
};

console.log(person === person2); // false
console.log(person.name === person2.name); // true

person, person2 변수가 가리키는 객체는 내용은 같지만 다른 메모리에서 저장된 별개의 객체입니다. 따라서 false, 하지만 프로퍼티 값을 참조하는 name은 값으로 평가될 수 있는 표현식이므로 true 입니다. 

 

 

---

Reference: 모던 자바스크립트 Deep Dive