자바스크립트 자료형

박재현·2024년 2월 27일

JavaScript nomadcoder nomadstudy

JavaScript 공부

목록 보기

5/14

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다.

자바스크립트에서는 8가지 기본 자료형이 있는데, 이번에는 8개의 자료형에 대해서 공부해 보려고 한다.

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다, 따라서 변수는 어떤 순간에 문자열일 수 있고 다른순가에는 숫자가 될 수도 있다. (느슨한 자바스크립트)

// no error
let message = "hello";
message = 123;

이렇게 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있는 언어를 -동적타입(Dynamic Typed) 언어라고 한다.

숫자형

let n = 123;
n = 12.345;

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

숫자형과 관련된 연산은 다양한데 사칙연산이 대표적이다.

숫자형에는 일번적인 숫자 외에 Infinity, -Infinity, NaN 같은 특수 숫자 값(Special Number Value)이 포함된다!

Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대값을 의미하고, 어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.

alert(1 / 0); // Infinity

alert(Infinity); // 무한대 값을 직접 참조도 가능하다

-Infinity는 어떤 숫자보다 더 작은 특수 값, -무한대값을 의미하고, 어느 숫자든 -0으로 나누면 -무한대를 얻을 수 있다.

alert(1 / -0); // Infinity

alert(-Infinity); // 무한대 값을 직접 참조도 가능하다

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

alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.

alert( "숫자가 아님" / 2 + 5 ); // NaN

NaN에 어떤 추가 연산을 해도 결국 NaN이 반환된다.

BigInt

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

사실 대부분의 상황에서 이런 제약사항은 문제가 되지 않지만, 암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야할때는 이렇게 큰 숫자가 필요하다.

BigInt 자료형은 길이에 상관없이 정수를 나타낼 수 있고 마지막에 n을 붙이면 만들 수 있다.

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

추가적으로 IE에서는 지원하지 않는 호환성 이슈가 있다.

문자형

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

let str = "hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;

따옴표는 3가지 종류가 있다.
1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, ~표시): Hello

큰따옴표와 작은따옴표는 기본적인 따옴표로 자바스크립트에서는 이 둘에 차이를 두지 않지만,역 따옴표(벡틱)로 변수나 표현식을 감싼 후 ${...} 내부에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있다.

let name = "John";

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

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

${...} 안에는 name 같은 변수나 1 + 2 같은 수학 관련 표현식을 넣을 수 있다. (python에서 f string처럼)

중요한건 큰따옴표나 작은따옴표를 사용하면 중간에 ${...} 표현식을 넣을 수 없다는걸 기억하자! 오직 벡틱만 가능함!

alert( "the result is ${1 + 2}" ); // the result is ${1 + 2} (큰따옴표는 확장 기능을 지원하지 않습니다.)

C, Java는 char 처럼 문자 1개를 위한 자료형이 있지만 자바스크립트는 없다.

불린형(Boolean)

불린형(논리타입)은 true와 false 두가지 값만 있는 자료형이다.

불린형은 긍정(yes)나 부정(no)를 나타내는 값을 저장할때 사용하는데, true는 긍정, false는 부정을 의미한다.

또, 불린형은 비교 결과를 저장할때도 사용한다.

let isGreater = 4 > 1;

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

4가 1보다 크기때문에 조건식이 참 이므로 isGreater가 true다.

null 값

null 값은 지금까지 살펴본 자료형 중 어느 자료형에도 속하지 않는 값이다.
null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다.

let age = null;

자바스크립트의 null은 "존재하지 않는 값(nothing)", "비어 있는 값(empty)", "알 수 없는 값(unknown)"을 나타내는데 사용한다.

let age = null;은 나이(age)를 알 수 없거나, 그 값이 비어있음을 의미한다.

undefined 값

undefined 값도 null 값처럼 자신만의 자료형을 형성한다.
undefined는 "값이 할당되지 않은 상태"를 나타낼 때 사용한다.

즉 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

let age;

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

동시에 변수에 undefined를 명시적으로 할당하는것도 가능하다.

let age = 100;

// 값을 undefined로 바꿉니다.
age = undefined;

alert(age); // "undefined"

하지만 변수가 비어있거나, 일 수 없는 상태라는걸 나타내고 싶다면 null을 사용하는게 좋다.
undefined는 할당되지 않은 변수의 초기값을 위해 남겨두자!

객체와 심볼

객체(object)는 특수한 자료형이다.

객체형을 제외한 다른 자료형은 문자열이든, 숫자형이든 1개만 표현할 수 있기때문에 원시(primitive) 자료형 이라고 부른다.

심볼(symbol)은 객체의 고유한 식별자를 만들때 사용되는데, 이후에 객체를 학습하고 난 이후 다시 자세히 알아보자.

간단한 예를 먼저 보면, 특정 객체 내부에 숨기고 싶은 어떤 값이 있을때 심볼을 사용하면 숨길 수 있다.

const obj = {
	name: "Hyeon",
	age: 30,
  	__secret__: "바보"
}

Object.keys(obj); // ["name", "age", "__secret"] 출력

특정값을 숨기고 심지만 실제로 keys를 찾아보면 숨겨지지 않고 확인할 수 있는데 이럴때 심볼을 사용하면 숨길 수 있다.

const key = Symbol("secret");

const obj = {
	name: "Hyeon",
	age: 30,
  	[key]: "바보"
}

Object.keys(obj); // ["name", "age"] 출력

일단 이 2가지는 나중에 더 자세히 알아보자.

typeof 연산자

typeof 연산자는 인수의 자료형을 반환한다. (말 그대로 이놈의 타입이 뭔지 알아볼 때 사용한다)

두가지의 형태로 사용할 수 있다.
1. 연산자: typeof x
2. 함수: typeof(x)

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

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

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

아래 3개에 대해서 추가로 알아보면,

Math는 수학 연산을 제공하는 내장 객체 이므로 object가 출력된다.
typeof null의 결과도 object인데, null은 고유한 자료형을 가지는 특수 값으로 객체는 아니지만 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다.
typeof는 피연산자가 함수면 "function"을 반환한다. 그래서 alert는 function이 나오는것임. 그런데 함수형은 따로 없다.