[JS] 데이터타입

 

 

데이터타입은 왜 필요할까요?

 

2025.04.03 - [Javascript] - [JS] 자바스크립트 변수 정리 (let,const,var)

앞선 글에서 변수는 값을 저장하기 위한 메모리공간이라는 것을 설명했던 적이 있습니다.

 

그렇다면 숫자와 문자는 각각 필요한 메모리 크기가 다를텐데 컴퓨터는 이를 어떻게 구분하고 저장해야할까요?

 

 

컴퓨터는 0과 1로 이루어진 이진수만 이해할 수 있습니다.

 

만약 데이터 타입이 없다면 컴퓨터는 매우 혼란스러울 것입니다.

 

예를 들어 숫자 1과 문자 '1'은 전혀 다른 방식으로 저장되고, 사용하는 메모리 크기도 다릅니다.

 

이러한 혼란을 해결해 주기 위해 데이터 타입이 존재합니다.

 

정리하자면, 데이터 타입은 다음을 결정하기 위해 필요합니다.

 

1. 값을 저장할 때 메모리에 얼마나 공간을 할당할지,

2. 값을 참조할 때는 한번에 읽어들이는 메모리에 얼마만큼 공간을 할당해주어야할지,

3. 값을 해석할 때는 어떻게 해석하고, 아떻게 연산을 해야하는지

 

즉, 데이터 타입은 컴퓨터가 값을 일관되고 정확하게 저장,읽기,연산 할 수 있도록 돕기 때문에 필요합니다.

 

---

정적타이핑 VS 동적타이핑

데이터 타입이 왜 필요한지는 알았습니다. 

 

하지만 이 변수가 어떤 타입인지는 누가 결정할까요??

 

바로 여기서 프로그래밍 언어가 두가지 방식으로 갈립니다.

 

개발자가 직접 타입을 지정하면 "정적 타이핑",

 

컴퓨터가 알아서 정해주면 "동적 타이핑"입니다.

 

 

정적타이핑

 

정적타이핑은 변수를 선언할 때 값의 타입을 정하고, 컴파일 시점에 타입체크를 하여 타입오류를 잡아내는 방식으로 동작합니다.

 

대표적으로 C와 자바가 정적타이핑 언어이고, 타입스크립트롤 통해 정적 타이핑을 구현할 수 있습니다.

 

실행 전 미리 타입 오류를 발견할 수 있어서 안전하게 코드작성을 할 수 있습니다.

 

  

 

동적타이핑

 

코드가 실행될 때 프로그래밍 언어가 필요에 따라 타입을 결정하는 것입니다.

 

자바스크립트가 대표적인 동적타이핑 언어입니다.

 

타입을 신경쓰지 않아도되서 빠르게 개발하기 좋습니다.

 

 

---

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

 

자바스크립트의 데이터타입은 총 8가지이며 원시타입 7종, 참조타입 1종으로 분류됩니다.

 

데이터타입	구분	설명
문자 (String)	원시타입	문자열을 나타냅니다.
숫자 (Number)	원시타입	정수, 실수 구분없이 숫자를 나타냅니다
Bigint (Bigint)	원시타입	아주아주 큰 숫자를 나타낼때 사용합니다. 길이 제약없이 정수를 다룰 때 사용합니다.
논리 (Boolean)	원시타입	true/false값을 나타낼 때 사용합니다
null	원시타입	비어있는 값
undefined	원시타입	정의되지 않은 값
심볼 (Symbol)	원시타입	유일한 식별자를 만들고 싶을 때
객체 (Object)	참조타입	객체, 함수, 배열등

 

 

자바스크립트에는 데이터타입이 크게 원시타입과 참조타입으로 나뉩니다.

 

그런데 자바스크립트는 동적타이핑 언어인데 왜 타입을 나눠두었을까요 ??

 

그 이유는, 메모리 효율성 측면에서 나누어두었다라고 볼 수 있습니다.

 

