[JavaScript] 자바스크립트의 데이터 타입(DataType)에 대하여

특이하게도 자바스크립트는 타 프로그래밍 언어와는 달리 변수를 선언할 때 데이터타입을 명시적으로 지정하지 않습니다. 자바스크립트(JavaScript)는 동적 타입 언어로써 변수를 선언할 때 변수에 할당된 값에 따라 동적으로 데이터 타입이 자동으로 결정되기 때문입니다. 이렇게 동적으로 데이터 타입을 지정하기 때문에 엄연히 자바스크립트에도 데이터 타입이 존재합니다. 이번 포스팅에서는 자바스크립트의 데이터 타입(DataType)에 대해 알아보도록 하겠습니다.

 

※ 변수를 선언자 var, let, const에 대해서 궁금하시다면 아래 글을 참고해 주세요.

[JavaScript] 변수 선언자 var, let, const의 차이점과 사용법

 

 데이터타입 종류 

자바스크립트의 데이터 타입은 크게 기본 데이터 타입(Primitive Types)과 참조 데이터 타입(Object Types)으로 나뉩니다.

 

기본 데이터 타입 (Primitive Types)

• 문자열 (String)
• 숫자 (Number)
• 불린값 (Boolean)
• undefined
• null
• Symbol (ES6에서 추가된 새로운 데이터 타입)

 

참조 데이터 타입 (Object Types)

• 객체 (Object)
• 배열 (Array)
• 함수 (Function)
• 날짜 (Date)
• 기타 등등(Set, Map, WeakSet, WeakMap...)

 

기본 데이터 타입 : 값을 저장하고 있는 위치가 메모리의 주소값이 가리키는 곳에 직접 할당되어 있습니다.
참조 데이터 타입 : 값이 저장되어 있는 메모리 주소값을 참조하는 주소 값이 할당되어 있습니다.

 

---

 

 기본 데이터 타입 

문자열(String)

let str1 = "이 문자열은 큰따옴표로 정의되었습니다.";
let str2 = '이 문자열은 작은따옴표로 정의되었습니다.';
let str3 = "큰따옴표 안에 '작은따옴표'를 사용한 문자열";
let str4 = '작은따옴표 안에 "큰따옴표"를 사용한 문자열';
let str5 = "큰따옴표 안에 \"큰따옴표\"를 사용한 문자열";
let str6 = '큰따옴표 안에 \'작은따옴표\'를 사용한 문자열';

자바스크립트에서는 큰따옴표나 작은따옴표로 값을 감싸면 문자열로 인식합니다. 참고로 큰 따옴표로 시작했으면 큰 따옴표는 문자열 끝에만 사용할 수 있습니다. 강제로 따옴표를 찍으려면 앞에 역슬러쉬\를 추가해주셔야 합니다. 또한 자바스크립트에서는 다른 프로그래밍 언어와는 달리 문자 하나만을 저장하는 char 타입은 존재하지 않고 문자열의 길이에는 상관없이 모두 string 타입으로 생성됩니다.

 

숫자타입(Number)

let num1 = 10;           //양의 정수
let num2 = -10;          //음의 정수
let num3 = 10 + 20;      //산술연산

let floatNum = 3.14;     //실수형
let infinity = Infinity; //무한대
let nan = NaN;           //부적절한 숫자값

let hexadecimal = 0x10;  // 16진수
let octal= 0o10;         // 8진수
let binary = 0b10;       // 2진수

int, long, float, double과 같이 다양한 숫자형 타입이 존재하는 다른 프로그래밍 언어들과는 달리 자바스크립트에서는 Number라는 단 하나의 숫자 타입만 존재하며 이 Number Type에서 정수와 부동 소수점까지 모두 지원합니다. 그래서 숫자 연산을 할 때는 모든 숫자를 실수로 처리하기 때문에 나누기 연산을 할 경우 소수점까지 출력하므로 이 부분 유의하셔야 합니다.

 

불린값 (Boolean)

let isTrue = true;   //참
let isFalse = false; //거짓

let and = isTrue && isFalse;    // false
let or = isTrue || isFalse;     // true
let not = !isTrue;              // false
        
let equal = isTrue == isFalse;         // true (값만 비교)
let strictEqual = isTrue === isFalse;  // false (값과 타입 비교)

자바스크립트에서는 논리값인 true와 false를 저장하는 불린 타입이 존재합니다. 주로 조건문이나 flag값으로 많이 활용됩니다.

 

undefined

let variable;

