[코어 자바스크립트] 2.5 자료형

출처 : 모던 JavaScript 튜토리얼

• 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다.
• 자바스크립트에는 여덟 가지 기본 자료형이 있다.
• 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수도 있다.

let message = "hello";
message = 123;

• 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)‘언어라고 부른다.

1. 숫자형(number type)

• 숫자형은 정수 및 부동소수점(floating point number)를 나타낸다.

let number = 123;
number = 12.345;

• 숫자형과 관련된 연산은 다양한데, 곱셈 *, 나눗셈 /, 덧셈 +, 뺄셈 - 등이 대표적이다.

특수 숫자 값

• 숫자형에는 일반적인 숫자 외에 Infinity, -Infinity, NaN과 같은 ‘특수 숫자 값(special numeric value)’이 포함된다.
• Infinity는 어떤 숫자보다 큰 특수 값, 무한대(∞)를 나타낸다.

alert( 1 / 0 ); // 무한대

• Infinity를 직접 참조할 수도 있다.

alert( Infinity ); // 무한대

• NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다.

alert( "문자열" / 2 ); // NaN, 문자열을 숫자로 나누면 오류 발생

• NaN은 여간해선 바뀌지 않는다. NaN에 어떤 추가 연산을 해도 결국 NaN이 반환된다. 연산 과정 어디에선가 NaN이 반환되었다면, 이는 모든 결과에 영향을 미친다.

alert( "문자열" / 2 + 5 ); // NaN

• 자바스크립트에서 행해지는 수학연산에서, 말이 안되는 수학 연산을 하더라도 스크립트는 치명적인 에러를 발생시키지 않고 NaN을 반환하며 연산이 종료된다.
• 현실에서는 특수 숫자 값을 숫자로 취급하지 않지만, 자바스크립트에서는 특수 숫자 값을 숫자형으로 분류한다.

2. BigInt

• 자바스크립트에서는 (2^53-1)보다 큰 값 혹은 -(2^53-1) 보다 작은 정수는 ‘숫자형’을 사용해 나타낼 수 없다.
• 암화 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요하다.
• BitInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있다.
• BitInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

// 끝에 'n'이 붙으면 BigInt형
const bigInt = 1234567890123456789012345678901234567890n;

• BitInt의 경우 호환성 이슈가 있는데, 브라우저에 따라 BigInt형을 지원하지 않을 수도 있다.

3. 문자형(String)

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

let str1 = "Hello,";
let str2 = 'single quotes';
let phrase = `can embed another ${str}`;

• 따옴표 종류
  • 큰따옴표: "Hello"
  • 작은따옴표: 'Hello'
  • 역 따옴표(백틱, backtick): Hello
• 큰따옴표와 작은따옴표는 기본적은 따옴표로, 자바스크립트에서는 이 둘 사이에 차이가 없다.
• 역 따옴표로 변수나 표현식을 감싼 후 ${...}를 안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 넣을 수 있다.

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

• ${...} 사이에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있다. 문자열 중간에 들어간 변수나 표현식은 문자열의 일부가 된다.

주의

• 자바스크립트에는 글자형(character)이 존재하지 않는다. 문자형만 존재하고, 문자형에는 글자가 하나 혹은 여러 개 들어갈 수 있다.

3. 불린형(boolean)

• 불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형이다.
• 불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용한다. true는 긍정, false는 부정을 의미한다.

let nameFieldChecked = true; // 네, name field가 확인 되었다.(checked)
let ageFieldChecked = false; // 아니요, age field가 확인되지 않았다.(not checked)

• 불린값은 비교 결과를 저장할 때도 사용된다.

let isGreater = 4 > 1;

alert( isGreater ); // true (비교 결과: "yes")

4. ‘null’ 값

• null 값은 오직 null 값만 포함하는 별도의 자료형을 만든다.

let age = null; // 나이를 알 수 없거나 값이 비어 있음

• 자바스크립트에서의 null은 자바스크립트 이외 언어의 null과 성격이 다르다. 다른 언어에서는 null을 ‘존재하지 않는 객체에 대한 참조’나 ‘널 포인터(null pointer)’를 나타낼 때 사용하는데, 자바스크립트에서는 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용한다.

5. ‘undefined’ 값

• undefined 값도 null 값처럼 자신만의 자료형을 형성한다.
• undefined는 ‘값이 할당되지 않은 상태’를 나타낼 때 사용한다.
• 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

let age;

alert(age); // 'undefined'가 출력된다.

• 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 하지만, 변수가 비어있거나 알 수 없는 상태라면 null을 사용하는 것이 좋다. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨둔다.

let age = 100;

// undefined를 직접 할당한다.
age = undefined;

alert(age); // "undefined"

6. 객체(object)와 심볼(symbol)

• 객체(object)형은 특수한 자료형이다.
• 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.
• 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

7. typeof 연산자

• typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.
• typeof 연산자는 두 가지 형태의 문법을 지원한다.
  • 연산자: typeof x
  • 함수: typeof(x)
  • 괄호가 있든 없든 결과가 동일하다.
• typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

• type of Math는 "object"가 출력되는데, Math가 수학 연산을 제공하는 내장 객체이기 때문이다.

typeof Math // "object"

• typeof null의 결과는 "object"이다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨두었다. 언어 자체의 오류이므로 null이 객체가 아님에 유의해야 한다.

typeof null // "object"

• typeof는 피연산자가 함수면 "function"을 반환한다. 그러므로 typeof alert는 "function"을 출력한다. 그런데 자바스크립트에서 함수는 객체형에 속하고, ‘함수’형이 존재하지 않는다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호완성 유지를 위해 남겨진 상태이다. 실무에선 이런 특징이 매우 유용하게 사용되기도 한다.

typeof alert // "function"

8. 요약

• 숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용한다. 정수의 한계는 ±2^53이다.
• bigint – 길이 제약 없이 정수를 나타낼 수 있다.
• 문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 단일 문자를 나타내는 별도의 자료형은 없다.
• 불린형 – true, false를 나타낼 때 사용한다.
• null – null 값만을 위한 독립 자료형이고, null은 알 수 없는 값을 나타낸다.
• undefined – undefined 값만을 위한 독립 자료형이고, undefined는 할당되지 않은 값을 나타낸다.
• 객체형 – 복잡한 데이터 구조를 표현할 때 사용한다.
• 심볼형 – 객체의 고유 식별자를 만들 때 사용한다.
• typeof - typeof x 또는 typeof(x) 형태로 사용하고, 피연산자의 자료형을 문자열의 형태로 반환한다.

9. 과제

• 아래 스크립트의 결과를 예측해 보세요.

let name = "Ilya";

alert( `hello ${1}` ); // hello 1

alert( `hello ${"name"}` ); // hello name

alert( `hello ${name}` ); // hello Ilya