먼저 원시타입은 값의 크기가 작고 불변적이며, 스택메모리에 저장되어, 

 

변수에 값을 할당하였을 때 값 자체가 복사됩니다.

 

반면 참조타입은 값의 크기가 비교적 크고 가변적이며, 힙메모리에 저장되어

 

변수에 값을 할당하였을 때 값 자체가 아닌 메모리 주소가 복사됩니다.

 

 

 

이렇게 변수에 값 자체가 할당되는 것을 값에 의한 전달,

 

메모리주소가 할당되는것을 참조에 의한 전달이라고합니다.

---

심벌타입

심볼타입은  ES6에 추가된 타입으로 다소 생소하게 느껴질 수 있는 타입입니다.

 

변경 불가능한 원시타입으로 보통 유일한 식별자를 만들 때 사용합니다.

 

심볼은 특이점이 있는데 같은 설명이라도, 서로 다른 값이라는 것입니다.

 

// 같은 설명('id')으로 두 개의 Symbol 생성
const id1 = Symbol('id');
const id2 = Symbol('id');

// 하지만 이 둘은 완전히 다른 값!
console.log(id1 === id2);  // false
console.log(id1 == id2);   // false


//문자열과 비교해볼까요?
const str1 = 'id';
const str2 = 'id';

console.log(str1 === str2);  // true - 문자열은 같음!

 

---

타입변환

 

자바스크립트가 동적타이핑 언어긴하지만 때로는 타입을 의도에 맞춰 변경하고 싶을 때가 있습니다.

 

그럴 때 사용하는 것이 타입변환인데 타입변환은 명시적 타입변환과 암묵적 타입변환 두 가지로 나눌 수 있습니다.

 

 

명시적 타입변환

 

명시적 타입변환이란 개발자가 명시적으로 값의 타입을 변경할 때 사용합니다.

 

생성자 함수를 사용하거나, 메서드를 쓰는 등 방식으로 변경할 수 있습니다.

 

// 숫자를 문자로 변경하는 방법

const numberTicket = 100

String(numberTicket) // 생성자 함수 String을 통해 변경하는 방법
numberTicket.toString() // toString()메서드를 사용해 변환

// 문자열을 숫자로 변경하는 방법

const birthday = '1018'

Number(birthday) // 생성자 함수 Number를 사용해 변경
parseInt(birthday) // parseInt를 사용해 변경

// 불린형 변경

const text = 'hello'

Boolean(text) // 생성자 함수 Boolean을 사용해 변경
const boolText = !!text // 이중부정연산자를 사용해 변경

 

 

암묵적 타입변환 

 

자바스크립트가 동적타이핑 언어라는 점을 이용해서 암묵적으로 타입을 변환 할 수 있습니다.

 

따라서 개발자의 의도와는 다르게 표현식을 평가하는 도중 자바스크립트 엔진이 필요에 따라 타입을 변환하기 때문에 일어납니다.

// 문자로 암묵적 변환
123 + '' // '123'
10 + '20' // '1020'

// 숫자로 암묵적 변환
'1' - 1 // 0
'5' * 1 // 5

// 불린으로 암묵적 변환

if('hi'){
  // 조건문안에서 사용시 암묵적으로 불린으로 변환됩니다.
}

 

 

그런데 조건문 안에서 암묵적 변환이 된다면 어떤 값이 false가 되고 어떤값이 true가 되는지 알아야 

 

암묵적 타입변환에 대응 할 수 있을 것입니다.

 

---

trutrh와 falsy

 

truthy와 falsy는 불린형으로 값을 변환하였을 때, 

 

true가 나오면 truthy, false가 나오면 falsy한 값이 됩니다.

 

그런데 사실 falsy한 값은 8가지로 정해져있습니다.

 

false, 0, -0, 0n, null, undefined, NaN, 빈 문자열이 falsy한 값이며

 

이 8 가지를 제외한 모든 값은  truthy입니다.