자바스크립트 자료형 종류 및 사용 예시

자바스크립트는 다른 종류의 프로그래밍 언어와 마찬가지로 다양한 자료형을 제공하고 있습니다. 자료형은 데이터를 표현하는 방법입니다. 그럼 자바스크립트에서 지원하는 다양한 자료형과 각각의 특징에 대해 알아보겠습니다.

▼ 자바스크립트에서 지원하는 자료형

자료형	설명
숫자(Number)	자연수, 음의 정수, 소수 등의 숫자를 표현합니다.
문자열(String)	문자열을 표현합니다. 작은 따움표(‘), 큰따움표(“), 백틱(`)로 묶어서 표기 합니다.
논리형(Boolean)	참(True)과 거짓(False) 두 가지 값을 표현합니다.
undefined	값이 할당되지 않은 변수를 의미합니다.
null	값이 존재하지 않음을 나타냅니다.
객체(Object)	여러 개의 속성과 값을 포함할 수 있는 복합적인 자료형입니다.
배열(Array)	여러 개의 값을 순서대로 저장할 수 있는 자료형입니다.
함수(Function)	코드의 블록을 포함하고 블록을 실행하기 위한 매개변수를 받을 수 있는 자료형입니다.
날짜(Date)	날짜와 시간 정보를 저장하는 자료형입니다.

☞ 이외에도 정규식(RegExp), 맵(Map), 셋(Set), 심볼(Symbol) 등의 자료형도 지원합니다.

1. 숫자(Number)

숫자 자료형은 자연수, 음의 정수, 소수 등의 숫자를 표현합니다. 자바스크립트에서는 실수를 “부동소수점” 방식으로 숫자를 표현합니다.

let num1 = 10;
let num2 = -5;
let num3 = 0.1;
console.log(num1);  // 10 출력
console.log(num2);  // -5 출력
console.log(num3);  // 0.1 출력


// 부동소수점 방식으로 실수를 표현하기 때문에 코드를 작성할때 주의해야 됩니다.
let num4 = 0.1 + 0.2;
console.log(num4);  // 0.30000000000000004 출력

2. 문자열(String)

자바스크립트에서 문자열을 표현하는 방법으로는 작은따옴표(”)나 큰따옴표(“”)를 사용하는 방법과 ES6에서 추가된 템플릿 문자열(Template String)을 사용하는 방법이 있습니다. 템플릿 문자열을 사용할 때는 백틱(`)을 사용하여 문자열을 감싸고, ${}를 사용하여 변수나 표현식을 문자열 안에 삽입할 수 있습니다. 결과적으로 백티(`)를 사용하여 문자열을 감싸면 됩니다.

let str1 = 'Hello, world!';     // 작은따옴표로 문자열 표현
let str2 = "Hello, world!";     // 큰따옴표로 문자열 표현
let str3 = `Hello, world!`;     // 템플릿로 문자열 표현
console.log(str1);
console.log(str2);
console.log(str3);

// 문자열 연결은 + 기호를 사용합니다.
let str4 = "Hello, world, " + 'Blue Shre';
console.log(str4);   // Hello, world, Blue Shre 출력

// 템플릿로 문자열 표현 사용 예시입니다.
let str5 = `"Hello, world", 'Blue Shre'`;
console.log(str5);   // "Hello, world", 'Blue Shre' 출력

let str6 = "BlueShare";
let str7 = `${str6} 블로그 입니다.`;
console.log(str7);   // BlueShare 블로그 입니다. 출력

3. 논리형(Boolean)

논리형 자료형은 참(True)과 거짓(False) 두 가지 값을 표현합니다.

let bool1 = true;
let bool2 = false;
console.log(bool1);     // true
console.log(bool2);     // false

let bool3 = 1 < 2;
let bool4 = 1 > 2;
console.log(bool3);     // true
console.log(bool4);     // false

4. undefined

undefined는 값이 할당되지 않은 변수를 의미합니다.

let x;
console.log(x);     // undefined

5. null

null은 값이 존재하지 않음을 나타냅니다.

let x = null;
console.log(x);     // null

6. 객체(Object)

객체 자료형은 여러 개의 속성과 값을 포함할 수 있는 복합적인 자료형입니다. 객체는 중괄호({})로 감싼 속성과 값의 쌍(key-value pair)으로 이루어져 있습니다. 자바스크립트에서 객체는 핵심적인 자료형입니다. 객체에 대한 이해가 있어야 자바스크립트에서 다양한 웹 프로그래밍 기능을 구현할 수 있습니다.

let blog = {             // 객체 선언
    name: 'BlueShare',     // name 속성에 'BlueShare' 값을 대입
    age: 20,               // age 속성에 20 값을 대입
    gender: 'man'          // gender 속성에 'man' 값을 대입
};
console.log(blog.name);     // BlueShare 출력
console.log(blog.age);      // 20 출력
console.log(blog.gender);   // man 출력

7. 배열(Array)

배열 자료형은 여러 개의 값을 순서대로 저장할 수 있는 자료형입니다. 배열은 대괄호([])로 감싼 값들의 목록으로 이루어져 있습니다.

let arr1 = [1, 2, 3, 4, 5];                  // 배열 선언
let arr2 = ['apple', 'banana', 'orange'];    // 문자열 배열 선언

// 배열은 인덱스 0부터 시작합니다.
console.log(arr1[0]);   // 1 출력
console.log(arr2[2]);   // orange 출력

8. 함수(Function)

함수 자료형은 코드의 블록을 포함하고 블록을 실행하기 위한 매개변수를 받을 수 있는 자료형입니다. 함수는 function 예약어를 사용하여 선언합니다.

function add(x, y) {      // x, y 매개변수를 받는 함수
    return x + y;           // x와 y를 더한 결과를 반환하는 함수
}

let z = add(2, 3);
console.log(z);     // 5 출력

9. 날짜(Date)

날짜 자료형은 날짜와 시간 정보를 저장하는 자료형입니다. 자바스크립트에서는 Date 객체를 사용하여 날짜와 시간을 표현합니다.

let today = new Date();    // 현재 날짜와 시간 정보를 포함하는 Date 객체 생성
console.log(today);     // Fri Mar 03 2023 01:15:58 GMT+0900 (한국 표준시) 출력

이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!