간혹 프로그래밍을 하다보면 복잡한 형식의 데이터나 명칭이 긴 자료들을 사용해야 할 경우가 생깁니다. 이럴 경우 우리는 변수라는 상자에 이 자료들을 담아 한 단어로 짧게 축약해서 사용하곤 합니다. 이렇듯 변수는 우리가 프로그래밍을 하는데 있어서 없어서는 안될 중요한 요소 중에 하나지요.
하지만 간혹 변수에 담긴 자료들이 어느 공간에 어떻게 저장이 되는 것일까...? 한번쯤 이런 생각을 해본적 있나요? 분명히 어떤 과정을 거쳐서 컴퓨터에 저징이 되긴 할 텐데...? 우리 눈에는 보이지 않지만 데이터의 타입에 따라 스크립트 내부에서 아주 빠르게 복잡한 자료들을 처리하고 있습니다. 그래서 오늘은 자바스크립트의 데이터 타입에 대해서 알아보도록 하겠습니다.
원시형 데이터 타입(Primitive data type)
자바스크립트에는 원시형 데이터(Primitive data type)와 참조형 데이터(Reference data type) 두 가지 데이터 타입이 존재합니다. 먼저 원시형 데이터 타입이란 원본 그대로의 자료를 말합니다. 즉, 원시형 데이터를 변수에 저장하면 그 값이 '직접' 저장됩니다.
예시1. 원시형 데이터(Primitive data type) 변수 선언
let 이름 = '이지은'; //문자형
let age = 29; //숫자형이런 원시형 데이터에는 문자형(String), 숫자형(Number), 불린형(Boolean), bigint, undefiend, null, ES6 부터 추가된 symbol이 포함되어 있으며, 이런 형태의 자료형들은 이름 그대로 자료 자체가 변수에 저장됩니다. 또한, 원시형 데이터는 값이 절대 변하지 않는다는 불변성(immutable)이라는 특징이 있습니다.
예시2. 원시형 데이터(Primitive data type) 불변성
let 이름 = '이지은';
이름 = '아이유';
console.log(이름) //아이유원시형 데이터의 불변성 특징에 따라, 변수에 값을 재할당 한다고 했을때 기존에 먼저 할당했던 값이 변경된 것처럼 보이지만 실은 그렇지 않습니다.
"뭔 소리여! 내 눈앞에서 바뀌는걸 봤는데???"
우리 눈으로 보기에 예시에서 이름이라는 변수에 '아이유'라는 값을 재할당해서 값이 바뀌었지만, 저 멀리 변수가 저장되는 메모리라는 공간에서는 '이지은'이라는 값은 여전히 존재합니다.
다만, 변수가 가르키는 값이 '이지은'이 아닌 '아이유'로 달라진 것 뿐이지요. 즉, 기존의 변수(이름)에 새로운 값('아이유')을 할당한다고 해서 기존의 값('이지은')이 대체되어서 없어진다는 말이 아닙니다.
예시3. 원시형 데이터(Primitive data type) 복사
let 이름1 = '이지은';
let 이름2 = 이름1;
이름1 = '아이유';
console.log(이름1); //'아이유'
console.log(이름2); //'이지은'그렇다면, 이런 불변성에 따라 변수를 복사하면 어떻게 될까요???
기존에 할당했던 값은 우리 눈에 보이지 않지만 메모리 어딘가에 분명히 존재하기 때문에, 이름2의 값은 여전히 '이지은'입니다. 따라서 이름1과 이름2의 출력 결과는 서로 다릅니다.
즉, 이름1과 이름2는 서로 영향을 주고 받지 않는 독립적인 변수들이란 말이 되지요. 아마 이런 방식으로 등호를 사용해서 변수 복사를 해보신 분들은 왜 당연한걸 설명하냐?? 라고 생각하실 수 있겠지만 이런 복사 방식이 항상 당연하지 않는 경우가 있습니다. 바로 참조형 데이터(Reference data type)가 그렇습니다.
참조형 데이터 타입(Reference data type)
참조형 데이터 타입은 원시형 데이터에 포함되지 않는 모든 형태의 자료형들을 말하는데
객체, 배열, 함수가 있습니다. (엄밀히 말하자면 모두 객체라는 커다란 바운더리에 포함됩니다.) 이런 참조형 데이터 타입을 변수에 저장하면 값이 직접 저장되는 것이 아니라 자료가 있는 곳을 알려주는 '주소'가 저장됩니다.
예시4. 참조형 데이터 타입(Reference data type) 변수 선언
let 아이유 = { name : '이지은' };이런 평범한 객체를 하나 만들었습니다. 코드로만 보면 원시형 데이터 타입과 별로 차이가 있어보이지 않습니다만, 아이유라는 변수 안에는 { name : '이지은' }라는 중괄호의 내용이 저장된 것이 아닙니다. 실제로는 { name : '이지은' }라는 중괄호의 내용이 저장된 곳을 알려주는 주소가 저장된 것입니다.
let 아이유 = 주소지 =====> { name : '이지은' }실제 코드는 아니지만 위의 내용을 조금 더 쉽게 설명하자면, 우리 눈에 보이지 않지만 자바스크립트 내부에서는 이런식으로 참조형 데이터 타입이 저장됩니다.
그렇다면 이렇게 불편하게 저장되는 이유가 무엇일까요? 참조형 데이터 타입은 원시형 데이터와는 다른 메모리 공간에 저장이 되는데 이곳을 '힙(Heap)'이라고 합니다. 이 힙에 대한 내용은 차후에 다루도록 하겠습니다. 그냥 이번 장에서는 참조형 자료들이 저장되는 다른 공간이 존재한다는 것만 알고 넘어가셔도 충분합니다.
따라서 참조형 데이터들은 이런 특수한 저장 방식으로 인해 등호를 사용해서 값을 복사하게 되면 이상한 현상이 발생합니다.
예시5. 참조형 데이터 타입(Reference data type) 값공유 현상
let 아이유1 = { name : '이지은' }
let 아이유2 = 아이유1
아이유1.name = '이지금'
console.log(아이유1); // {name: "이지금"}
console.log(아이유2); // {name: "이지금"}예시3의 원시형 데이터와 같은 방식으로 등호를 사용해 참조형 데이터를 복사하고 값을 출력했습니다. 예시에서 분명 아이유1의 key 값을 수정했는데 출력된 결과를 보니 두 변수의 key 값들이 모두 똑같이 변경되었습니다.
뭔가 좀 이상하네요??? 우리는 아이유2의 코드를 건드리지 않았는데 값이 변경 되어 있습니다. 위 예시처럼 참조형 데이터 타입은 등호를 사용해서 복사하게 되면 복사한 두 객체가 하나의 값을 바라보는 '값공유 현상'이 발생합니다.
즉, 아이유2 변수에 등호를 사용해 아이유1 변수를 담는 순간, { name : '이지은' } 라는 중괄호의 값을 복사한 것이 아닌 중괄호를 가르키고있는 '주소'를 공유한 것입니다. 따라서 아이유1과 아이유2 두 객체 중 하나의 값만 변경해도 같은 값을 출력하는 것입니다.
그렇다면 참조형 데이터 타입을 복사하려면 어떻게 해야할까요???
예시6. 참조형 데이터 타입(Reference data type) 복사
let 아이유1 = {name : '이지은'};
let 아이유2 = {...아이유1};
아이유1.name = '이지금';
console.log(아이유1); //{name: '이지금'}
console.log(아이유2); //{name: '이지은'}이전 시간에 우리가 알아봤던 spread 연산자를 사용하면 해결됩니다.
정리
원시형 데이터 타입(Primitive data type)
1. 문자형, 숫자형, 불린형, undefiend, null 등등
2. 변수에 원시형 데이터 타입을 저장하면 자료 자체가 저장됨
3. 불변성
4. 등호를 사용한 복사가 가능함
참조형 데이터 타입(Reference data type)
1. 객체, 배열, 함수 (원시형 데이터 타입을 제외한 모든 자료형)
2. 변수에 참조형 데이터 타입을 저장하면 데이터를 가르키를 주소가 저장됨
3. 값공유 현상 때문에 등호를 사용한 복사가 불가능함
4. spread 연산자를 활용한 복사가 가능함
데이터 타입에 대해서 알아보자. 끝
