[JavaScript] 자바스크립트의 자료형 (원시 타입, 비원시 타입)

var, let, const로 선언할 수 있는 자바스크립트의 변수의 자료형은 원시 타입(Primitive Data Type)과 비원시 타입(Non-Primitive Data Type)으로 나눌 수 있다. 

 

• 원시 타입(Primitive Data Type) 

- 한번에 하나의 값만 가질 수 있음

- 하나의 고정된 저장 공간 이용 (원시 타입 자료형은 값이 고정 불변) ex. string, number, bigint, boolean, undefined, null, symbol(ES6)

 

// 표 1
// 변수에 value 할당
let newVar = 23;
let myNum = 24;
let myString = 'abcd';

// 표 2
// newVar 변수에 value 재할당
newVar = 50;

 

 

원시 타입은 불변성을 가지고 있기 때문에 재할당을 하더라도 기존에 메모리에 생성된 값들은 그 자체가 변경될 수 없다. 재할당 시, 그저 식별자와 연결되어있는 메모리를 바꾸는 것이다. newVar 변수에 값을 재할당 시, 50이라는 값이 새로 메모리에 생성되고 newVar가 가르키던 메모리가 100번지에서 400번지로 바뀐다.

 

• 비원시 타입(Non-Primitive Data Type)

- 한번에 여러개의 값을 가질 수 있음

- 여러 개의 고정되지 않은 동적 공간 사용. 비원시 타입의 자료형은 변수의 크기가 동적으로 변한다는 것이 특징이다. 이러한 특징 때문에 오브젝트의 데이터 자체는 별도의 메모리 공간(heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소(heap)의 메모리 주소값이 저장되기 때문에 js엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근하게 되는 것이다. ex. array, object, function

 

const obj1 = {a:1, b:2};
const obj2 = obj1;

 

1) 생성해둔 변수의 할당을 이용한 얕은 복사 (주소값만 복사하여 같은 주소에 해당하는 자료를 참조)

const obj1 = {a:1, b:2};
const obj2 = obj1;
// obj2에 객체를 직접 대입하는 경우 참조(힙에 만들어진 주소값)에 의한 할당이 이루어지므로 
// obj1과 obj2는 같은 데이터 주소를 가진다.
// 이렇게 주소값이 복사되는 것을 얕은 복사(shallow copy) 라고 한다.

obj1.a = 100;
// obj1과 obj2는 같은 메모리 주소의 자료를 참조하므로 obj1을 수정하면 obj2도 수정된다. 

obj1 === obj2 // 결과값 : true

 

2) lodash 라이브러리를 이용한 깊은 복사 (깊은 복사된 객체는 원본과의 참조가 끊어져야 한다.)

const obj = {
	a:1,
    b: {c:2}
    };
    
const copiedObj = _.cloneDeep(obj); // 깊은 복사로 obj를 카피, 원본과의 참조 끊음

copiedObj.b.c = 3 // 깊은 복사로 생성한 객체를 수정

obj.b.c === copiedObj.b.c // // 결과값 : false