[JavaScript] 원시 값과 객체

// 1
var score = 80;
var copy = score;

score = 100;

console.log(copy); // 1-1

// 2
var person1 = {
	name: 'Lee'
};

var person2 = {
	name: 'Lee'
};

console.log(person1 === person2); // 2-1
console.log(person1.name === person2.name); // 2-2

// 3
var person = {
	name: 'Lee'
};

var copy = person;

copy.name = 'Kim';

console.log(person.name); // 3-1

위의 예시에서 각각의 결과는 어떻게 될까?

 

1-1의 결과는 경험상 80이 나올 것 같고 2-1과 2-2는 true가 나올 것 같다.

 

이를 이해하기 위해 JS의 원시 값과 객체에 대해 알아야 한다.

---

1️⃣ 원시 값

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

 

따라서 한번 생성된 원시 값은 읽기 전용이므로 변경할 수 없다.

 

이는 원시 값 자체를 변경할 수 없다는 뜻이다.

 

주의해야 하는 것은 변수 값을 변경할 수 없다는 것이 아니라는 것이다.

 

변수는 언제든지 재할당을 통해 변수 값을 변경(교체) 할 수 있다.

 

상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다.

 

하지만 상수는 단 한 번만 할당이 허용되므로 변수 값을 변경(교체)할 수 없다

 

따라서, 상수 ≠ 변경 불가능한 값 (상수는 재할당이 금지된 변수일 뿐)이라는 점을 명심해야 한다.

 

그렇다면 "변경 불가능하다"는 것의 의미는 무엇일까?

 

원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 값을 변경하는 것이 아니라 새로운 값은 새로운 주소에 저장하고 변수는 새로운 값을 가리키게 된다는 것이다.

 

var score; // score는 현재 undefined: 메모리 주소1
score = 80; // 메모리 주소2에 80이 저장되고 score는 메모리 주소2를 가리킴
score = 100; // 메모리 주소3에 100이 저장되고 score는 메모리 주소3을 가리킴

// 결과적으로 메모리 주소 1, 2, 3에는 undefined, 80, 100이 저장된다
// 어떤 원시값(undefined, 80, 100)도 변하지 않았다

위의 예시에서 어떠한 원시 값도 변경되지 않았다.

 

왜냐하면 원시 값은 변경 불가능하기 때문이다.

 

따라서 변수의 재할당이 일어날 때, 기존 원시 값을 수정하는 것이 아니라 변수가 가리키는 메모리 주소를 변경하는 것이다.

 

각각의 원시 값은 각자의 메모리 주소에 여전히 존재하게 된다.

 

이와 같이 값을 재할당할 때 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경하는 것은 불변성이라 한다.

 

문자열과 불변성

JS의 원시 타입은 문자열 타입을 제공한다.

 

JS의 문자열은 원시 타입이며 변경이 불가능하다.

 

따라서, 문자열이 생성된 이후에는 값을 변경할 수 없다.

 

var str = 'string';
str[0] = 'S';
console.log(str); // string

위의 예시에서 str는 string이라는 원시 값(문자열 타입)이 저장되어 있는 메모리 주소를 가리킨다.

 

str[0] = 'S'를 통해 string이라는 원시 값의 변경을 시도했지만 원시 값은 변경할 수 없기 때문에 변경되지 않는다.

 

따라서, str은 수정되지 않고 그대로 string으로 출력된다.

 

값에 의한 전달

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

 

이것을 값에 의한 전달이라 한다.

 

var score = 80;
var copy = score;

score = 100;

console.log(copy);

따라서 위의 코드에서 결과는 80이 된다.

 

변수에 변수를 할당하면 같은 숫자 값 80을 갖지만 이것은 다른 메모리 공간에 저장된 별개의 값이다.

 

score의 값을 변경해도 copy의 값에는 어떠한 영향도 주지 않는다.

 

엄격히 말하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다.

 

변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있다가 이를 통해 메모리 공간에 저장된 값에 접근할 수 있다.

 

var score = 80;
var copy = score;

위의 코드에서는 두 가지 평가 방식이 가능하다.

1. 새로운 80을 생성하여 메모리 주소를 전달
2. score의 변수값 80의 메모리 주소를 그대로 전달

