[JS] 자료형 개요 (DataType)

* 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

 

자료형(DataType) 이란 컴퓨터가 처리하는 자료의 형태를 의미한다. JavaScript의 자료형은 크게 값이 하나인 "기본형"과 여러 개의 값을 담고 있는 "복합형"으로 구분할 수 있다. 복합형(배열, 객체)에 대해서는 추후에 자세하게 정리할 예정이다.

 

#1 typeof연산자

#2 기본형

2.1 숫자형_Number

2.2 문자열_String

템플릿문자열

2.3 불린형_Boolean

2.4 undefined&null

#3 복합형

3.1 배열_Array

3.2 객체_Object

---

#1 typeof연산자

JavaScript는 변수에 저장하는 값에 따라서 자료형이 자동으로 결정된다. 따라서 만약 변수가 어떤 자료형인지 알 고 싶을 때는 typeof 연산자를 사용하면 된다. JavaScript의 typeof 연산자는 다음과 같은 두 가지 형태의 문법을 제공한다.

1. typeof x
2. typeof(x)

 

#2 기본형

2.1 숫자형_Number

JavaScript에서 숫자는 정수와 실수로 나누어서 구분한다. 또한 정수를 표현 방법에 따라서 10진수, 8진수, 16진수로 나누어서 구분하기도 한다.

var num1 = 10;
var num2 = 10.0;
typeof num1;
typeof num2;

[출력결과] 'number' 'number'

위의 소스코드의 출력 결과를 보면 알 수 있듯이 JavaScript는 정수와 실수를 모두 number로 취급한다.

 

2.2 문자열_String

문자열은 작은따옴표(') 혹은 큰따옴표(")로 표현한다.

var str1 = "nov"; // 큰 따옴표로 묶음
var str2 = 'log'; // 작은 따옴표로 묶음
typeof str1;
typeof str2;

[출력결과] 'string' 'string'

 

만약 큰따옴표로 묶은 문자형 안에 큰따옴표로 묶은 문장을 넣고 싶다면 큰따옴표가 중복되지 않도록 안에 있는 문장의 큰따옴표를 작은따옴표로 바꿔 주어야 한다. * 참고로 document.write는 html 태그와 같이 사용할 수 있다.

document.write("<span class="num">", 2022, "</span>"); //error
document.write("<span class='num'>", 2022, "</span>"); //ok

[출력결과] 2022

 

템플릿 문자열

ES6버전 부터는 문자열은 따옴표 말고도 백 틱( ` ) 으로 묶을수도 있다. 백 틱은 그레이브(Grave) 혹은 백 쿼트(Back Quote) 라고도 부른다. * 참고로 백 틱의 위치는 물결(~)키에 존재한다.

표현식을 ${...}으로 감싸주고, 백 틱( ` )을 이용해 문자열을 묶어주면 문자열 안에 표현식을 쉽게 끼워 넣을 수 있다. 다음은 문자열을 백 틱( ` )으로 묶은 후 currentYear 변수를 끼워 넣은 예제 코드이다.

var currentYear = 2022;
document.write(`올해는 ${currentYear}입니다.`);

 

2.3 불린형_Boolean

불린형은 True와 False값 만을 표현하는 자료형이다. 주로 조건문에서 자주 사용된다.

var a = 10;
var b = 20;
var bIsBig = a < b;
typeof bIsBig;

'boolean'

 

2.4 undefined & null

JavaScript는 undefined와 null또한 하나의 자료형으로 취급한다. 두 자료형은 언뜻보면 비슷해 보이지만 확연한 차이점을 지니고 있다.

undefined는 "처음부터 변수에 값이 할당되지 않았다."는 의미이다. 아래와 같이 변수를 선언하고 아무런 값도 대입하지 않으면 자동으로 undefined값이 할당된다.

//변수에 아무런 값도 할당하지 않음
var unde;
typeof unde

[출력결과] 'undefined'

null은 "존재하지 않는, 비어 있는" 값을 나타낼 때 사용하는 자료형이다. 따라서 아래 코드처럼 선언해 주면 "currentYear의 값이 비어 있음"을 표현할 수 있다.

var currentYear = null;

* undefined도 null과 마찬가지로 변수에 직접 할당해 줄 수 있지만, 이는 권장되지 않는다. 변수의 값이 비어있음을 나타내기 위함이라면 null값을 사용하는 것이 바람직하다.

 

#3 복합형

3.1 배열_Array

배열을 이용하면 여러 개의 변수들을 하나의 자료형에 저장할 수 있다.

var _html = "html";
var _css  = "css";
var _js   = "js";

배열에 저장할 자료를 쉼표( , )로 구분해서 대괄호([ ])로 묶어주면 배열을 선언할 수 있다.

var language = ["html", "css", "js"];

배열 안의 값에 접근하고 싶다면 "인덱스"를 이용하면 된다. 배열 이름과 대괄호 안에 원소의 위치를 지정해 주면 해당하는 원소에 접근할 수 있다.

language[0];
language[2];

'html'
'js'

 

3.2 객체_Object

객체는 중괄호({ })로 묶어서 사용하며, 키(Key)와 값(Value)을 콜론(:)을 사용하여 한 쌍으로 짝지어서 표현한다. 객체 안의 원소에는 "객체이름.키"와 같이 접근할 수 있다.

var language = {
    _html: "html",
    _css : "css",
    _js  : "javascript"
}

language._js

'javascript'