자바스크립트의 데이터 타입 - 원시타입

저번 시간까지 변수에 대해서 배웠습니다. 오늘부터는 변수에 어떤 값들이 들어갈 수 있는 지에 대해서 알아볼 시간입니다. 자바스크립트에서 값으로 들어갈 수 있는 데이터 타입은 두개로 나뉘어 집니다. 바로 원시 타입과 객체(참조 타입)입니다. 

원시 타입 이란?

---

원시 타입이란 말이 어려울 수도 있습니다만 기본 타입이라고 간단하게 생각하면 됩니다. 원시 타입의 특징 중의 하나는 불변성(immutable)입니다. 이 부분에 대해서 의문이 있을수도 있을 것이라고 생각합니다. 저번시간에 배운 const라면 값을 수정하는데 에러가 떳지만 let이나 var의 경우엔 undefined에서 문자를 갖게 되기고 했고, 숫자가 되기도 했으니까요. 하지만 이런 수정은 변수에 다른 값을 대입하는 것이었을 뿐 기존의 값을 변경하는 것은 아니었습니다. 예시를 통해 살펴볼까요? 크롬에서 새 창을 여시고 url에 about:blank로 접속해주세요. 그리고 f12를 누르고 콘솔창을 실행해주세요.

let str = "java";
str = "javascript";

str이라는 변수에 처음엔 자바라는 값을 주었습니다. 그리고 밑에는 자바스크립트라고 바꾸었습니다. 이건 다 변수에 다른 값을 대입해서 변수의 값을 바꾸는 것이었습니다. 저기서 str[0]이라고 입력하면 j를 반환합니다.(str[0]은 str의 값 중에서 가장 첫번째 문자를 반환하라는 것입니다.) 그렇다면 str[0] = "z";를 통해서 수정하고 다시 str값을 확인하면 어떻게 될까요? zavascript가 아니라 아직도 javascript라는 값을 반환하고 있습니다. 바뀌지 않았죠?(immutable) 그리고 원시 타입은 복사나 전달 시에 값 자체를 복사 또는 전달하게 됩니다. 값을 전달하니 사본의 값이 따라서 바뀌는게 없는 것입니다. 

1. 원시 타입은 불변성이라는 특징을 가지고 있습니다.

2. 복사/전달 시에 값 자체를 복사 또는 전달합니다.

위의 두 가지 특징을 잘 기억해 두세요. 

원시 타입의 종류

---

우선은 숫자와 문자열에 대해서 알아보도록 하겠습니다.

 let num = 12345; 라고 콘솔창에 입력하면 num에 12345라는 값이 담기게 됩니다. 그리고 문자열은 변수에 넣을 때 ""(큰따옴표)이나 ''(작음 따옴표)안에 값을 넣으시면 됩니다.  

let age = "20";

숫자라도 따옴표 안에 넣는다면 문자열이 됩니다. 이 부분을 주의해주세요. 20과 "20"은 다르다는 것을요. 하지만 자바스크립트는 너무 자유로워서 상황에 맞게 문자를 숫자로, 숫자를 문자로 바꾸기도 합니다. 

3 + age // 320이 나옴
3 * age // 60이 나옴

age는 문자지만 숫자로 변경될 때도 있습니다. 이런 부분을 조심해주세요.

문자열에 대해서 더 알아보겠습니다. 문자열은 결합이 가능합니다. 3 + age는 3이 문자로 바뀌어서 결합이 일어난 형태입니다. 그래서 320이라는 결과가 나온 것이죠.

let a = "java";
let b = "script";
let c = a + b;
c;

c의 값은 예상대로 javascript가 나옵니다. 이제 단어가 아니라 문장을 합쳐 보도록 하겠습니다. 변수에 블로그라는 단어를 넣고 그 변수를 이용해서 "나는 블로그를 운영하고 있다"라는 문장을 다른 변수에 넣어보도록 하겠습니다.  

let lemon = "blog";
let candy = "나는 " + lemon + "를 운영하고 있다.";

candy에 담긴 값을 확인하면 "나는 blog를 운영하고 있다"라고 나옵니다. 다른 문자열들을 만들어서 한번 조합해 보세요. 그리고 새로워진 문법(es6)를 통해 이런 방법말고도 문자열을 합치는 새로운 방법이 생겼습니다. 바로 문자열 템플릿이라는 기능입니다. 문자열 템플릿은 `을 이용합니다.

`(backtick-백틱)은 grave accent mark라고 부르기도 합니다. 보통 esc키와 tab키 사이에 물결표와 같이 있습니다.  

let hello = "blog";
let world = `나는 ${hello}를 운영하고 있다.`;

world의 값을 확인해보세요. "나는 blog를 운영하고 있다"라는 값이 맞나요? 

이제 불리언(boolean)을 공부해 볼까요?

불리언은 true나 false값을 가지고 있습니다. 이 두가지 값은 조건문에서 큰 역할을 합니다. 조건이 참인지 거짓인지에 따라서 조건문이 실행되거나 실행되지 않게 만들 수 있기 때문입니다. 

불린은 오직 값으로 true나 false만 가지고 있습니다.

그냥 값으로 true나 false를 주면 됩니다. 소스코드를 통해서 연습해보겠습니다. 

let t = true;
let f = false;

t에는 true를 담고, f에는 false를 담았습니다. 둘다 따옴표가 없다는 것을 기억해주세요. 따옴표 사이에 값을 넣으면 문자열로 인식하게 됩니다. 타입에 관한 설명이 끝나고 값을 비교할 때 불리언에 대한 자세한 예제들을 다뤄보도록 하겠습니다.

다음 포스팅에서 계속 나머지 원시타입을 알아보도록 하겠습니다.

공감은 제작자에게 큰 힘이 됩니다.