자료형
저번에 정리했던 자바스크립트의 변수에는 담을 수 있는 자료형이 기본적으로 여덟 가지가 있습니다.
하지만 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있습니다. 때때론 어느 변수는 어떤 순간에 문자열일 수 있고 또 어떤 순간엔 숫자가 될 수도 있습니다.
자바스크립트처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부릅니다.
이제 자료형의 종류에 대해서 알아봅시다.
💡 숫자형(number type)
let n = 123;
n = 12.345;숫자형은 정수 및 부동소수점 숫자를 나타냅니다.
숫자형과 관련된 연산은 다양한데, 덧셈뺄셈은 물론이고 곱하기 나누기 등등 여러 연산이 가능합니다
숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not A Number = 연산 과정에서 잘못된 입력을 받았음을 나타내는 기호)같은 특수 숫자 값이 포함됩니다.
💡 BigInt
내부 표현 방식 때문에 자바스크립트에선 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없습니다.
사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않지만 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요합니다.
BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.
BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.
const bigInt = 1234567890123456789012345678901234567890n;💡 문자형
자바스크립트에선 문자열(string)을 따옴표로 묶습니다.
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;따옴표는 세 종류가 있습니다
큰따옴표: "" , 작은따옴표: '' 백틱: ``
큰따옴표와 작은따옴표는 서로 중첩해서 사용할 수 있지만 혼용해서 사용할 순 없습니다.
"hello" // hello
"hello' // X
"hello 'hi' " // hello 'hi'그리고 자바스크립트에서는 이 둘에 차이를 두지 않습니다.
또한 역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습니다.
💡 불린형(Boolean)
불린형(논리 타입)은 true(1)와 false(0) 두 가지 값밖에 없는 자료형입니다.
불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합니다.
let nameFieldChecked = true; // 네, name field가 확인되었습니다(checked).
let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)또한 불린값은 비교 결과를 저장할 때도 사용됩니다.
let isGreater = 4 > 1;
alert( isGreater ); // true (비교 결과가 참이기 때문에)💡 null값
null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값이며 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.
let age = null;다른 언어에서와 달리 자바스크립트에선 null을 ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용합니다.
위의 let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.
💡 undefined값
undefined 값도 null 값처럼 자신만의 자료형을 형성하며 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.
변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.
let age;
alert(age); // 'undefined'가 출력됩니다.원한다면 개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다.
let age = 100;
age = undefined; // 값을 undefined로 바꿉니다.
alert(age); // "undefined"하지만 이렇게 undefined를 직접 할당하는 걸 권장하진 않습니다. 혹여나 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내고싶으면 null을 사용하는 것이 좋습니다.
💡 객체형(object)와 심볼형(symbol)
객체형은 특수한 자료형입니다.
객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive)자료형이라고하지만 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.
그리고 심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.
이런 특징 때문에 자바스크립트에서 객체는 좀 더 특별한 취급을 받습니다. 객체와 심볼에 대한 내용은 워낙 다양하고 중요하기에 따로 다루도록 하겠습니다.
💡 typeof 연산자
typeof 연산자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.
typeof 연산자는 두 가지 형태의 문법을 지원합니다.
연산자: typeof x
함수: typeof(x)
괄호가 있든 없든 결과가 동일합니다.
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"이처럼 typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환합니다.
출처 및 참고사항
모던 JavaScript 튜토리얼
