자바스크립트 - 데이터 타입

Posted May 14, 2024 Updated May 15, 2024

By kimyih 16 min read

🔅 Javascript - 데이터 타입

자바스크립트에서 데이터 타입은 변수가 저장할 수 있는 값의 종류를 정의 합니다.
자바스크립트는 동적 타입 언어이므로, 변수의 데이터 타입은 프로그램 실행 중에 할당된 값에 따라 변경될 수 있습니다.

자바스크립트의 데이터 타입은 크게 두 가지 범주로 나뉩니다:
기본 타입(Primitive types) 과 참조 타입(Reference types).

❗️ 기본 타입(Primitive types)

자바스크립트의 기본 데이터 타입은 간단하고 명확한 값을 나타내며, 각 타입은 고유한 특성과 용도를 가지고 있습니다.

기본타입에는 Number,String,Boolean,Undefined,Null,Symbol,BigInt 이 있습니다.

먼저 간단하게 표로 특징들을 보여드리고 하나씩 더 자세하게 알아볼까요?

📍 기본타입

데이터 타입	설명
Number	모든 종류의 숫자를 나타내며, 정수 및 부동 소수점 숫자를 포함합니다.
String	문자열 데이터를 표현하며, 텍스트를 나타내는 데 사용됩니다.
Boolean	논리적인 값인 true와 false만을 가질 수 있습니다.
Undefined	변수에 값이 할당되지 않은 상태를 나타냅니다.
Null	‘없음’ 또는 ‘유효하지 않은 값’을 나타내는데 사용되며, 의도적으로 변수를 비워두기 위해 사용됩니다.
Symbol	고유하고 변경 불가능한 데이터 타입으로 주로 객체 속성의 식별자로 사용됩니다 (ES6 이후).
BigInt	매우 큰 정수를 표현할 수 있는 데이터 타입입니다 (ES2020 이후).

위에 내용들을 조금 더 자세하게 알아볼까요 ?

1. Number

📣 자바스크립트에서 모든 숫자, 즉 정수 및 소수점이 있는 숫자를 표현하는 타입입니다. 자바스크립트에서는 별도의 정수형 타입이 없으며, 모든 숫자를 부동 소수점 형태로 처리합니다.

예시

  
let integer = 10;    // 정수
let float = 3.14;    // 부동 소수점 숫자

2. String

📣 텍스트를 나타내는 데이터 타입으로, 문자열은 작은따옴표(‘ ‘), 큰따옴표(“ “) 또는 백틱( )으로 둘러싸여 있습니다.
문자열 내에서는 다양한 문자와 특수 문자를 포함할 수 있습니다.

예시

  
let greeting = "Hello, world!";   // 큰따옴표를 사용한 문자열
let name = 'John';                // 작은따옴표를 사용한 문자열
let message = `Welcome, ${name}`; // 백틱과 템플릿 리터럴을 사용한 문자열

3. Boolean

📣 논리적인 값을 나타내는 데이터 타입으로, true와 false 두 가지 값만을 가질 수 있습니다.
주로 조건문이나 반복문에서 조건을 평가하는 데 사용됩니다.

예시

  
let isStudent = true;   // 참을 나타냄
let isLoggedIn = false; // 거짓을 나타냄

4. Undefined

📣 변수에 값이 할당되지 않았을 때의 기본값입니다.
변수를 선언만 하고 값을 할당하지 않으면 자동으로 undefined가 됩니다.

예시

  
let something;
console.log(something); // 출력: undefined

5. Undefined

📣 ‘값이 없음’을 의도적으로 표현할 때 사용하는 데이터 타입입니다.
null은 개발자가 변수에 아무런 값이 없음을 명시적으로 지정할 때 사용합니다.

예시

  
let empty = null;
console.log(empty); // 출력: null

6. Symbol (ES6 이후)

📣 고유하고 변경 불가능한 원시 값으로, 주로 객체의 고유한 속성 키로 사용됩니다. 같은 설명의 심볼도 각각 별도로 취급됩니다.

예시

  
let sym1 = Symbol("id");
let sym2 = Symbol("id");
console.log(sym1 === sym2); // 출력: false, 심볼은 모두 고유합니다

7. BigInt (ES2020 이후)

📣 기존 Number 타입으로 표현할 수 없는 매우 큰 정수를 다룰 때 사용하는 데이터 타입입니다. 숫자 뒤에 n을 붙여서 표현합니다.

예시

  
let largeNumber = 1234567890123456789012345678901234567890n;
console.log(largeNumber); // 출력

❗️ 참조 타입 (Reference Types)

참조 타입은 메모리에 저장된 객체를 가리키는 참조를 통해 사용됩니다. 이러한 값은 변경 가능한 값입니다.
자바스크립트의 참조 타입에는 다음과 같은 타입들이 포함됩니다

기본타입에는 Object,Array,Function,Date,RegExp,Map and Set 이 있습니다.

이번에도 먼저 표를 이름과 특징을 보여드리겠습니다!

📍 참조타입

참조 타입	설명
Object	가장 기본적인 참조 타입으로, 키와 값으로 구성된 프로퍼티의 집합입니다.
Array	여러 개의 값을 순서대로 나열한 리스트 형태의 객체입니다.
Function	실행 가능한 코드 블록을 나타내며, 호출 가능한 객체입니다.
Date	날짜와 시간을 나타내는 객체입니다.
RegExp	정규 표현식 객체입니다.
Map and Set	ES6에서 도입된 새로운 컬렉션 타입입니다. Map은 키-값 쌍을 저장하고, Set은 중복 없는 값의 집합을 관리합니다.

위에 내용들을 조금 더 자세하게 알아볼까요 ?

1. Object

