javascript에는 2가지의 데이터 타입이 있는데
원시타입(primitive)과 참조타입(reference)이다.
데이터타입이라고 하면 문자열(String)이나 정수(Number), 배열(Array), 객체(Obejct)와 같은 친구들이 떠오를텐데
여기서의 원시타입과 참조타입은 위의 친구들의 조금 더 상위(?)개념이라고 이해하면 편할 거 같다.
원시타입(primitive) VS 참조타입(reference)의 종류
원시타입에는 Number, Bigint, String, Boolean, Null, Symbol, Undefined 이렇게 7종류가 있고
참조타입에는 Object, Array, Function, Date 등이 있다.
- MDN 참조
각 타입들에 대해서는 따로 설명하지 않고 원시타입과 참조타입이 어떻게 다른지만 정리해봄
원시(primitive)타입이란?
1.원시타입(Primitive type)의 변수들은 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장한다.
2. 원시값은 불변하며, 원시값을 '변형' 할 수는 없다.
-MDN
MDN에서는 위와 같이 원시타입을 정의하고 있다.
근데 저게 무슨소리일까?
아래 샘플코드와 그림을 보도록 해보자
샘플코드
let message = "hello~~~~"; // result: "hello~~~~"
let message_copy = message; // result: "hello~~~~"
const changeMessage = () => {
message_copy = "changeed message";
console.log("message: " + message); // result: "hello~~~~"
console.log("message_copy: " + message_copy); // result: "changeed message"
};
changeMessage();
샘플이미지
위 샘플코드와 이미지를 보면
message라는 변수에 "hello~~~~"라는 값을 할당하였고,
message_copy라는 변수에는 message 변수를 할당하였다.
그 후, changeMessage라는 함수내에서 message_copy의 값을 "changed message"로 재할당 해준 뒤
콘솔에 찍어보니, message 변수는 그대로인데, message_copy 변수의 값만 변경된 것을 눈으로 확인 할 수 있다.
즉, 원시타입은 값이 할당이 되면 완전히 독립적인 개체가 되고, 할당된 값은 불변하다는 것을 알 수 있다.
참조타입(reference)이란?
참조타입(Reference type)은 데이터의 복사 또는 접근을 할 때, 메모리에 직접 접근하는 것이 아닌
메모리의 주소에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입이다.
-MDN
샘플코드
let user = {
name: "john",
};
let user_copy = user;
const changeUser = () => {
user_copy.name = "changeed user";
console.log("user: " + user.name); // result: "changeed user"
console.log("user_copy: " + user_copy.name); // result: "changeed user"
};
changeUser();
샘플이미지
위 코드를 보면 user라는 객체타입의 변수를 선언하고,
user_copy라는 변수에 user변수를 할당하였다.
그리고 changeUser라는 함수에서 user_copy의 name을 변경해주었더니
user_copy는 물론이고, user까지도 영향을 받은 것을 확인 할 수 있다.
즉 user와 user_copy는 독립적인 값이 아닌, 하나의 값이고 같은 참조경로만 가진다는 것을 확인할 수 있다.
정리
1) 원시타입은 각 변수마다 각기 다른 메모리에 할당되고, 참조타입은 같은 메모리에 할당된다.
2) 원시타입 변수는 값을 복사한 변수가 값이 변경되어도 원본 변수의 값은 변경되지 않는다.
3) 참조타입 변수는 값을 복사한 변수의 값이 변경되면 원본 변수의 값도 변경된다.
