자바스크립트의 자료형은 다른 언어에 비해서 자유롭습니다. 다른 언어가 자료형마다 엄격한 표현 범위를 가졌다면, 자바스크립트는 변수에 저장되는 값에 따라 가변적으로 변하게됩니다.
자바스크립트 자료형
자바스크립트의 자료형은 다음과 같습니다.
기본형은 변수에 값을 저장할 때 값 자체가 변수에 저장되는 자료형입니다. 참조형은 변수에 값을 저장할 때 값을 가지고 있는 메모리의 주솟값을 저장하는 자료형입니다.
이 중에서 배열, 객체, 함수, 심볼형은 따로 다루고, 숫자, 문자열, 논리, 특수형의 네 가지만 우선적으로 다루겠습니다.
논리
논리형은 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); //결과: falsetruthy한 값과 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){}