자바스크립트의 자료형은 다른 언어에 비해서 자유롭습니다. 다른 언어가 자료형마다 엄격한 표현 범위를 가졌다면, 자바스크립트는 변수에 저장되는 값에 따라 가변적으로 변하게됩니다.

자바스크립트 자료형

자바스크립트의 자료형은 다음과 같습니다.

기본형은 변수에 값을 저장할 때 값 자체가 변수에 저장되는 자료형입니다. 참조형은 변수에 값을 저장할 때 값을 가지고 있는 메모리의 주솟값을 저장하는 자료형입니다.

이 중에서 배열, 객체, 함수, 심볼형은 따로 다루고, 숫자, 문자열, 논리, 특수형의 네 가지만 우선적으로 다루겠습니다.

---

논리

논리형은 true, false를 저장하는 자료형입니다. 변수에 직접 true/false를 넣어도 되고, 식을 넣어서 참거짓을 판별하도록 하는 방식으로 값을 저장할 수 있습니다.

let flag1 = true;
let flag2 = Boolean(1);
let flag3 = Boolean(1 < -4);
//Boolean(): ()안의 내용의 참 거짓에 따라 true 혹은 false를 반환하는 메소드

console.log(flag1);	//결과: true
console.log(flag2);	//결과: true	
console.log(flag3);	//결과: false

truthy한 값과 falsy한 값

논리형 값 true/false 외에도, true/false로 간주하는 값이 있는데 이들을 각각 truthy, falsy한 값이라고 하며 이 값들은 다음과 같습니다.

• truthy한 값: 0 이외의 정수, 문자열, 객체, 빈 객체{}, 빈 배열[]
• falsy한 값: 0, ''(빈 문자열), NaN, null, undefined

---

숫자

숫자형은 정수, 소수, n진수 등의 숫자 값을 넣을 수 있는 자료형입니다.
일반적으로는 10진수를 넣지만 다른 진수의 수를 넣을 수 있는데, 표기 방식이 다릅니다.

• 2진수: 0b~
• 8진수: 0o~
• 16진수: 0x~

let number1 = 1004;
let number2 = 0x3A5F;
let number3 = 0.7134;
let number4 = -1.04;

console.log(number1);
console.log(number2);
console.log(number3);
console.log(number4);

number2는 분명 16진수 3A5F였는데, 다른 값이 나왔습니다. 이것은 다른 값이 나온 것은 아니고, 출력할 때 자동적으로 10진수로 변환되어서 출력이 된 것 입니다. 그대로 16진수로 나오게 하고 싶다면 내장 객체를 이용해야합니다.

---

문자열

문자열형은 문자, 문자열을 저장하는 변수입니다. 변수 값을 큰 따옴표나 작은 따옴표로 감싸서 표현할 수 있습니다.

let str1 = 'Hello, world!';
let str2 = '1004';
let str3 = 'B';
let str4 = '<h1>html</h1>';

console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);

str2 처럼 숫자도 따옴표로 감싸주기만 하면 문자열 형이됩니다. 이때 숫자 1004와 문자열 '1004'는 전혀 다른 값으로 인식됩니다.

또 주의해야할 점은 str4의 태그인데, 자바스크립트에서 문자열에 html 태그를 입력하면 태그로 인식됩니다. 그래서 OUTPUT에서는 태그가 적용된 모습으로 보이게됩니다. 위의 결과창은 콘솔창이기때문에 태그 적용없이 그대로 문자열로 나타난 모습입니다. 이것을 실제로 로드하게 되면 <h1>태그가 적용 된 문자열로 보입니다.

---

이스케이프 문자

문자열 내에서 따옴표를 사용하거나 어떤 효과를 주고싶으면 이스케이프 문자를 사용해야합니다. 물론 다른 종류의 따옴표를 사용하면 해결되지만, 이스케이프 문자를 사용하는 것이 더 좋은 방식입니다. 이스케이프 문자에는 여러가지 종류가 있는데, 자주 사용되는 것들은 다음과 같습니다.

이스케이프 문자	설명
\' \"	작은 따옴표, 큰 따옴표 출력
\	\문자 출력
\b	백스페이스
\n	개행
\r	복귀
\t	탭

---

특수형 null, undefined

특수형은 null과 undefined가 있습니다. null은 값이 아무것도 없는 비어있는 상태(0이나 ''과는 다릅니다)를 의미하고, undefined는 변수의 값이 정의되어있지 않다는 상태입니다. 두 값은 미묘한 차이를 가진 전혀 다른 값 입니다.

undefined는 보통 세 가지 경우에서 마주칠 수 있는 값 입니다.

• 변수가 선언되었으나, 값이 저장되지 않았을 때.
• 미정의된 프로퍼티(객체의 상태나 값)을 참조할 때.
• 함수에서 값이 반환되지 않았을 때.

let a;

console.log(a);	//변수는 선언되었지만 변수에 저장된 값이 없다! 결과: undefined

그리고 null은 변수를 비우거나, 비어있다고 표현할 때 사용되는 값 입니다.

---

이 다음으로 나오는 배열, 객체, 함수는 각각의 개별 포스트에서 깊게 배우겠습니다. 그냥 변수에 이런것을 할당할 수 있구나 정도만 하고 넘어가주세요.

배열

배열은 데이터의 집합으로 변수의 하나 이상의 값을 저장하려고 할 때 사용합니다.

let arr = ['고양이', '강아지', '다람쥐'];

---

객체

객체는 연관 배열이라고도 합니다. 배열과 다르게 중괄호{}로 생성합니다.

let obj = { cats: 3, dogs: 2, birds: 5 };

---

함수

자바스크립트는 함수를 변수에 담을 수 있다는 독특한 특징을 갖고 있는 언어입니다.

let func = function(param){}