[Javascript]원시형과 참조형

원시타입과 참조타입?

자바스크립트의 데이터 타입에는 크게 두 가지로 분류된다.

바로 원시형(기본형)과 참조형이다.

아래 이미지를 참고하자

데이터 타입

두 가지의 타입을 나누는 기준은 일반적으로 기본형은 할당이나 연산 시 복제되고 참조형은 참조된다. 엄밀히 말하면 둘 모두 복제를 하지만 기본형은 값이 담긴 주소값을 바로 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.

 

기본형 데이터인 숫자, 문자열, boolean, undefined, Symbol 은 모두 불변값이다.

 

예를 들어 불변성의 개념을 알아보자.

let a = 'luka';
a = a + 's';
// 1번줄 데이터의 주소와 2번줄 데이터의 주소는 완전히 다른 별개의 데이터이다.

let b = 1;
let c = b;
c = 2;
console.log(b); //1
console.log(c); //2
// 5,6번줄 데이터의 주소는 같다(재활용), 하지만 7번째 줄의 데이터는 새로운 주소를 만들어 값을 저장한다.

이처럼 한번 만든 값은 변하지 않는다, 변경은 오직 새로 만드는 동작을 통해서만 이루어진다. 이것이 불변값의 성질이다. 참조형 테이터는 객체, 배열, 함수가 있다. 참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장되는 것이 아니라, 변수의 값이 저장된 힙(Heap) 메모리의 주소 값을 저장한다.

 

객체로 예를 들면

let me = {
  name: "luka"
};
// me의 데이터인 객체는 그대로 저장되어 지는 것이 아닌, 객체가 저장되어 있는 메모리 주소인 객체에 대한 '참조 값' 이 저장된다.
let you = me;
//you의 데이터 역시 참조 값을 복사한다.

객체는 메모리 내 어딘가에 저장이 되고, 변수me에는 객체를 '참조'할 수 있는 주소가 저장된다. 또한 me와 you모두 변수는 두 개이지만 각 변수에는 동일 객체에 대한 참조 주소가 저장된다.

 

그렇기에 복제를 하게 된다면 아래와 같은 상황이 생긴다.

let me = {
  name: "luka"
};

let you = me;

you.name = "rooney";
console.log(me.name); // "rooney"가 출력된다. 두 변수 모두 같은 참조 주소를 저장했기 때문이다.

정리를 하면 객체는 참조에 의해 할당되고 복사된다. 변수에는 객체 자체가 아닌 메모리상의 참조 주소가 저장된다. 따라서 객체가 할당된 변수를 복사하거나 함수의 인자로 넘길 때는 객체가 아닌 객체의 참조가 복사가 된다.

 

얕은복사와 깊은복사의 방법에 대해 다음글을 통해 알아보자.

https://luka-frontend.tistory.com/36

[Javascript]얕은복사 깊은복사

 

---

Ref. 

https://ko.javascript.info/object-copy 모던 JavaScript 튜토리얼

코어 자바스크립트- 정재남