💡 자바스크립트 데이터 타입
1. 숫자
2. 문자열
3. 불리언
4. null
5. undefined
6. 심벌
7. 객체

원시값과 객체

차이

1. 원시값은 변경 불가능한 값 (immutable) , 객체는 변경 가능한 값 (mutable)
2. 변수에 값 할당 시 원시값은 실제 값이 저장, 객체는 참조값이 저장
3. 원시 값은 값에 의한 전달 방식, 객체는 참조의 의한 전달 방식

위 자바스크립트 데이터 타입 중 7. 객체 를 제외한 데이터 타입은 모두 원시값이다.

1. 변수

이번 주제 대해 이해하기 위해 변수 개념에 대해 알 필요가 있다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다.

2. 원시 값 (변경 불가능한 값)

2-1. 변수가 원시 값을 저장하는 방법

원시 값을 할당한 변수에 새로운 원시 값을 재할당 시, 이전의 값을 변경하는 것이 아니라 새로운 메모리에 값을 저장하고 변수가 그 값을 가리키게 한다.

이 때 변수가 참조하는 메모리 주소가 변경되는 이유는 변수에 할당된 값이 변경 불가능하기 때문이다. 만약 값이 변경 가능하다면 변수가 가리키는 메모리 주소는 유지되며 원시 값 자체가 변경되면 그만이다.

이러한 특성을 불변성이라 한다. 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다. (데이터 신뢰성을 보장)

2-2. 원시 값: 변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?

var score = 80;
var copy = score;

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

변수에 원시값을 갖는 변수를 할당하면 할당받는 copy 변수 에는 할당되는 score 변수의 원시 값이 복사되어 전달된다. (값에 의한 전달).
이때, score 변수와 copy변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다.

score = 100;

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

두 변수의 원시 값은 각각 다른 메모리에 저장되어 있어 어느 한쪽에서 재할당을 통해 값을 변경해도 서로 간섭할 수 없다.

3. 객체 (변경 가능한 값)

3-1. 변수가 객체를 저장하는 방법

var person = {
	name: "Lee"
}

객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있다. 이 값을 참조 값이라고 하고 변수는 이 값을 통해 객체에 접근할 수 있다.

원시 값은 원시값을 갖는 변수 값을 변경하려면 재할당 외에 방법은 없다.

하지만 객체는 변경 가능한 값이 때문에 재할당 없이 객체를 직접 변경할 수 있다. 이때, 객체를 할당한 변수에 재할당을 하지 않았으므로 객체를 할당한 변수의 참조값은 변경되지 않는다.

var person = {
	name: 'Lee'
}

person.name = 'kim';

console.log(person); // { name: "Kim" }

3-2. 객체: 변수에 변수를 할당했을 때 무엇이 어떻게 전달되는가?

var person = {
	name: 'Lee'
}

// 참조 값 복사
var copy = person;

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

💡 부작용: 객체는 원시값과 다르게 여러개의 식별자가 하나의 객체를 공유할 수 있다

위 그림처럼 원본 person 을 사본 copy 에 할당하면 원본의 참조 값을 복사해서 사본에 저장한다. 이때, 원본과 사본은 동일한 참조값을 갖는다. 즉, 원본과 사본 모두 동일한 객체를 가리킨다. 이것은 하나의 객체를 공유하며 어느 하나에서 객체를 변경하면 다른 변수에도 영향을 미친다.

이처럼 객체는 변경이 가능하기 때문에 데이터 신뢰성 보장이 어렵다. 따라서 변경 가능한 데이터가 불변성을 유지하기 위한 방법으로 카피 온 라이트가 있다.

결론

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

더하여

Q : const 는 상수를 의미하는 데 왜 값이 변경되나요?

const o = {};
var score;
o.a = 1;
console.log(o); // { a: 1 }

위 코드를 보고 위와 같은 질문을 할 수도 있다. 이것은 const 키워드와 변경 가능한 값의 의미에 대해 오해할 때 생기는 질문이다.

A: const 는 재할당이 금지된 변수(상수)를 나타내는 키워드일 뿐이다. 위 코드에서 상수 o 을 재할당하지는 않았다.
{} 의 데이터 타입은 객체이므로 변경 가능한 값이다.
변경 불가능한 값과 변경 가능한 값이라는 말은 값 자체를 변경할 있나 없나의 차이지 변수 값을 변경할 수 있거나 없다는 것이 아니다.

참고

• 모던 자바스크립트 Deep Dive