11. [Modern JS Deep Dive] 원시 값과 객체의 비교

자바스크립트 Deep Dive 9장 10장에 해당하는 부분이고, 읽으면서 자바스크립트에 대해 새롭게 알게된 부분만 정리한 내용이다.

원시값

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

원시값은 변경 불가능하다. 하지만 우리는 원시값을 변경해서 사용한다. 그 이유는 기존 변수에 새로운 원시 값을 재 할당하면 기존 원시값을 변경하는게 아닌 새로운 메모리 공간을 확보해서 재할당한 원시값을 저장하고 변수는 새롭게 생성된 메모리의 주소를 가리키도록 설계되었기 때문이다.

var score; //0x001에 undefined 할당
score = 80; // 0x002에 80할당
score = 20; // 0x003에 20할당

즉 변수에 할당된 주소값은 바뀌지만 기존에 주소에 들어있던 값은 바뀌지 않기 때문에 원시값은 변경 불가능하다고 얘기한것이다.

문자열의 경우

자바스크립트 같은 경우에는 특이하게 문자열 타입을 지원한다. 그리고 마찬가지로 문자열도 원시값이다.

var str = 'Hello';

위 코드경우 문자열을 선언한 코드이고 str은 메모리 공간의 첫 번째 메모리 셀 주소를 가리키고 있다.

str = 'world';

마찬가지로 재할당을 해주면 숫자 타입과 똑같은 과정을 통해 새로운 메모리의 주소를 가리키게 된다.

문자열은 유사 배열 객체이고 이터러블 이므로 배열과 유사하게 사용이 가능하다.

var str = 'string';

console.log(str[0]); // s
console.log(str.length); // 6

그러므로 위 코드처럼 배열에 원소에 접근하거나 배열 객체에 있는 메서드를 자유롭게 사용이 가능하다.
위와 같이 동작하는 이유는 원시값을 객체처럼 사용하려면 래퍼객체로 원시값이 변환되었기 때문이다.

하지만 문자열은 원시값이기 때문에 이미 생성된 문자열을 수정하지 못한다.

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

console.log(str); // string

값에 의한 전달

let score = 80;
let copy = score;

score = 100;

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

두 score와 copy 같은 경우 모두 다른 메모리 주소에 할당되어있다.

그래서 score 값의 재할당은 copy에 영향을 미치지 않는다.

객체

객체란 원시값과 다르게 변경이 가능한 값이다. 그리고 동적으로 추가하거나 삭제할 수도 있다.
그렇기 때문에 원시값과 다르게 정해진 메모리 공간을 미리 지정해놓을 수 없다.

그리고 객체에 접근하기 위해서는 따로 참조값이 존재한다.

let person = {
  name: 'minto',
};

let copy = person;

그래서 위와같은 얕은 복사를 통해 객체를 전달하면 객체 자체가 copy에 할당되는게 아닌 참조값이 할당이 된다.

copy와 person은 하나의 객체를 공유하기 때문에 한곳에서 객체를 수정해도 모든 식별자가 하나의 객체를 참조하고 있기 때문에 영향이 간다.