1의 경우 할당 시점에 두 변수가 갖는 메모리 주소가 서로 다르다.

 

2의 경우 할당 시점에 두 변수가 갖는 메모리 주소가 서로 같다.

 

하지만, 위의 두 가지 평가 방식 중 어떤 것이든 결국 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해 값을 변경하더라도 서로 간섭할 수 없다.

---

2️⃣ 객체

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

 

객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값에 접근할 수 있다.

 

var person = {
	name: 'Lee'
};

위의 코드에서 person에는 객체가 할당되어 있다.

 

객체의 메모리 주소가 1이라면 person이라는 변수는 객체 자체를 갖는 것이 아니라 객체의 메모리 주소인 1을 가지고 있게된다.

 

객체는 변경 가능한 값이므로 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다.

 

예를 들어 위의 코드에서 person.age = 30 또는 person.name = 'Kim'을 통해 객체를 확장 또는 수정하더라도 새로운 메모리 주소에 새로운 객체가 저장되는 것이 아니라 기존의 객체가 수정되는 것이다. (기존의 메모리 주소에 그대로 존재한다.)

 

이는 메모리의 효율적 소비와 성능을 위해 객체를 복사해 생성하는 대신 변경 가능한 값으로 설계하기 위함이지만, 이에 따르는 부작용으로 여러개의 식별자가 하나의 객체를 공유할 수 있다는 문제점이 생긴다.

 

참조에 의한 전달

var person = {
	name: 'Lee'
};

var copy = person;

위와 같이 작성한다면 copy에는 원본의 참조 값이 복사되어 전달된다 ⇒ 참조에 의한 전달

 

따라서 copy와 person은 모두 { name: ‘Lee’ }를 가리키게 된다.

 

이것은 두 개의 식별자가 하나의 객체를 공유한다는 것이다.

 

결론적으로 어느 한 쪽에서 객체를 변경하면 서로 영향을 주고 받게 된다.

 

왜냐하면 객체는 변경 가능한 값이기 때문이다.

 

같은 객체를 가리키는 두 식별자가 있고 한 식별자가 객체를 수정한다면 객체가 변경된다.

 

나머지 식별자도 같은 객체를 가리키고 있기 때문에 서로 영향을 받게 된다.

---

💡 결론

// 1
var score = 80;
var copy = score;

score = 100;

console.log(copy); // 80

// 2
var person1 = {
	name: 'Lee'
};

var person2 = {
	name: 'Lee'
};

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

// 3
var person = {
	name: 'Lee'
};

var copy = person;

copy.name = 'Kim';

console.log(person.name); // Kim

결론적으로 처음 봤던 코드의 결과는 이와 같다.

 

1에서 80이 출력되는 이유는 원시 값은 변경 불가능하기 때문이다.

 

copy = score에서 서로 다른 원시 값 80의 주소를 가리키던 같은 원시 값 80의 주소를 가리키던 재할당이 이루어지는 과정에서 80이 수정되는 것이 아니라 새로운 메모리 공간에 100이 저장되므로 결국 서로 다른 메모리 주소를 가리키게 된다.

 

2에서 person1과 person2에 할당된 객체의 모양은 같지만 둘은 서로 다른 메모리 주소에 저장되어 있다. (우연히 모양이 같지만 엄연히 다른 객체라고 생각하면 된다.)

 

===은 변수에 저장되어 있는 값을 타입 변환하지 않고 비교한다.

 

객체를 할당한 변수를 비교하면 참조 값을 비교하고 원시 값을 할당한 변수를 비교하면 원시 값을 비교한다.

 

따라서, person1과 person2가 가리키는 객체는 내용이 같더라도 다른 메모리에 저장된 별개의 객체이므로 첫번째 결과는 false이다.

 

person1.name과 person2.name은 값으로 평가될 수 있는 표현식이므로 둘 다 ‘Lee’로 평가된다. 따라서, 두번째 결과는 true이다/

 

3에서 person과 copy는 같은 객체를 가리키고 있다.

 

객체는 변경 가능한 값이므로 copy.name에 의해 객체의 값이 변경된다.

 

person과 copy는 같은 객체를 가리키기 때문에 copy에 의해 객체의 값이 변경되면 person에도 영향을 미친다.

 

따라서, 3의 결과는 Kim이 된다.