WeniVooks

검색

JavaScript 에센셜

자료형이란?

1. 자료형이란?

자료형은 프로그램에서 사용하는 값의 종류를 의미합니다. 컴퓨터 프로그램은 숫자, 문자 등 다양한 값을 사용하는데, 이러한 값들을 구분하기 위해 자료형(Type) 이라는 개념을 사용합니다.

변수나 상수에 할당되는 값의 종류를 나타내고, 해당 값에 따라 수행할 수 있는 연산이나 메서드를 결정합니다. 예를 들어 1234는 숫자 자료형(Number), Hello World는 문자 자료형(String)을 나타냅니다.


자료형? 타입?
자료형은 타입(Type) 또는 데이터 타입(Data Type) 이라고도 불리며, 학습 자료마다 다양한 표현으로 사용될 수 있습니다.
표현은 다르지만 모두 같은 의미로, 데이터의 종류를 구분하는 분류 방식을 말합니다.

2. 타입의 종류

자바스크립트의 데이터 타입은 크게 원시 타입(Primitive Types)와 객체 타입(Object Types)로 나눌 수 있습니다.

2.1 원시타입

원시타입은 가장 기본적인 데이터 타입으로, 단일 값을 저장합니다.

  1. 문자열 (String)
    텍스트 데이터를 나타냅니다.

    let name = 'licat';
    let name = 'licat';

  2. 숫자 (Number)
    정수와 실수를 포함하는 숫자 타입입니다.

    let age = 25;
let height = 167.8;
    let age = 25;
let height = 167.8;

  3. 불리언 (Boolean)
    참(true) 또는 거짓(false)의 논리값을 나타냅니다.

    let isStudent = true;
    let isStudent = true;

  4. undefined
    값이 할당되지 않은 변수가 가지는 기본값입니다.

    let value;
    let value;

  5. null
    의도적으로 값이 비어있음을 나타냅니다.

    let emptyValue = null;
    let emptyValue = null;

  6. 심볼 (Symbol)
    고유하고 변경 불가능한 값을 나타냅니다.

    let uniqueId = Symbol('id');
    let uniqueId = Symbol('id');

  7. BigInt
    숫자 타입의 범위를 넘어서는 큰 정수를 다룰 수 있습니다.

    let bigNum = 12345678901234567890n;
    let bigNum = 12345678901234567890n;
2.2 객체타입

객체 타입은 여러 값을 저장할 수 있는 타입을 나타냅니다.

  1. 객체 (Object)
    키-값 쌍의 집합을 나타냅니다.

    const user = {
  name: 'licat',
  age: 30,
};
    const user = {
  name: 'licat',
  age: 30,
};

  2. 배열 (Array)
    순서가 있는 값의 집합을 나타냅니다.

    let fruits = ['사과', '바나나', '오렌지'];
    let fruits = ['사과', '바나나', '오렌지'];

  3. 함수 (Function)
    실행 가능한 코드 블록을 정의합니다.

    function greet() {
  console.log('Hello, world!');
}
    function greet() {
  console.log('Hello, world!');
}

  4. 기타 객체 날짜(Date), 정규표현식(RegExp), Map과 Set 등이 있습니다.

    let toady = new Date();
let pattern = /^[0-9]+$/;
    let toady = new Date();
let pattern = /^[0-9]+$/;

원시타입은 한 번 설정되면 변경되지 않는 단순한 값들을 저장하는 반면, 참조타입은 더 복잡한 데이터 구조를 저장하며, 객체, 배열, 함수 등이 포함됩니다.

3. 타입 확인하기

3.1 타입의 중요성

자바스크립트에서 타입은 값이 어떻게 동작할지를 결정하는 핵심 요소입니다. 예를 들어, +는 피연산자의 타입에 따라 다른 동작을 합니다.

let a = 20; let b = '20'; console.log(a + 1); console.log(b + 1);

이처럼 타입은 프로그램의 동작을 결정하는 중요한 역할을 하며, 값을 해석하고 처리하는 방식을 결정합니다.

3.2 동적 타입 언어

자바스크립트는 동적 타입 언어 입니다. 변수 자체에 타입이 고정되지 않고, 변수에 할당된 값에 따라 타입이 결정됩니다. 따라서 하나의 변수는 실행 중에 다양한 타입을 가질 수 있습니다.

let data = 20;
console.log(typeof data);

data = 'Hello World';
console.log(typeof data);
let data = 20;
console.log(typeof data);

data = 'Hello World';
console.log(typeof data);

동적 타입(Dynamic Typing)과 정적 타입(Static Typing)
자바스크립트와 같은 동적 타입 언어는 변수가 선언될 때 타입이 결정되지 않고, 실행 시점에 할당된 값에 따라서 타입이 결정됩니다. 반면, C, Java와 같은 정적 타입 언어는 변수 선언 시에 타입을 명시해야 하며, 이후 다른 타입의 값을 할당할 수 없습니다.

let name = 'weniv';
name = 23;
let name = 'weniv';
name = 23;
int age = 20;
age = 'Hello'; // 오류 발생
int age = 20;
age = 'Hello'; // 오류 발생
3.3 타입을 확인하는 방법
3.3.1 typeof

자바스크립트에서 타입을 확인하는 가장 간단한 방법은 typeof 연산자입니다.

console.log(typeof "Hello"); // "string" console.log(typeof 42); // "number" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" console.log(typeof {}); // "object" console.log(typeof []); // "object" console.log(typeof function(){}); // "function"

typeof를 사용하면 원시 타입인 null과 배열과 같은 자료형이 object로 반환됩니다. 이처럼 typeof는 타입을 확인하는 간단한 방법이지만 정확하지 않을 수 있습니다.

console.log(typeof null); console.log(typeof [1, 2, 3]);

typeof null은 왜 null이 아닌가요?
null은 원시 타입으로 '비어있는' 값을 나타냅니다. 하지만 null의 타입을 확인해보면 object를 반환합니다. 이는 자바스크립트의 초기 설계 오류로 ECMAScript 명세에서도 버그로 인정하고 있습니다. 그러나 자바스크립트에서는 웹 호환성을 위해 버그를 수정하지 않았습니다.

typeof - JavaScript | MDN
3.3.2 Object.prototype.toString.call

더 정밀한 타입 확인이 필요할 때는 Object.prototype.toString.call()을 사용합니다.

console.log(Object.prototype.toString.call(null)); console.log(Object.prototype.toString.call([1, 2, 3])); console.log(Object.prototype.toString.call({}));

타입 체크에 관한 더 자세한 내용은 다음 링크를 참고해주세요

type을 체크하는 여러가지 방법
3장 자료형3.2 원시타입