[모던JS] 009. [기본] 자료형(원시 타입, typeof연산자)

원문

자료형(data type)의 의미

자료형(data type)이란 숫자, 문자, 불리언과 같은 자료의 형태를 이야기한다.

자바스크립트에서는 변수에 모든 자료형이 올 수 있다.

let message = "hello";
message = 123456;

위의 예제처럼 변수의 자료형은 문자열이 될 수도 있고, 숫자가 될 수도 있다.

이렇게 값의 타입이 언제든지 바뀔 수 있기 때문에 자바스크립트를 동적 타입 언어(dtnamically typed language)라고 한다.

자료형의 종류

원시 타입 (primary)

숫자형(Number type)

숫자형의 종류

정수 : 1, 2, 3 등

• 부동소수점 숫자 : 일반적이지 않으니 이번 과정에서는 생략
• 특수 숫자값(special numeric value)
• 무한대
• Infinity : 양의 무한대
  • 어떤 숫자든 0으로 나누면 무한대의 값을 얻을 수 있다.

console.log(4 / 0); // Infinity
console.log(Infinity); // Infinity
// Infinity를 직접 참조 가능

• -Infinity : 음의 무한대

NaN : Not a Number (숫자가 아님)

숫자가 아니어서 사칙연산에서 에러가 발생한 경우 뜨는 문구이다. 보통 연산에 오류가 생기면 코드 실행이 되지 않지만 자바스크립트는 계산하는 것이 숫자형이 아니더라도 계산을 진행하고 NaN을 출력한다. 이 덕분에 자바스크립트의 수학 연산은 안전하다고 볼 수 있다.

console.log("hi" / 2); // NaN

BigInt : 엄청나게 큰 숫자

자바스크립트는 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다.

BigInt는 끝에 n이 붙게 된다.

const bigInt = 1234567890123456789012345678901234567890n;

일반적인 개발 환경에서 이 정도의 숫자값을 사용할 일은 없지만 난수로 암호화된 암호를 저장하거나 생성할 때는 이보다 훨씬 길어질 수도 있다. 이럴 때는 bigInt를 사용하여 값을 표현할 수 있다.

그런데 bigInt는 IE에서는 지원하지 않고 Firefox, Chrome, Edge, Safari에서만 작동한다. 비교적 최근에 등장한 자료형으로 호환성 이슈가 있으니 bigInt를 사용하기 전 브라우저별 호환성을 체크해야 한다.

문자형 (string)

자바스크립트에서는 문자열을 따옴표로 묶는다.

따옴표로는 세 종류가 있다.

• 큰 따옴표 : ""
• 작은 따옴표 : ''
• 역 따옴표 (백틱(backtick)) : ``

큰 따옴표와 작은 따옴표는 같은 기능이다. 그리고 이 안에서 줄바꿈을 하려면 <br> 태그를 사용하거나 \n 을 넣어야 한다.

역 따옴표를 사용하는 방법은 템플릿 리터럴이라고 하는데, 몇 줄을 작성하든 개발자가 직접 입력한 엔터(줄바꿈)도 그대로 인식한다. 그리고 템플릿 리터럴 안에는 ${}를 사용하여 변수나 표현식을 문자열 중간에 넣을 수 있다.

let str1 = 'hello';
let str2 = "hello";
let phrase = `hello, my name is ${name}.`;

console.log(`계산 결과는 ${1 + 2} 입니다.`); // 계산 결과는 3 입니다.

let name = "원영"

console.log(`hello ${1}`)l // hello 1
console.log(`hello ${"name"}`); // hello name
console.log(`hello ${name}`); // hello 원영

템플릿 리터럴 안에서 ${} 표현식을 사용할 때 ${"name"}은 name이라는 문자 자체를 넣은 것이고, ${name}은 name이라는 변수를 호출한 것이다.

표현방식	변수 또는 표현식 사용 가능 여부
큰 따옴표	불가능
작은 따옴표	불가능
역 따옴표	가능, ${}

불린형 (boolean)

불리언이라고도 한다. true와 false라는 두 가지 값만 있다.

맞으면(긍정) true이고, 틀리면(부정) false이다.

불린형은 값을 비교할 때도 사용한다.

let isGreater = 4 > 1 ;
console.log(isGreater); // true

null

'값이 없다'는 의미이다. 비어있는 값(empty), 알 수 없는 값(unknown)

let age = null;
// 나이를 '알 수 없다'라는 의미

위의 코드는 개발자가 직접 age의 값을 null로 할당한 것이다. 나이를 알 수 없다는 의미이다.

undefined

null과 같이 '값이 없다'라는 의미이다.

하지만 null과의 차이점은 null은 개발자가 직접 변수의 값에 null을 할당한 것이고, undefined는 개발자가 아무런 값도 넣지 않았을 때의 상태를 말한다.

let name = null; // null
let age; // undefined

undefined도 null처럼 개발자가 직접 값으로 할당할 순 있지만, 그러라고 있는 기능이 null이기 때문에 구분해서 사용하도록 한다.

자료형	의미	사용 용도
null	값이 없음	개발자가 직접 변수이 값으로 할당
undefined	값이 없음	변수만 지정하고 값을 할당하지 않았을 때 자동으로 지정되는 것

객체 타입 (object)

객체는 심화된 내용이기에 객체편에서 따로 다루도록 한다.

종류로는 아래와 같이 있다.

• 배열 : []
• 객체 : {}
• 함수 : function() {}
• 정규표현식(RegExp) : new

typeof 연산자

자료형의 종류를 반환하는 연산자이다. 자료형에 따라 처리 방식을 다르게 하고 싶다거나 자료형을 빠르게 알 고 싶을 때 사용한다.

console.log(typeof undefined); // undefined
console.log(typeof 0); // number
console.log(typeof 10n) // bigint
console.log(typeof true) // boolean
console.log(typeof "foo") // string
console.log(typeof Symbol("id")); symbol
console.log(typeof Math); // object
console.log(typeof null) // object
console.log(typeof alert) // function

symbol, math등은 심화 내용이니 다음에 다루도록 하고,

null은 원래 그 자체가 자료형인 원시 타입의 자료형이지만 object로 뜨는 것은 자바스크립트에서 호환성 문제로 고의적으로 남겨둔 버그이다. null은 객체 타입이 아니다.

그리고 alert는 자바스크립트의 내장 함수이다. 원래 함수형이라는 자료형은 없다. 함수는 객체 타입에 속하기 때문에 object를 반환해야 하는 것이 맞는데 자바스크립트에서 잘못 만들었다. 그런데 오히려 이 점을 실무에서 유용하게 사용하기 때문에 일부러 수정하지 않고 있다. 즉 typeof로 함수의 자료형을 반환할 때 function이라고 반환되어도 함수형이라는 자료형은 없다. 함수는 객체(object) 타입이다.