📣 자바스크립트에서 가장 기본이 되는 타입으로, 키-값 쌍의 컬렉션입니다.
객체 내에는 데이터와 함수를 포함할 수 있으며, 이를 각각 속성과 메소드라고 합니다

예시

  
let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // "Hello, my name is Alice" 출력

이 예에서 person 객체는 name과 age라는 프로퍼티를 가지며, greet이라는 메서드도 포함하고 있습니다.
greet 메서드가 호출되면, 객체의 name 프로퍼티를 사용하여 인사말을 출력합니다.

2. Array

📣 자바스크립트에서 배열은 순서가 있는 값의 리스트를 저장하는 데 사용됩니다.
배열의 각 요소는 인덱스로 접근할 수 있으며, 배열은 동적으로 크기가 조정됩니다.

예시

  
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // "Banana" 출력
fruits.push("Durian");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Durian"] 출력

fruits 배열에는 여러 과일 이름이 문자열로 저장되어 있습니다.
fruits[1]은 배열의 두 번째 요소에 접근합니다.
push 메서드를 사용하여 배열에 새로운 요소를 추가할 수 있습니다.

3. Function

📣 함수는 자바스크립트에서 중요한 구성 요소이며, 코드를 블록 단위로 구성하고 재사용할 수 있도록 합니다.
함수는 호출할 수 있는 객체입니다.

예시

  
function multiply(x, y) {
  return x * y;
}

let result = multiply(5, 3);
console.log(result); // 15 출력

multiply 함수는 두 숫자를 인자로 받아 그 곱을 반환합니다.
함수를 정의하고, 필요할 때 해당 함수를 호출하여 결과를 얻을 수 있습니다.

4. Date

📣 Date 객체는 날짜와 시간을 다루기 위해 사용됩니다.
날짜와 관련된 다양한 메서드를 제공하여 날짜 계산 및 포맷팅을 할 수 있습니다.

예시

  
let now = new Date();
console.log(now); // 현재 날짜 및 시간 출력

new Date() 생성자를 사용하여 현재 날짜와 시간을 나타내는 Date 객체를 생성합니다.
now 변수를 통해 접근하고 관련 메서드를 사용할 수 있습니다.

5. RegExp

📣 정규 표현식은 문자열에서 패턴을 검색하고 치환하는 데 사용됩니다.
복잡한 문자열 처리 작업에 유용하며, 검색, 검증, 추출 작업을 수행할 때 사용됩니다.

예시

  
let pattern = /ab+c/;
let result = pattern.test("abc");
console.log(result); // true 출력

/ab+c/ 패턴은 ‘a’ 뒤에 ‘b’가 하나 이상 있고, 그 뒤에 ‘c’가 오는 문자열과 일치합니다.
test 메서드는 주어진 문자열이 이 패턴에 맞는지를 검사합니다.

6. Map and Set

📣 Map: 키-값 쌍을 저장하는 컬렉션으로, 키에 대해 중복을 허용하지 않습니다. 객체와 달리, 키로 어떤 값이든 사용할 수 있습니다.

Set: 중복 없이 값들을 저장하는 컬렉션입니다.
각 요소는 유일하며, 주로 데이터의 중복을 제거하거나 요소의 존재 여부를 빠르게 검사할 때 사용됩니다.

예시

  
let map = new Map();
map.set('key1', 'value1');
console.log(map.get('key1')); // 'value1' 출력

let set = new Set();
set.add('apple');
set.add('banana');
set.add('apple');
console.log(set); // Set {'apple', 'banana'}

Map 객체에서는 set 메서드를 사용하여 새로운 키-값 쌍을 추가하고, get 메서드를 사용하여 키에 해당하는 값을 얻습니다.
Set 객체에서는 add 메서드를 사용하여 값을 추가합니다.
중복된 ‘apple’을 추가해도 중복을 허용하지 않기 때문에 한 번만 저장됩니다.

데이터 타입의 중요성

자바스크립트에서 데이터 타입은 메모리 관리, 성능 최적화, 버그 예방 등에 중요한 역할을 합니다.
올바른 데이터 타입의 사용은 코드의 명확성을 높이고, 예상치 못한 오류를 줄이는 데 도움을 줍니다.
데이터 타입을 이해하고 올바르게 사용하는 것은 자바스크립트 프로그래밍의 기초적이면서도 핵심적인 부분입니다.

정리

구분	기본 타입	참조 타입
데이터 저장	값이 직접 저장됩니다.	메모리 주소(참조)가 저장됩니다.
메모리 관리	스택 메모리에 저장되며, 관리가 비교적 간단합니다.	힙 메모리에 저장되며, 관리가 더 복잡합니다.
값 전달 방식	값이 복사되어 전달됩니다 (값에 의한 전달).	메모리 주소가 복사되어 전달됩니다 (참조에 의한 전달).
변경 가능성	불변성(Immutable): 생성된 후 변경할 수 없습니다.	가변성(Mutable): 생성된 후 내부 상태를 변경할 수 있습니다.
예시	`let a = 10; let b = a; b = 20; console.log(a); // 10 출력`	`let obj1 = { value: 10 }; let obj2 = obj1; obj2.value = 20; console.log(obj1.value); // 20 출력`
공통점	데이터를 저장하고, `typeof` 연산자로 타입을 확인할 수 있습니다.	데이터를 저장하고, `typeof` 연산자로 타입을 확인할 수 있습니다.

이렇게 자바스크립트에 기본타입과 참조타입에 대해 알아보았는데요!
다음에는 데이터 형 변환과, 불변성을 유지하기 위한 방법을 알아보도록 하겠습니다!👋

Javascript

This post is licensed under CC BY 4.0 by the author.