undefined는 자바스크립트에서 사용되는 특별한 값으로, 변수는 선언되었지만 값이 없음을 나타냅니다. 변수를 초기화하지 않거나, 함수에서 반환값을 명시적으로 지정하지 않은 등 다양한 상황에서 undefined로 값이 초기화될 수 있겠습니다. 참고로 undefined는 자바스크립트 엔진에 의해 자동으로 할당되는 값입니다. 시스템에서 사용하는 예약어이기 때문에 프로그래머는 직접적으로 undefined로 초기화하지 않는 것이 좋습니다. 그래야 시스템에서 내는 문제인지를 바로 알 수 있겠죠.

 

null

let variable = null;

undefined가 자바스크립트 엔진에서 값이 할당되지 않았을 때 사용되는 값이었다면 null은 개발자가 명시적으로 값이 없음을 나타내기 위해 사용됩니다.

 

Symbol

let symbol1 = Symbol('Symbol');
let symbol2 = Symbol('Symbol');

console.log(symbol1);  // false
console.log(symbol2);  // false
console.log(symbol1 === symbol2);  // false

Symbol은 ES6(ES2015)에서 도입된 새로운 기본 데이터 타입 중 하나로, 고유하고 변경 불가능한 값을 나타냅니다. 충돌 위험이 없는 고유한 프로퍼티를 만들기 위한 목적으로 사용됩니다.

 

 

 참조 데이터 타입 

객체 (Object)

let person = {
    name: 'John',
    age: 30
};

console.log(person);
console.log(person.name);
console.log(person.age);

객체는 키-값 쌍의 집합으로, 내부에 다양한 데이터 타입을 포함할 수 있습니다. 객체는 중괄호 {}를 사용하여 생성하시면 되고, 프로퍼티에 접근할 때는 점 표기법 또는 대괄호 표기법을 사용합니다. 참고로 위에서 설명한 String이나 Number와 같은 기본 데이터타입 이외의 모든 참조 데이터 타입(Object, Array, Date...)은 모두 객체 Object로 간주합니다.

 

배열 (Array)

let array1 = [1, 2, 3, 4, 5];  // 하나의 데이터 타입을 가지는 배열
let array2 = [1, 'two', true, { key: 'value' }]; // 여러 데이터 타입의 요소를 포함한 배열

console.log(array1);
console.log(array2);

배열은 여러 값을 순서대로 저장하는 자료구조로, 대괄호 []를 사용하여 생성하며, 각 요소는 쉼표, 로 구분됩니다. 내부에는 하나의 데이터타입이 아닌 여러 개의 데이터 타입을 가지고 있을 수도 있습니다.

 

함수 (Function)

// 함수를 변수에 할당
let sayHello = function() {
    console.log('Hello, world!');
};

// 변수를 사용하여 함수 호출
sayHello();  // 출력: Hello, world!

자바스크립트에서 함수는 "First-class citizens"로 분류됩니다. 이것은 함수가 변수에 할당될 수 있고, 매개변수로도 전달되며, 반환값으로도 사용될 수 있음을 뜻합니다. 따라서 함수도 데이터 타입 중 하나로 간주됩니다.

 

날짜 (Date)

let currentDate = new Date(); // 현재 날짜와 시간
console.log(currentDate);

자바스크립트에서 날짜(Date)는 날짜와 시간을 다루는 객체입니다. Date 객체는 내장된 생성자로서 다양한 날짜와 시간 기능을 제공합니다.

 

---

 

 데이터 타입 확인 - typeof 연산자 

console.log(`${typeof 42}`);                      // number
console.log(`${typeof NaN}`);                     // number
console.log(`${typeof 'Hello'}`);                 // string
console.log(`${typeof true}`);                    // boolean
console.log(`${typeof { key: 'value' }}`);        // object
console.log(`${typeof new Object()}`);            // object
console.log(`${typeof [1, 2, 3]}`);               // object
console.log(`${typeof new Array()}`);             // object
console.log(`${typeof undefined}`);               // undefined
console.log(`${typeof undefined}`);               // undefined
console.log(`${typeof null}`);                    // object

위와 같이 자바스크립트는 데이터타입을 명시하지도 않고, 실행 중에 계속해서 변할 수도 있어 현재 어떤 데이터 타입을 가지고 있는 변수인지 판단하기 어려울 때도 있습니다. 이럴 때는 typeof 연산자를 활용해서 현재 변수가 어떤 데이터타입을 가지고 있는지 정확히 확인할 수 있습니다.