자바스크립트의 기본형 데이터 타입
- 프로그래밍 언어/웹 프론트엔드
- 2020. 10. 6. 01:06
함께 보면 좋은 글
여러분들은 자바스크립트에 타입이 존재한다는 것을 아시고 계신가요?
사실 C나 자바 같은 언어들과는 다르게 자바스크립트는 타입을 사용자가 선언하지 않습니다.
하지만 그럼에도 불구하고 변수에 데이터는 정상적으로 들어가고, 에러 또한 발생하지 않습니다.
이상합니다.
분명 C나 자바같은 언어에선 이런 것에 대해서 에러를 발생시키는데
자바스크립트는 그러지 않습니다.
그렇습니다.
오늘은 자바스크립트가 데이터 타입을 지정하는 방법에 대해서 알아보도록 하겠습니다.
(자바스크립트의 메모리 관리 포스트를 읽지 않으셨다면 읽고 해당 포스트를 보는 것을 추천드립니다)
데이터 타입의 종류
자바스크립트를 이제 막 입문한 사람들은 잘 모를 수도 있지만,
자바스크립트엔 여러 종류에 데이터 타입들이 존재합니다.
문자열(string), 숫자(number), null, 객체(object) 등 다양한 데이터 타입이 존재하죠.
사실 말만 들어선 이해가 안 가실 것 이기 때문에 그림을 한번 보도록 하겠습니다.
이게 현재까지 존재하는 데이터 타입입니다.
어느 정도 자바스크립트를 사용하시는 분들은 익숙한 타입들이 보이실 겁니다.
이 포스팅에서 각 타입에 대해서 다루게 되면 포스팅이 길어지므로 타입 설명은 제쳐두고
우리가 집중적으로 봐야 할 타입은 기본형과 참조형 데이터 타입입니다.
기본형 데이터 타입
먼저 우리는 기본형 데이터 타입에 대해서 알아보도록 하겠습니다.
이 기본형 데이터 타입은 숫자(Number), 문자열(String), 불리언(Boolean) 등의 데이터 타입을 가지고 있는데,
왜 이 숫자나 문자열 등의 타입들(원시 값이라고도 함)을 기본형 타입이라고 할까요?
결론적으로 말하자면 기본형 데이터 타입은
할당이나 복제를 통해 데이터를 사용하고 불변 값을 가지는 타입입니다.
숫자나 문자열, 불리언, null 등이 그러하고요
전혀 이해가 안 됩니다...
머리가 쥐가 날 것 같습니다.
하지만 그림으로 이해를 하면 아마 이해하기 쉽기 때문에
최대한 쉽게 자바스크립트가 기본형 데이터 타입을 다루는 방식에 대해서
그림으로 한번 보도록 하겠습니다.
자바스크립트가 데이터를 할당하는 방법 with 그림
자바스크립트가 관리하는 메모리에는
아래 그림과 같이 변수 영역 메모리와 데이터 영역 메모리가 존재합니다.
그리고 우리는 자바스크립트에서 temp라는 변수를 생성하여
"변수값"이라는 문자열을 저장해 봅시다.
아래처럼 말이죠
let temp = "변수값"그럼 자바스크립트는 아래와 같이 데이터를 저장하게 됩니다.
그리고 아래처럼 temp라는 변수를 사용해 봅시다.
let temp = "변수값"
console.log(temp);
그럼 자바스크립트는 temp라는 이름을 가진 변수 영역 메모리를 찾습니다.
아래 사진과 같이 말이죠
그리고 값이 데이터 영역 메모리의 103번 영역이라는 것을 확인하고,
103 주소에 저장되어 있는 값을 가져옵니다.
이렇듯 데이터 영역에 직접 데이터를 할당하여 데이터를 가져오는 방식을 데이터 할당이라고 합니다.
어때요? 이해하기 쉽죠?
그런데 좀 이상합니다.
그렇다면 왜 자바스크립트는 temp영역 메모리에 직접 데이터를 저장하지 않고
한 번을 거쳐서 데이터를 가져오는 것일까요?
그건 똑같은 값을 가지는 메모리의 중복을 없애기 위해서입니다.
사실 데이터 영역 메모리 한 칸에 "변수값" 이라는 데이터를 넣어놨지만,
저 "변수값" 이 저장되어 있는 영역은 6바이트에 메모리 영역을 잡고 있습니다.
(한글 한 글자가 2바이트 이므로)
그렇기 때문에 한 단계를 거쳐서 데이터를 저장하는 것입니다.
그리고 이러한 방식이 빛을 발할 때는 같은 데이터를 중복적으로 저장할 때인데,
가장 간단한 예시로 데이터 복제를 예로 들 수 있습니다.
먼저 자바스크립트가 데이터를 어떻게 복제하는지 알아볼까요?
자바스크립트가 데이터를 복제하는 방법 with 그림
자 바로 설명 들어가겠습니다.
일단 아래 코드처럼 temp2라는 변수에 temp를 넣어줍니다.
let temp = "변수값"
let temp2 = temp;
그럼 아래 그림들처럼 값 복제가 이루어지게 됩니다.
먼저 변수 영역 메모리에 temp2를 만들어 줍니다.
그 후 temp에 값을 가져오기 위해 203 메모리 영역으로 이동합니다.
그리고 203의 값을 가져옵니다.
요렇게 말이죠
어때요? 복제는 참 쉽죠?
자바스크립트는 그냥 temp의 메모리 영역인 203 영역에 접근하여 값을 들고 와
temp2에 데이터 영역인 214에 넣어줍니다.
그렇게 되면 메모리 영역 위치 값만 저장하면 되니까 메모리 소모가 크지 않게 되고
temp2가 6바이트에 메모리 소모 없이 "변수값"이라는 값을 가질 수 있게 됩니다.
그럼 여기서 또 하나의 의구심이 들 것입니다.
만약 temp에 데이터를 변경하면 temp2도 변경될 것 같은데??
좋은 의구심입니다.
하지만 이러한 방식을 해결하기 위해 자바스크립트는
데이터가 변경됐을 때의 방법도 존재합니다.
자바스크립트가 데이터를 변경하는 방법 with 그림
자 우리는 아래 코드와 같이 temp에 데이터를 변경했다고 가정해 봅시다.
let temp = "변수값"
let temp2 = temp;
temp = "템프값"
그럼 자바스크립트는 temp의 값이 변경되었다는 것을 알고
아래 그림과 같이 데이터 영역 메모리를 새로 잡아줍니다.
그리고 temp에 저장되어 있는 주소 값을 새로운 주소 값으로 변경해 줍니다.
자 이렇게 해서 temp와 temp2 가 가지는 값이 달라지게 됩니다.
자 이렇게 기본형 데이터가 변경되었을 때,
자바스크립트는 해당 데이터 자체를 변경하지 않고
새로운 데이터 영역을 만들어서
변경된 데이터를 저장합니다.
이렇게 해서 temp2의 데이터까지 자동으로 변경하지 않고
temp2의 값을 유지할 수 있게 되었습니다.
자 여기서 저는 뭔가 궁금합니다.
과연 기본형 데이터는 한번 만들면 변경할 수 없을까?
라고요...
결과를 말하자면
네!!! 변경할 수 없습니다.
기본형 데이터는 한번 만들면 변경할 수 없고,
가비지 콜렉터가 수거해가지 않는 이상 사라지지도 않습니다.
이것을 자바스크립트에선 불변 값이라고 하며
기본형 데이터 타입이 가지는 성질입니다.
불변 값과 상수의 차이
자 여기까지 온 사람들이라면 들 수 있는 또 한 가지 의구심
그럼 불변 값이 상수가 아닌가??
이것도 결론부터 말하면
네!!! 아닙니다.
상수는 변수 영역의 메모리 값이 변경되지 않는 것이고
불변 값은 데이터 영역의 메모리 값이 변경되지 않는 것입니다.
그러니 const 키워드로 만들어진 변수에 들어가 있는 데이터를
기본형 데이터 타입이라고 생각하지 않으셨으면 좋겠습니다.
기본형 데이터 타입 정리
자, 정리해 봅시다.
아까 제가 뭐라고 했죠?
기본형 데이터 타입은 할당이나 복제를 통해 데이터를 사용하고 불변 값을 가지는 타입입니다.
라고 했죠?
즉, 기본형 데이터 타입은 데이터 영역 메모리에 직접 데이터를 생성하고, 사용하는 타입이며
불변 값을 가지는 타입으로 값이 변경되면 데이터 영역 메모리에 새로운 값을 생성하여 접근하는 타입입니다.
또한 상수와 불변 값은 성질 자체가 다르며
상수는 변수 영역의 메모리 값 변경 여부를 따르며
불변 값은 데이터 영역 메모리 값 변경 여부에 따릅니다.
이것으로 우리는 기본형 데이터 타입에 대해 설명할 수 있게 되었습니다.
마무리
자! 오늘은 자바스크립트의 데이터 타입에 종류와 기본형 데이터 타입에 대해서 알아보았습니다.
쉽게 설명했는지 모르겠습니다.
다음 시간엔 참조형 데이터 타입에 대해서 한번 알아보도록 하겠습니다.
만약 포스트에 문제가 있거나 틀린 부분, 잘 이해가 안 되는 부분이 있다면
댓글을 남겨주시기 바랍니다.
감사합니다.
'프로그래밍 언어 > 웹 프론트엔드' 카테고리의 다른 글
| 자바스크립트의 객체 참조할당과 얕은복사, 깊은복사 (0) | 2020.12.14 |
|---|---|
| 자바스크립트의 참조형 데이터 타입 (0) | 2020.12.14 |
| javascript Dom 로드 시 실행되는 이벤트 (0) | 2020.09.17 |
| 자바스크립트의 메모리 관리 (0) | 2020.09.02 |
| 자바스크립트 "==" 과 "==="에 대해서 알아보자 (0) | 2020.08.11 |
