자바스크립트의 모든 값은 데이터 타입을 가진다. ES6 기준으로 총 7개의 데이터 타입이 존재한다.
▣ ES6 기준 7개의 데이터 타입
• 원시 타입 (6개): String, Number, Boolean, null, undefined, Symbol
• 객체 타입 (1개): Object
데이터 타입을 구분하는 이유
컴퓨터는 숫자, 문자열, 불리언 등의 값을 저장하는 방식이 다르다. 이는 2진수로 변환했을 때 차지하는 공간이 다르기 때문이다.
- 숫자: 64비트로 고정된 공간을 차지한다.
- 문자열: 글자 수에 따라 유연한 공간을 차지한다.
- 불리언: 1비트의 공간을 차지한다.
이외에도 내부 최적화 유무나 변수 할당 시 동작이 다르기 때문에 데이터 타입을 구분하는 것이다.
숫자 타입
자바스크립트의 숫자 타입은 64비트 부동소수점 형식이며 정수와 실수를 구별하지 않고 모두 'Number' 타입으로 처리한다
제공하는 특수 값
- Infinity: 양의 무한대
- -Infinity: 음의 무한대
- NaN: 산술 연산이 불가능한 경우 반환되는 값
주의해야 할 연산 사례
자바스크립트는 2진법으로 변환한 상태에서 산술 계산이 수행되기 때문에 소수점 계산 시 오류가 발생한다.
-
해결 방법
- UI 표시용 계산의 경우: - 정수로 변환해서 계산하기 - 소규모 일반 계산의 경우: - Number.EPSILON 사용과 스켈일링하기 - 금융/회계 시스템의 경우: - decimal.js과 같은 라이브러리 사용하기 - 초고정밀 계산의 경우: - BigInt 타입 활용하기
문자열 타입
문자열은 0개 이상의 16비트 유니코드 문자의 집합으로 전 세계 대부분의 문자를 표시할 수 있다. 문자열을 사용하기 위해서는 따옴표('')나 쌍따옴표(""), 백틱(``)으로 문자열을 감싸면 된다.
템플릿 리터럴
ES6에서 도입된 강력한 문자열 처리 기능으로, 동적 문자열 형성이 가능하다.
템플릿 리터럴 사용 예시
- 동적 문자열 삽입
사용 목적: 변수와 표현식을 문자열에 삽입하기 위해
console.log(`이름: ${user.name}, 나이: ${user.age}`);- 다중 라인 문자열
사용 목적: HTML 템플릿
const newHTML = `
<div>
<p>${user.name}님 환영합니다!</p>
</div>`;
- 중첩 템플릿
사용 목적: 조건부 클래스명 생성
const isActive = true;
const buttonClass = `btn ${isActive ? 'active' : 'disabled'}`;
이외에도 태그드 템플릿, 정적 타입 검증 등의 기능을 구현할 때 템플릿 리터럴이 사용된다.
불리언 타입
불리언 타입은 논리적 참과 거짓만을 값으로 가지는 타입으로, true와 false만 값으로 가진다.
undefined 타입
undefined 타입의 값은 undefined가 유일하다. undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용되는 값이다.
null
null 타입의 값은 null이 유일하다. null은 개발자가 변수에 값이 없음을 의도적으로 명시할 때 사용되는 값이다.
기본적으로 null은 개발자가 할당했을 때에만 반환되지만, 함수가 유효한 값을 반환할 수 없는 경우에는 null을 반환하기도 한다.
심벌 타입
ES6에서 추가된 타입으로, 다른 값과 중복되지 않는 유일무이한 값이다.
심벌(Symbol) 타입
ES6에서 추가된 변경 불가능한 원시 타입으로, 유일무이한 식별자를 생성할 때 사용됩니다. 주로 객체 프로퍼티의 키로 활용되며, 전역 심벌 레지스트리를 지원합니다.
심벌 타입의 주요 특징은 유일성 보장이 가능하다는 것 입니다.
객체 타입
변경 가능한 값으로, 키-값 쌍의 집합입니다. 원시 타입을 제외한 모든 것은 객체입니다.
