[JS] 11장 원시값과 객체의 비교 | 모던자바스크립트 Deep Dive

원시 타입? 객체 타입?

• 원시타입 : string, number, boolean 등
  1) 변경이 불가능한 값 (읽기전용)
  2) 메모리에 실제 값이 저장됨
  3) 다른 변수에 할당 할 시, 원시 값이 복사되어 전달
• 객체 타입 : object
  1) 변경이 가능한 값
  2) 메모리에는 참조 값이 저장됨
  3) 다른 변수에 할당 시, 원본의 참조 값이 복사되어 전달

"값의 변경이 불가능하다" 는 무슨말잉교?

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

위 말을 이해하기 위해서는 JavaScript의 변수 재할당 매커니즘을 이해해야한다!

JavaScript에서는 변수가 새 값으로 재할당 될 때 메모리공간을 새로 생성하여 변수이름과 변수값을 지정한다. 그 과정에서 기존에 변수가 머물렀던 메모리공간 속 변수 값은 변경되거나 삭제되지 않는다. (오랫동안 사용하지 않으면 가비지컬렉터가 자동으로 삭제한다.)

위 설명 같이 원시값은 재할당은 가능하지만, 변수로 저장되있는 메모리공간에 있는 직접 접근하여 변경하는 것은 불가능하다. 이러한 특성을 '값의 변경이 불가능하다'고 말하며, 이를 불변성(immutability)라고 한다.
불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다!

위 개념을 잘 이해해야 JavaScript의 변수에 관련하여 헷갈리는 부분이 줄어든다.

문자열과 불변성

• C와 같은 다른 언어의 경우
  문자열에 경우 하나의 문자당 2바이트가 필요하다. 숫자 데이터는 모든 수 동일하게 8바이트가 필요한 반면, 10개의 문자로 이루어진 문자열은 20바이트가 필요하다.
• JavaScript의 경우
  문자열을 변경 불가능한 원시타입으로 제공한다. (장점!)

var str = 'hello';
str = 'world'; // 다른 변수 타입과 마찬가지로 재할당과정이 이루어짐!

str 변수의 내부 값이 변환되는 것이 아닌 값을 담고 있는 주소의 값이 변경된다. str변수가 기존에 'Hello'를 가르키고 있다가 'world'라는 새 메모리 주소를 가르킨다.

결국, 문자열의 한 문자를 변경하더라도 본 데이터 값은 변환되지 않는다.
따라서, 예기치 못한 변경으로 자유로우며, 데이터의 신뢰성을 보장한다.

 var str = 'string';
 str[0] = 'S'; //에러를 나타내지는 않음
 console.log(str); //'string' 내부 문자열이 수정되지 않았다! 

값에 의한 전달

var score = 80;
var copy = score; 

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

score = 100; 

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

score 변수에 숫자 80을 할당하고 copy변수에 score를 할당했다. 그 후, score변수에 새로운 숫자값 100을 재할당하면 copy값이 100이 될까, 80이 될까?

코드에 따라 이루어지는 동작은 다음과 같다.

1. 변수 score에 할당된 80이라는 원시 값이 복사되어 변수 copy에 할당(복사되어 전달)
2. 변수 copy의 값은 80이 됨!
3. 변수 score에 재할당(새로운 메모리 공간에 100을 할당하고 score가 100의 주소를 가르킴)
4. 변수 copy는 그대로 80, 변수 score는 100이 됨. 

정리하자면, score변수와 copy변수는 각각 다른 메모리값에 저장된 별개의 값이기 때문에, score에 어떠한 작업을 하여도 이미 선언된, 할당된 copy변수엔 어떤 영향도 주지 않는다.

var x = {name : 'Lee'};

var person = {
   name : 'Lee'
   };
  
var copy = person;

console.log(copy === person); //true

//프로퍼티 변경, 추가
copy.name = 'kim';
person.address = 'seoul';

console.log(person); //{name: 'kim', address : 'seoul'}

var person1 = {name: 'Lee'};
var person2 = {name: 'Lee'};

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