📚 Primitive Type(원시 타입, 기본형)과 Object Types(객체 타입, 참조형)의 차이점이 무엇일까?
앞선 글 <JavaScript의 Data Type을 왜 특별하다고 하는 것일까?> 을 통해 JavaScript의 Data Type 중 Primary Type에 알아보았다. 이에 이어서, Object Type에 대해 더욱 심도 깊게 학습해 보고 더 나아가 Primary Type과 Object Type의 차이점까지 알아보고자 한다.
📌 JavaScript의 Data Type
이미지 출처: https://tutorial.eyehunts.com/js/javascript-data-types-and-examples
JavaScript의 Data Type 종류
앞선 글들을 통해 Number, String, Boolean, Null, undefined, Object 등 많은 Data Type에 대해 학습하였다.
이 중, 객체를 제외한 나머지 자료형을 묶어서 Primary Type이라고 하며, Object(array, function, ...)를 Object Type이라고 칭한다.
📌 Object Type이 Reference Type으로도 불리우는 이유
Object Type은 맥락에 따라 Reference Type으로 불리우기도 한다. 그렇다면 어떤 맥락에서, 왜 Reference Type이라는 이름이 나왔을까? 이에 대해 예제를 통해 한 번 알아보자.
예제>
let x = {name: "John", age: 30};
let y = x;
console.log(x);
console.log(y);
y.age = 40;
console.log(x);
console.log(y); // output: {name: "John", age: 40}위 예제에서 핵심은 마지막에서 2번째 줄을 살펴보는 것이다. 과연 console.log(x);의 출력으로 어떤 결과가 나올 것 같은가?
우리가 이전에 배웠던 Primary Type적 관점으로 바라보면, y의 값만 수정하였지 x의 값은 수정하지 않았기 때문에 console.log(x);의 출력으로 {name: "John", age: 30}이 출력 될 것이라 생각할 수 있다. 하지만 실제로 코드를 돌려보면, {name: "John", age: 40}이 출력된다.
어째서? 왜? y의 값만 수정한 것처럼 보이는데 x의 값도 수정이 된 것일까? 여기서 'Reference', 즉 참조의 개념이 나오게 된다.
Reference, 참조
JavaScript에서 변수에 객체 값을 할당하는 경우, Primary Type과 다르게 조금 특별하게 동작한다. 지금부터 위와 같은 조금 '특별한' 동작을 이해하기 쉽게 설명해 보고자 한다.
객체가 메모리에 생성될 때, 그 객체는 마치 상자 안에 보관된 값과 같이 메모리의 특정 위치에 저장된다. 하지만 중요한 점은, 변수에 이 객체 자체가 저장되는 것이 아니라, 그 객체로 가는 주소, 즉 메모리 주소가 저장된다는 것이다. 상자 비유를 사용하면, 변수는 실제 객체가 저장된 상자까지의 길을 가리키는 지도와 같다고 볼 수 있다.
이 개념을 적용해 예제를 다시 살펴보자. 1) 첫 번째 줄에서 변수 x에 {name: "John", age: 30} 객체를 할당하는 경우, x에는 이 객체 자체가 아닌, 객체로 가는 주소가 저장된다. 이로 인해 변수 x는 해당 객체로 가는 길을 알게 되는 것이다.
이제, 두 번째 줄을 이해하는 것이 '참조(Reference)'에 있어 핵심이다. 2) 여기서 변수 y에도 같은 객체를 할당하면, y에도 {name: "John", age: 30} 객체로 가는 주소가 저장된다. 즉, y에는 객체 자체가 아니라, 그 객체로 가는 길이 복사되는 것이다.
이와 같은 방식을 통해 결과적으로 x와 y는 동일한 객체를 바라보게 된다. 따라서 y를 통해 객체를 수정하면, x를 통해서도 동일한 객체가 수정된 것처럼 보이는 것이다.
이처럼 객체는 주소값을 참조하여 해당 값에 접근하기 때문에, 객체와 같은 객체 타입(Object Type)을 맥락에 따라 참조 타입(Reference Type)이라고 부르는 것이다.
- 참조형 값을 변수에 담아 사용할 때는 해당 객체를 가리키는 주소값이 할당된다.
- 따라서, 참조형의 경우에는 변수를 통해 다른 변수에 할당하면 값 자체가 복사되는 것이 아니라 주소값이 복사가 되기 때문에 결국은 같은 객체를 가리키게 된다.
- 결과적으로, 한쪽을 수정하면 다른 한쪽도 같이 수정이 되게 된다.
📌 Primitive Type(기본형) vs Reference Type(참조형)
앞서 참조('Reference')의 개념을 살펴보며 참조형 값을 변수에 담아 활용하는 방법을 알아보았다. 그렇다면 기본형은 어떠한 방식으로 변수를 선언하고 할당할까?
이에 대한 답이 Primitive Type(기본형)과 Reference Type(참조형)의 차이점을 구분하는 핵심 개념이다.
기본형에서는 기본형 값을 변수에 담아 사용할 때 값이 그대로 할당된다. 이와 같은 과정은 다음과 같다.
- 변수 a를 선언하면 실제 메모리는 데이터를 담을 공간을 미리 확보한다.
- 변수 a에 기본형 값을 할당해주면 변수 a와 매칭되어 있는 주소값(저장 공간)을 읽고 해당 주소 데이터 공간에 값을 넣는다.
참조형에서는 참조형 값을 변수에 담아 사용할 때 해당 객체를 가리키는 주소값이 할당된다. 이와 같은 과정은 위에서 살펴보았으니 생략하도록 하겠다.
변수 선언 및 할당
- 기본형 값을 변수에 담아 사용할 때는 값이 그대로 할당된다.
- 참조형 값을 변수에 담아 사용할 때는 해당 객체를 가리키는 주소값이 할당된다.
따라서, 기본형을 사용할 때는 변수 간의 독립성이 보장되며, 한 변수의 값 변경이 다른 변수에 영향을 미치지 않는다. 반면, 참조형을 사용할 때는 여러 변수가 동일한 객체를 공유할 수 있으므로, 한 객체의 변경이 해당 객체를 참조하는 모든 변수에 영향을 주게 된다.
📌 Outro
이렇게, Object Type에 대해 알아보고 더 나아가 Primary Type과 Object Type의 차이점까지 알아보았다.
이번 학습을 통해 JavaScript의 데이터 타입에 대한 깊은 이해를 얻을 수 있었으며, 이 지식은 향후 JavaScript 프로그래밍에서 효율적이고 오류를 줄이는 코드를 작성하는 데 큰 도움이 될 것이라고 자신한다. 데이터 타입의 이해는 변수의 행동 예측, 메모리 관리, 성능 최적화에 핵심적인 역할을 하기에, 오늘의 깨달음을 몸 속 깊이 숙지하고자 한다.
JavaScript의 데이터 타입의 이해를 기반으로 이론적인 지식뿐 아니라 실제 코딩 경험을 통해 계속해서 나아가고, 더욱 유연하고 안정적인 코딩 스타일을 갖추기 위해 끊임없이 부딪치고, 성장하는 개발자가 되어보자..!
