[JAVASCRIPT] Data Types : 자료형 - primitive type

Data Types

JavaScript는 다양한 자료의 형태를 가진다.

(이어지는 내용에서는 자료형 중에서도 기본형 타입만 우선적으로 다룰 예정이다)

 

 

typeof

인수의 자료형을 반환하는 연산자

표현 형태는 함수 형태 typeof(자료) 와 연산자 형태 typeof 자료 두 가지가 존재한다.

console.log(typeof("hello")); // ? string
console.log(typeof 342);      // ? number

이 중에서도 연산자 형태가 더 선호되는 경향이 있다고 한다.

 

 

dynamically typed language

JavaScript는 동적 타입 언어이다.

변수에 저장되는 값의 타입이 언제든지 변화 가능하다.

let message = "hello";
console.log(typeof message); // ? string

message = 123456;
console.log(typeof message); // ? number

 

 

 

---

Primitive Type

JavaScript의 자료형은 기본형과 참조형 두 가지로 나뉘어진다.

기본형 (Primitive Type)	참조형 (Reference Type)
Number : 숫자 BigInt String : 문자열 Boolean : 참/거짓 null undefined Symbol	Object : 객체 Array : 배열 Function : 함수 Date : 날짜 RegExp : 정규표현식 Map, WeakMap Set, WeakSet

 

 

Primitive type

기본형 타입. 원시형 타입

더 이상 작은 단위로 나누어질 수 없는 자료형이다. (single item)

할당이나 연산 시, 값이 담긴 주소값을 바로 복제한다.

 

 

Reference type

참조형 타입. 객체형 타입

primitive type을 한 단위로 묶은 자료형이다. (box container)

데이터 컬렉션이나 복잡한 개체를 표현한다.

할당이나 연산 시, 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다.

 

 

 

---

Number

숫자

 

다른 프로그래밍 언어들과 달리 JavaScript는 숫자의 종류(정수 및 소수)에 대한 분류가 없다

(예를 들어 C언어에서는 숫자 하나도 정수는 int, 소수는 float을 사용한다.)

 

number는 -2^53 ~ 2^53(9007199254740991) 사이 숫자를 표현한다.

 

 

숫자 연산자

산술 연산자

• + : 더하기
• - : 빼기
• * : 곱하기
• / : 나누기의 몫
• % : 나누기의 나머지

console.log(5 + 3 * 2); // ? 11

 

 

specail numeric value

숫자형에는 일반적인 숫자 외 특수 숫자 값이 존재한다.

• Infinity : 무한대
• -Infinity : 마이너스 무한대
• NaN : Not a Number. 숫자가 아님

console.log(1 / 0);       // ? Infinity
console.log(-1 / 0);      // ? -Infinity
console.log("hello" / 2); // ? NaN

이들로 인해 숫자 연산으로는 치명적인 에러가 거의 나지 않는다.

 

 

 

---

BigInt

number로 표현하지 못하는

-2^53 보다 작은 수와 2^53 보다 큰 수를 표현한다.

 

숫자의 끝에 n을 붙여 BigInt형 자료임을 표시한다.

const bigInt = 1234567890123456789012345678901234567890n;

 

비교적 최근에 표준이 되기도 했고, IE 호환성 문제 등으로 자주 사용되진 않는다.

 

 

 

---

String

문자열. 문자들의 집합

다른 프로그래밍 언어들과 달리 JavaScript는 문자 하나만 분류하는 자료형이 없다.

(예를 들어 C언어에서는 문자 하나는 char, 문자열은 string을 사용한다.)

 

 

문자 연산자

문자열 연결 연산자 : +

console.log("가나다" + "라마"); // ? 가나다라마

문자 선택 연산자 : 문자열[index]

console.log("안녕하세요"[2]); // ? 하

문자열 길이 구하기 : length

console.log("".length);           // ? 0
console.log("안녕하세요".length); // ? 5

 

 

Template Literals

Template strings. 템플릿 문자열

백틱(backtick)(`)을 이용한 `${ ... }` 로 문자열을 표현하는 방식이다.

 

문자열 내부에 표현식을 삽입하는 경우와 같이

가독성이 떨어지는 경우를 대비하는 용도로 많이 쓰인다.

console.log("표현식 12 + 23의 값은 " + (12+23) + "입니다!"); // ? 표현식 12 + 23의 값은 35입니다!
console.log(`표현식 12 + 23의 값은 ${12+23}입니다!`);        // ? 표현식 12 + 23의 값은 35입니다!

 

 

 

---

Boolean

불리언. 불린. 불. 논리. 참/거짓

 

값은 true 와 false 두 가지만 존재한다.

 

 

연산자

비교연산자

• == : 같은가?
• === : 자료형까지 같은가?
• != : 다른가?
• !== : 자료형까지 다른가?
• >
• >=

console.log("32" == 32);      // ? true
console.log("32" === 32);     // ? false

console.log(32 < 80);         // ? true
console.log("32" > "7");      // ? false // 문자열 비교
console.log("가방" < "하마"); // ? true  // 문자열 비교

논리 부정 연산자 : !

console.log(!true);  // ? false
console.log(!false); // ? true

논리합 연산자 : || : 둘 중 하나라도 true면 true

console.log(true || true);   // ? true
console.log(true || false);  // ? true
console.log(false || false); // ? false

논리곱 연산자 : && : 둘 다 true면 true

console.log(true && true);   // ? true
console.log(true && false);  // ? false
console.log(false && false); // ? false

 

 

typeof 사용 주의

console.log(typeof 4 > 1);  // ? false // 앞에 놓인 4만 인식해 계산 실패의 의미로 false를 반환
console.log(typeof(4 > 1)); // ? boolean

 

 

 

---

undefined

선언은 했지만 할당되지 않은 값을 의미한다.

let age;
console.log(age); // ? undefined

age = undefined;
console.log(age); // ? undefined
// undefined를 직접 할당도 가능하지만 사용은 추천하지 않는다.

 

 

 

---

null

널

존재하지 않는 값(nothing), 비어있는 값(empty), 알 수 없는 값(unknown)을 의미한다.

let age = null;
console.log(age); // ? null

 

 

typeof null = object?

console.log(typeof null); // ? 'object'

null 이 고유한 자료형임에도 과거의 잔재로 인해 typeof 연산 결과가 object로 출력된다.

하위 호환성 유지를 위한 언어 자체의 오류다.

 

 

null vs undefined vs NaN

혼란한 세 개념에 대해서는 아래 이미지로 감을 잡아보자.

 

 

 

---

 

참고

• 모던 JavaScript 튜토리얼: 자료형
• [책] 혼자 공부하는 자바스크립트
• [책] 코어 자바스크립트