자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.
이때 원시 타입의 값은 변경 불가능하며 immutable 이라고 한다.
객체 타입의 값은 변경 가능하며 mutable 이라고 한다.
이상하다 👀
우리는 원시 타입이든 객체 타입이든 재할당을 통해 언제든지 변수를 변경할 수 있었다.
바로 아래의 코드처럼 말이다.
// 원시 타입의 변수를 변경하는 경우
var result = 1;
result = 3;
// 객체 타입의 변수를 변경하는 경우
var person = {
name: 'Kim',
age: 25,
};
person.name = 'Lee'; // 프로퍼티 값 갱신
// 객체를 재할당
person = {
name: 'Park',
address: 'Seoul',
};이처럼 var로 선언한 모든 변수는 변경이 가능하다.
하지만 숫자, boolean 등의 원시 타입은 immutable 이라 한다.
왜일까? 설명을 위해 자바스크립트 메모리 구조를 들여다보도록 하겠다!
➊ immutable
변수의 값을 변경할 수 없다는 것이 구체적으로 무엇을 의미할까?
먼저 '변수'와 '값'의 개념을 구분해서 생각해보자.
변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는
그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
값은 해당 메모리에 저장된 실질적인 데이터를 뜻한다.
변경 불가능(immutable)하다는 것은 변수가 아니라 값에 대한 진술이다 ❗️
변수에 다른 값을 재할당할 경우,
해당 메모리에 저장된 값이 교체되는 것이 아니라 변수가 다른 메모리와 연결된다.
아래의 그림처럼 말이다.
이처럼 메모리에 저장된 원시 값은 변경되지 않고 그대로 남아 있다.
변수와 연결된 메모리만 달라질 뿐이다.
따라서 원시 타입의 값은 immutable 하다!
원시 값은 변경 불가능한 값이므로 원시 값을 갖는 변수의 값을 변경하려면 재할당 외에는 방법이 없다!
그러나 객체 타입의 값은 재할당을 하지 않아도 객체를 변경할 수 있다❗️
➋ mutable
객체 타입의 값은 재할당 없이 변경할 수 있다.
그렇기 때문에 mutable 하다고 말한다.
재할당 없이 객체를 변경하는 코드는 아래와 같다.
var person = {
name: 'Lee',
};
// 프로퍼티 값 갱신
person.name = 'Kim';
// 프로퍼티 동적 생성
person.address = 'Seoul';이처럼 객체가 변경될 때 메모리 구조는 아래 그림과 같다.
원시 값을 갖는 변수의 값을 변경하면 재할당을 통해 메모리에 원시 값이 새롭게 생성된다.
그러나 객체는 변경해도 다른 메모리에 새롭게 객체가 생성되지 않으며
기존의 메모리에서 값이 직접 변경된다.
왜 객체는 변경 가능하도록 설계되었을까❓
객체를 변경할 때마다 원시 값처럼 이전 값을 복사해서 새롭게 생성한다면 명확하고 신뢰성이 확보될 것이다.
그러나 객체는 크기가 매우 클 수 있고, 원시 값처럼 크기가 일정하지 않으며, 프로퍼티 값이 객체일 수도 있어서 복사해서 생성하는 비용이 많이 든다.
즉, 메모리의 효율적 소비가 어렵고 성능이 나빠진다.
따라서 메모리를 효율적으로 사용하기 위해 객체는 변경 가능한 값으로 설계되어 있다!
결론 💡
원시 값이 할당된 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없기 때문에 immutable 하다!
객체 값이 할당된 변수는 재할당 없이 객체 값을 변경할 수 있기 때문에 mutable 하다!
-끝-
잘못된 정보, 오탈자를 발견하면 편하게 댓글로 말씀해주시면 감사하겠습니다 🙂
