미누에요
[JavaScript] 원시 타입(primitive type)과 객체 타입(object type) 본문
자바스크립트의 모든 값은 원시 타입(primitive type)과 객체 타입(object type)으로 나눠진다.
위 사진에서 primitive가 원시 타입에 해당하고, Non-primitive가 객체 타입과 매칭된다.
원시 타입(Primitive Type)
원시 타입의 값은 변경 불가능한 값이다. 한번 생성되면 변경할 수 없다.
하지만 우리는 Number, String 타입으로 변수를 선언하고 나서 변경을 분명히 수행했을 것이다.
let name = 'minwoo';
console.log(name); // "minwoo"
name = 'binu';
console.log(name); // 'binu'
위 코드처럼 우리는 한번 선언한 값을 다른 값으로 바꿀 수 있다.
원시 타입의 값이 변경 불가능하다는 말은, 말 그대로 "값" 이 변경 불가능하다는 말이다.
우리는 변수를 선언하고 할당할 때 위와 같은 순서로 할당하게 된다.
처음에 undefined로 된 변수를 선언(임의의 메모리 공간에 이름표 달기)하고, 80이라는 값을 메모리 상의 어딘가에 저장하고, 그 저장된 곳을 변수의 이름으로 가리키는 것이다.
이때 우리가 score라는 새로운 변수에 값을 저장한다면, 똑같이 다른 새로운 메모리 상의 어딘가에 90을 저장하고, score이라는 이름표를 그 메모리 주소를 가리키게만 변경하면 된다.
즉, 80과 90이라는 값은 Number 타입이고, 원시 타입이기 때문에 변경이 불가능하다. (저 메모리 공간에 저장된 값을 변경할수는 없다.)
하지만 변수는 얼마든지 재할당을 할 수 있기때문에 값을 변경할 수 있는 것처럼 느껴지는 것이다.
값의 복사
var score = 80;
var copy = score;
console.log(score, copy); // 80 80
console.log(score === copy); // true
위 코드에서 보면, score에 80을 할당하고, copy에서 score에 담긴 값을 복사하고 있다.
두 값은 같다고 나온다.
위와 같이 복사된다고 보면 좋을 거 같다.
score이 가리키고 있던 메모리 주소에 있는 값을 복사하여 다른 곳에 하나 더 만든다.
그리고 copy를 새롭게 복사된 메모리 주소에 가리키는 것이다.
여기서 C언어를 배운 사람들은 의문이 한가지 들 수 있다.
메모리 주소가 다른데 왜 score === copy가 true일까 ??
Javascript에서는 원시 타입(Primitive Type)의 값을 복사할 때 값이 복사되고, === 연산자는 값과 타입을 비교한다.
즉, 원시 타입의 값은 비교할 때 메모리 주소를 보지 않는다는 것이다.
따라서 80으로 값이 같고, 둘 다 Number 타입이므로 true가 결과로 나오는 것이다.
객체(Object)
키-값 쌍으로 이루어진 동적인 데이터 구조로, 데이터를 저장하고 동작(메서드)을 함께 정의할 수 있는 기본 단위
- 프로퍼티의 개수가 정해져 있지 않음
- 동적으로 추가 및 삭제 가능
- 프로퍼티의 값에 제약 없음
- 메모리 공간 크기 미리 정해둘 수 없음
객체는 참조 타입(reference type)의 값으로, 변경이 가능하다.
var person = {
name : "Lee"
};
이 코드는 객체 person을 생성하는 코드이다.
객체를 생성하면 위 사진처럼 데이터를 저장한 메모리 위치를 변수의 메모리 위치가 참조하는 형식으로 저장된다.
여기서, 객체 타입은 값을 변경할 수 있다고 했으므로 데이터를 변경하면 새로운 메모리 위치에 데이터가 저장되고 참조 위치를 옮기는 것이 아니라, 저 위치의 데이터를 직접 수정하게 된다.
또한, 객체는 참조 타입(reference Type)의 값이라고 했으므로, 복사를 진행할 때 참조형태로 복사된다.
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"}
console.log(copy); // {name: "Kim", address: "Seoul"}
위 사진처럼 참조를 공유하기 때문에, 특정 변수에서 값을 변경하면 다른 변수에도 영향을 주게 된다.
( 흔히들 call-by-reference 라고 했던 거 같다.)
따라서 이러한 데이터 공유 문제를 해결하기 위해 깊은 복사(아예 통째로 복사해서 새로운 메모리 공간에 저장하는 방식)를 수행하곤 한다.
이처럼 원시 타입의 값과 객체는 데이터 접근 방식에 많은 차이점이 존재한다.
원시 타입은 값의 변경이 불가능하고, 값에 의한 변경 방식을 사용하고,
객체 타입은 값의 변경이 가능하고, 참조에 의한 변경 방식을 사용한다.
