모던 자바스크립트 Deep Dive - 제 11장

<모던 자바스크립트 Deep Dive - 제 11장>

2023. 03. 13 - 14

[원시 값과 객체의 비교]

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

이 두 타입은 크게 세 가지 측면에서 차이를 가진다. 

 

1. 원시 타입의 값은 변경 불가능한 값  /  객체 타입의 값은 변경 가능한 값
2. 원시 타입의 값을 변수에 할당하면 그 변수에는 실제 값이 저장됨  /  객체 타입의 값을 변수에 할당하면 변수에는 참조 값이 저장됨.
3. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사 되어서 전달  /  객체 값을 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어서 전달 

---

 

11.1 원시 값)

1)

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

먼저 변수는 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해서 붙인 이름이고,

값은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과를 말한다. 

여기서 변경이 불가능하다는 것은 변수가 아닌 값에 대한 진술이다. 

 

즉, 원시 값 자체를 변경할 수 없다는 말이지 변수 값을 변경할 수 없다는 말이 아님

(변수 값은 그냥 재할당 하면 바뀌는 거니까)

 

변경이 불가능한 원시 값의 특성은 데이터의 신뢰성을 보장한다. 

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

즉, 변수가 참조하고 있던 메모리 공간의 주소가 새롭게 재할당한 원시 값의 메모리 공간 주소로 바뀌는 것이다. 

이 이유는 변수에 할당된 원시 값이 변경 불가능한 값이기 때문이다.

그 값을 직접 변경할 수 없기 때문에 이와 같은 과정이 일어나게 되는 것이다. 

값의 이런 특성을 불변성 이라고 한다. 

 

 

 

2)

원시 값인 문자열은 다른 원시 값과는 다르게 독특한 특징이 있다. 

1개의 문자는 2바이트의 메모리 공간에 저장된다.

따라서 문자열은 몇 개의 문자로 이루어져있는냐에 따라 필요한 메모리 공간의 크기가 결정된다. 

하지만 숫자 값은 1도, 1000000도 동일한 8바이트가 필요하다. 

 

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

let str = 'string';

str[0] = 'S';

console.log(str);   // string 출력

위 예시의 str[0] = 'S' 처럼 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. 

문자열은 변경 불가능한 값이기 때문이다. 따라서 이렇게 기존의 문자열을 변경하는 것이 아니라

새로운 문자열을 새롭게 재할당해야지만 기존과 다른 문자열로 변경할 수 있다. 

 

 

 

3) 

let score = 80;
let copy = score;

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

score = 100;

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

위처럼 변수에 변수를 할당했을 때 무엇이 어떻게 전달될까?

우선 copy 라는 변수에 값 80으로 평가되는 score를 할당했기때문에

copy 변수에도 80이 할당되게 된다. 

 

이처럼 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수인 copy에는

할당되는 변수 score의 원시 값이 복사되어서 전달된다. 이를 값에 의한 전달이라고 한다. 

하지만 copy와 score가 같은 값인 80을 가진다고해도 그 값인 80은 서로 다른 메리 공간에 저장된 별개의 값이다. 

따라서 score의 값을 100으로 재할당한다해도, copy의 값에는 어떠한 영향도 주지 못한다. 

 

∴ 즉, 두 변수의 원시 값은 서로 다른 메모리 공간에 저장된 별개의 값이 되어 어느 한쪽에서 재할당을 통해

값을 변경하더라도 서로 간섭할 수 없다. 

---

 

11.2 객체)

객체 타입의 값은 원시 타입의 값과는 다르게 변경 가능한 값이다. 

 

객체를 할당한 변수에는 생성된 객체가 실제로 저장된 메모리 공간의 주소가 저장되어 있다.

이 값을 참조 값이라고 하고, 변수는 이 참조 값을 통해서 객체에 접근할 수 있다. 

 

const person = {
	name: 'Lee'
};

person.name = 'Kim';
person.address = 'Seoul';

원시 값은 변경이 불가능하기 때문에 원시 값을 갖는 변수의 값을 변경하려면

재할당을 통해서 메모리에 원시 값을 새롭게 생성해야한다. 

하지만 객체 값은 변경이 가능하기 때문에 메모리에 저장된 객체를 직접 수정할 수 있다. 

 

위처럼 person.name 을 통해 프로퍼티 값을 갱신할 수도 있고,

person.address를 통해 프로퍼티를 동적으로 생성할 수도 있다. 

 

이러한 객체에는 구조적 단점에 따른 부작용이 있다. 원시 값과는 다르게 

여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다. 

 

const person = {
	name: 'Lee'
};

const copy = person;

객체를 가리키는 변수(원본 person)를 다른 변수(사본인 copy)에 할당하면 

원본의 참조 값이 복사되어서 전달된다. 

person과 copy가 저장된 메모리 주소는 다르지만 동일한 객체를 가리키게 된다.

즉, 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 

=> 따라서 원본이나 사본 중 어느 한쪽에서 객체를 변경하게되면 서로 영향을 주고 받게된다. 

 

 

 

 

---

https://link.coupang.com/a/F6ksK

모던 자바스크립트 Deep Dive:자바스크립트의 기본 개념과 동작 원리

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."