모던 자바스크립트 Deep Dive 스터디

11. 원시 값과 객체의 비교

자바스크립트의 데이터 타입은 원시 타입과 객체 타입으로 구분할 수 있다.

• 원시 값은 변경 불가능한 값이다. 반면 객체는 변경 가능한 값이다.
• 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 반면 객체를 변수에 할당하면 참조 값이 저장된다.
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. 반면 객체를 가리키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달된다.

11.1 원시 값

11.1.1 변경 불가능한 값

💡 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

변수와 값은 구분하여 생각해야 한다.
변수는 값을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.
따라서 변수는 언제든지 재할당을 통해 메모리 공간의 주소를 변경할 수 있다.
변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.

위의 내용에 따라, 상수와 변경 불가능한 값은 동일하지 않다.
상수는 재할당이 불가능한 변수일 뿐이기 때문이다.

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

만약 원시 값이 변경 가능한 값이었다면 재할당에서 변수가 가리키던 메모리 주소를 변경하는 것이 아니라 메모리 공간에 있던 원시 값 자체를 변경하면 그만이다.
하지만 원시 값은 변경 불가능한 값이기에 직접 변경할 수 없고, 결국 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경하게 된다.
불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

11.1.2 문자열과 불변성

자바스크립트는 다른 언어와 다르게, 문자열 타입을 제공한다.

원시 값을 저장하려면 타입에 따라 메모리 공간을 다르게 확보해야한다.
다만, 숫자가 1이나 1000000이나 동일하게 8바이트가 필요한 것과 달리, 문자열은 길이가 길어질 수록 필요한 메모리 공간도 커진다.

문자열 역시 불변성을 지닌다.
따라서 문자열의 일부분을 변경하는 행위는 반영되지 않는다.

const str = 'string';
str[0] = 'S';

console.log(str) // 'string'

11.1.3 값에 의한 전달

💡 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수 쪽에는 할당되는 변수의 원시 값이 복사되어 전달된다.

let num = 10;
let copy = num; // 새로운 숫자 값 10이 생성되어 copy에 할당.

num = 100 // copy 변수의 값에는 어떠한 영향도 주지 않는다.
console.log(copy) // 10

변수에 저장되는 것은 값이 아니라 메모리 주소다.
copy에 num을 할당했으나, 둘은 다른 메모리 주소를 기억하고 있다.

11.2 객체

💡 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해둘 수 없다.

11.2.1 변경 가능한 값

💡 객체는 변경 가능한 값이다.

const obj = {
  firstName: 'Sangjo'
}

위와 같이 변수에 객체를 할당하면, 변수는 객체가 실제로 저장된 메모리 공간의 주소를 저장한다.
이를 obj 변수는 객체 { firstName: 'Sangjo' }를 가리키고(참조하고) 있다고 표현한다.

객체는 변경 가능한 값이라서 원시 값과 달리 재할당 없이 객체를 직접 변경할 수 있다.
재할당 없이 프로퍼티 키를 동적으로 생성할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다.

이렇게 동작하는 이유는 메모리를 효율적으로 사용하기 위함이다.
객체를 변경할 때마다 원시 값처럼 새롭게 생성한다면 데이터 신뢰성은 확보될지언정 복사해서 생성하는 비용이 많이 든다.
객체를 복사하지 않고 변경 가능한 값으로 설계하여 메모리 사용의 효율성을 확보했다.
단, 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 단점이 있다.

11.2.2 참조에 의한 전달

여러 개의 식별자가 하나의 객체를 공유하는 경우를 생각해보자.
원본 obj 변수를 copy 변수에 할당할 경우, 원본의 참조 값이 복사되어 전달된다.(같은 메모리 공간의 주소를 가진다.)
이 경우, 한쪽에서 객체를 변경할 경우 다른 한쪽도 영향을 받게 된다.

이를 참조에 의한 전달이라 한다.
하지만, 결국 값에 의한 전달과 동일하게 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달하고 있다.
그게 원시 값이냐, 참조 값이냐의 차이만 있을 뿐이다.
따라서 자바스크립트에는 값에 의한 전달만이 존재한다고 할 수 있다.