📌 11장 원시 값과 객체의 비교

자바스크립트에서 제공하는 데이터타입은 원시타입과 객체 타입이 있다. 두 타입의 차이점은 크게 다음 세 가지가 있다.

• 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이고 객체(참조)타입의 값. 즉 객체는 변경 가능한 값이다.
• 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라고 한다.
  
  

11.1 원시 값

11.1.1 변경 불가능한 값

원시 값은 변경 불가능한 값이다.

변수는 언제든지 재할당을 통해 변수 값을 변경(엄밀히 말하자면 교체)할 수 있다. 그렇기 때문에 변수라고 부른다. 상수는 재할당이 금지된 변수일 뿐이다.

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

11.1.2 문자열과 불변성

자바스크리브는 원시 타입의 문자열을 제공한다. 문자열은 유사 배열 객체로서 배열과 유사하게 각 문자에 접근할 수 있으나 변경 불가능한 값이기 때문에 일부 문자를 변경해도 반영되지 않는다. 원시 타입인 문자열은 읽기 전용이기 때문이다.

  var str = 'string';

  // 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
  // 하지만 문자열은 원시값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
  str[0] = 'S';

  console.log(str); // string

11.1.3 값에 의한 전달

변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달한다. 이를 값에 의한 전달이라 한다. 엄격하게 표현하면 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문이다. 이는 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.

이처럼 “값에 의한 전달”도 사실은 값을 전달하는 것이 아니라 메모리 주소를 전달한다. 단 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.

메모리 주소를 전달하게 되면 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

11.2 객체

객체는 원시 값과 같이 확보해야할 메모리 공간의 크기를 사전에 정해 둘 수 없고 복합적인 자료구조이다. 따라서 객체는 원시 값과는 다른 방식으로 동작하도록 설계되어 있다.

11.2.1 변경 가능한 값

원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당 외에는 방법이 없다. 하지만 객체는 변경 가능한 값이다. 따라서 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도있다.

객체는 메모리를 복사해서 생성하게 되면 메모리의 효율이 많이 떨어지기 때문에 객체는 변경 가능한 값으로 설계되어 있다. 이러한 구조에는 부작용이 존재하는데 그것은 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다.

🧐 얕은복사와 깊은복사

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

// 얕은 복사
const c1 = { ...o }; // 35장 "스프레드 문법" 참고
console.log(c1 === o); // false
console.log(c1.x === o.x); // true

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

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;

위의 코드에서 person과 copy 모두 동일한 객체를 가리키는데 이는 두 개의 식별자가 하나의 객체를 공유한다는것을 의미한다.