[Javascript] 자바스크립트의 자료형

자바스크립트의 변수 선언 방법을 알아보았으니 자료형을 다룰시간입니다.

다른언어를 배웠다면 정수형은 int, 문자열은 string으로 선언하고 그에 해당하는 데이터 값만 넣을 수 있었으나 자바스크립트에서는 조금 더 유연한 변수 공간을 지원합니다.

 

이말은 즉, 자바스크립트는 변수에 저장하는 값에 따라서 자료형이나 크기가 알아서 변환됩니다. 

---

0. 자바스크립트의 데이터형

자바스크립트가 지원하는 데이터형은 다음과 같이 정리할 수 있습니다.

기본형	숫자형
	문자열형
	논리형
	심볼형
	특수형
참조형	배열
	객체
	함수

기본형은 변수에 값을 저장할 때 값 자체가 변수에 저장되는 자료형이고

참조형은 값을 가지고 있는 메모리의 주솟값을 저장하는 자료형이라는 차이점이 있습니다.

 

이 중에서 배열, 객체, 함수, ES6에서 새로 생긴 심볼형,는 별개의 포스트로 분리하고 숫자형, 문자열형, 논리형, 특수형 네가지 기본중의 기본 자료형만 다루겠습니다.

 

 

1. 논리형 Boolean

논리형은 true또는 false를 저장하는 자료형입니다. 변수에 직접 true/false를 넣어도 되고 Boolean 메소드를 이용해서 참거짓을 판별하는 식 등을 넣으면 됩니다.

Boolean(): ()의 내용이나 식의 참거짓 여부에 따라 true(1), 혹은 false(0)를 반환하는 메소드

let flag1 = true;
let flag2 = Boolean(1);
let flag3 = Boolean(1 < -4);

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

 

논리형 true/false 이외에도 논리형은 아니지만 true와 false값으로 인정하는 경우가 있는데 다음과 같은 경우입니다.

true: 1

false: 0, ''(빈 문자열), NaN(숫자가 아니다.Not a Number), null, undefined

 

2. 숫자형 Number

숫자형은 음수, 양수, 정수, 소수, n진수 등의 숫자 값을 넣을 수 있는 자료형입니다.

기본적인 10진수뿐만 아니라 2, 8, 16진수도 입력이 가능한데 각각 숫자 앞에 2진수는 0b, 8진수는 0o, 16진수는 0x를 붙이고 숫자를 입력하면 됩니다. 만약 사용가능한 문자 범위를 벗어나면 에러가 발생하게됩니다.

또한 소수 표현에서 지수 e가 들어가는 수의 저장도 가능합니다.

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);

결과값을 보면 2번째 number2에 입력을 16진수(0x3A5F)를 입력했으나 10진수14943이 나왔습니다. 기본 출력으로는 n진수를 자동으로 10진수로 변환해주는데 16진수를 그대로 출력하고싶다면 출력을 다음과 같이 고칩니다.

let number2 = 0x3A5F;

console.log(number2.toString(16));	//결과: 3a5f

toString()이라는 메소드가 나왔는데 여기서는 일단 그런게 있구나 하고 넘어가고 나중에 설명하겠습니다.

 

 

3. 문자열형 String

문자열형은 문자나, 문자열(문장혹은 단어)을 저장하는 변수입니다. 변수를 큰따옴표(")나 작은 따옴표(')로 감싸서 표현합니다.

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와 '1004'는 자바스크립트에서 전혀 다른 값으로 인식한다는 것입니다.

또 다른 재밌는 점은 str4처럼 문자열형에 html 태그를 삽입하면 태그로 인식이된다는 것입니다. 결과 사진은 콘솔창이기때문에 <h1>태그가 그대로 노출된 것이고 실제로 적용하면 <h1>태그의 모습이 적용된 채로 출력됩니다.

 

 

 

덧붙여 문자열 내부에 따옴표 등의 특수문자가 들어갈때는 문자열을 감싼 따옴표와 다른 종류를 사용해야합니다.

let str = 'I'll be back';	//이 문장은 오류!
let str = "I'll be back";	//따옴표의 종류를 달리해야합니다.

let str = '민수가 말했다. "안녕!"'	//이렇게요

 

만약 따옴표 종류를 통일시키고 싶다면 이스케이프 문자(\ 혹은 다른 키보드에는 \)를 이용해야하는데 이스케이프 문자란 특수한 의미를 가진 문자를 의미합니다. 자바스크립트에서 자주 사용되는 이스케이프 문자는 다음과 같습니다.

이스케이프 문자	효과
\', \"	각각 작은 따옴표와 큰 따옴표를 출력합니다.
\\	＼문자 출력
\b	백 스페이스
\f	새 페이지
\n	개행(=엔터)
\r	복귀
\t	탭

let str = 'I\'ll be back';

 

 

 

4. 특수형 null과 undefined

특수형에는 null과 undefined가 있습니다. null은 아무것도 없이 비어있는 상태를 의미하고 undefined는 변수의 값이 정의되어있지 않았다 라는 상태입니다. 두가지가 비슷해보이지만 완전히 다른 상태입니다.

 

undefined는 처음에 변수 정의를 하다보면 생각보다 자주 마주치는데 보통 다음 세가지 경우에서 나타납니다.

1. 변수가 선언되었지만 값이 저장되지 않았을 때

2. 미정의된 프로퍼티(객체의 상태나 값)를 참조할 때

3. 함수에서 값이 반환되지 않았을 때

 

말로만 하니 복잡한데 다음과 같은 상황에서 undefined가 발생한다고 보시면 쉬울 것 같습니다.

let a;

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

 

null은 보통 변수를 비우거나 이 변수는 비어있음을 표현할때 이용합니다.

let a = null;

 

 

 

5. 배열

지금은 배열의 선언방법만 간단하게 알아보고 넘어가겠습니다.

배열은 데이터의 집합으로 변수에 하나의 값이 아닌 한 개 이상의 값을 저장할 때 이용합니다.

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

2021/03/02 - [Programming/Javascript] - [Javascript] 배열

배열에 대한 설명은 링크에 자세히 되어있습니다.

 

6. 연관 배열

연관 배열은 객체라고도 하며 다음과 같이 선언합니다.

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

2021/02/17 - [Programming/Javascript] - [Javascript] 반복문 3 - for~in

위의 0번에 연관 배열에 대한 설명이 있으니 참조하시길 바랍니다.

 

 

 

7. 함수

자바스크립트는 함수도 변수에 담길 수 있기에 다양한 용도로 쓰입니다.

let func = function(param){}

2021/02/24 - [Programming/Javascript] - [Javascript] 사용자 정의 함수 3 - 함수 리터럴 (익명 함수)

위 링크에 함수를 담는 변수에 대한 설명이 있으므로 참조하시길 바랍니다.