JavaScript 에센셜 | 위니북스

원시타입

원시타입은 가장 기본적인 데이터 타입으로, 단일 값을 저장합니다. 원시 타입은 값 자체가 변경될 수 없는 불변성(immutable) 을 가지고 있습니다. 원시값이 할당된 변수에 새로운 값을 할당하면, 기존 값을 수정하는 것이 아니라 메모리에 새로운 값을 생성하고 그 참조를 변경합니다.

let message = 'weniv'; message = message + ' loves you'; console.log(message);

1. 문자열 (String)

문자열은 텍스트 데이터를 나타내며, 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 나타냅니다.

let name = '라이캣';
let greeting = '안녕하세요!';
let message = `안녕하세요, ${name}님!`;

let name = '라이캣';
let greeting = '안녕하세요!';
let message = `안녕하세요, ${name}님!`;

1.1 문자열 특징

1.1.1 순서

문자열은 순서가 있습니다. 순서는 0부터 시작하며 띄어쓰기도 문자로 취급합니다. 이 순서를 인덱스(index) 라고 부르며, 각괄호([])를 사용해 특정 위치의 문자를 가져올 수 있습니다.

let text = 'hello world'; console.log(text[0]); console.log(text[5]); console.log(text[20]);

1.1.2 길이

문자열은 길이를 나타내는 length 속성을 가집니다.

let myPassword = 'qwer123!@#'; console.log(myPassword.length);

1.1.3 불변성(immutable)

원시타입의 특징인 불변성(immutable)을 가지고 있기 때문에, 한 번 만들어진 문자열은 절대 변하지 않습니다. 다음과 같이 인덱스로 문자에 접근해서 값을 할당하더라도 기존의 문자열은 변경이 되지 않습니다.

let text = 'immutable'; text[0] = 'l'; console.log(text);

1.2 이스케이프 문자

문자열 안에서 특수한 의미를 가진 문자(따옴표, 백틱 등) 를 일반 문자로 표현하거나, 특수한 기능을 수행하는데 사용합니다. 백슬래시를 이용하여 이스케이프 문자를 표현할 수 있습니다.

이스케이프 문자	설명
\'	작은따옴표
\"	큰따옴표
\\	백슬래시
\n	줄바꿈
\t	탭

/* 문자열 작성법 문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 둘러싼 일련의 문자를 가르킵니다. */ const str = '문자열 작성법\n\t문자열은 작은따옴표(\'\'), 큰따옴표(""), 백틱(``)으로 둘러싼 일련의 문자를 가르킵니다.'; console.log(str);

다음과 같이 귀여운 고양이를 이스케이프 문자를 이용해서 출력해보세요

 /\_/\
( o.o )
 > ♥ <

 /\_/\
( o.o )
 > ♥ <

이스케이프 문자 | MDN

1.3 템플릿 리터럴

백틱(`)을 이용해서 문자열을 나타내는 표기법을 템플릿 리터럴 이라고 합니다. 따옴표로 생성한 기존의 문자열과는 다르게 템플릿 리터럴로 작성한 문자열은 ${} 구문을 이용해 변수나 값을 문자열에 삽입할 수 있습니다.

let name = 'licat';
let age = 20;
 
console.log(`안녕하세요, 제 이름은 ${name}입니다! 저는 ${age}살 입니다.`);

let name = 'licat';
let age = 20;
 
console.log(`안녕하세요, 제 이름은 ${name}입니다! 저는 ${age}살 입니다.`);

템플릿 리터럴은 단순히 변수를 삽입할 수 있을 뿐만 아니라, 표현식을 평가할 수 있습니다. 다음과 같이 ${}로 둘러싸인 num1 + num2의 덧셈 연산이 수행되어 결과가 문자열에 삽입됩니다.

let num1 = 10; let num2 = 20; console.log(`두 수의 합은 ${num1 + num2}입니다.`);

2. 숫자 (Number)

숫자는 정수와 실수를 표현하기 위해 사용되는 자료형입니다. 다른 프로그래밍 언어와 달리 정수와 실수를 구분하지 않고 하나의 숫자 타입으로 표현합니다.

let age = 20;
let grade = -2.4;

let age = 20;
let grade = -2.4;

2.1 숫자형의 특징

2.1.1 특수한 숫자값

숫자형에는 몇 가지 특수한 값이 존재합니다. 자바스크립트에서 표현할 수 있는 가장 큰 숫자보다 큰 숫자를 나타내는 Infinity와 표현할 수 있는 가장 작은 수를 나타내는 -Infinity가 있습니다.

console.log(Number.MAX_VALUE); console.log(Number.MAX_VALUE * 1e290); console.log(1 / 0); // 위니북스에서는 null로 출력되므로 콘솔에서 확인하세요. let num = 9999e10000; console.log(num === Infinity); // true

NaN은 Not-a-Number의 약자로 유효하지 않은 숫자 연산의 결과를 나타냅니다. 예를 들어, 문자열을 숫자로 나누거나, 숫자가 아닌 값의 산술 연산을 시도할 경우 발생합니다. NaN는 유효한 숫자값이 아님을 나타내는 숫자형 타입의 값입니다.

console.log(typeof NaN); console.log(0 / 0); console.log('문자열' * 10);

2.1.2 진법 표현

숫자를 표현할 때 정수, 소수뿐만 아니라 2진수, 8진수, 16진수로 표현할 수 있습니다. 각각 숫자의 앞에 0b, 0o, 0x를 붙여서 표현합니다. 진법에 상관없이 코드에서 값을 참조할 떄는 모두 10진수로 평가됩니다.

// 10진수 let decimal = 42; // 2진수 (0b로 시작) let binary = 0b101010; // 42 console.log(binary); // 42 (10진수로 출력됨) // 8진수 (0o로 시작) let octal = 0o52; // 42 console.log(octal); // 42 (10진수로 출력됨) // 16진수 (0x로 시작) let hex = 0x2A; // 42 console.log(hex); // 42 (10진수로 출력됨) // 값 비교 console.log(decimal === binary); console.log(binary === octal); console.log(octal === hex);

0으로 시작하는 숫자
ES5 이전에는 0으로 시작하는 숫자 리터럴을 8진수로 해석했습니다. ES6부터는 명시적인 8진수 표기법인 0o를 도입했으나, 여전히 0으로 시작하는 숫자는 8진수의 값으로 해석됩니다. 전화번호나 우편번호와 같은 데이터를 다룰 때 주의해야 합니다.

let phoneNumber = 01012341234; console.log(phoneNumber);

2.1.3 지수 표기법

매우 크거나 작은 숫자는 지수 표기법으로 간결하게 표현할 수 있습니다. e 뒤의 숫자는 10의 지수를 의미합니다.

// 지수 표기법: a * 10^b console.log(2e5); // 2 * 10^5 console.log(1e-4); // 1 * e^(-4)

숫자 구분자(Numeric separator) ES2021에서 도입된 문법으로 큰 숫자를 읽기 쉽게 표현할 수 있도록 언더스코어(_)를 사용합니다. 개발자의 코드 가독성을 위한 것으로, 실제 값에는 영향을 주지 않습니다.

let price = 49_900_000;
let cardNumber = 1234_5678_9012_3456; // 카드번호
 
console.log(price);
console.log(cardNumber);

let price = 49_900_000;
let cardNumber = 1234_5678_9012_3456; // 카드번호
 
console.log(price);
console.log(cardNumber);

3. 논리 자료형 (Boolean)

논리 자료형은 참(true) 또는 거짓(false) 두 가지 값만 가질 수 있는 자료형입니다. 주로 조건문이나 논리 연산에 사용되며, 프로그램의 흐름을 제어하는데 중요한 역학을 합니다.

let isStudent = true;
let hasPermission = false;

let isStudent = true;
let hasPermission = false;

4. undefined

undefined는 값이 할당되지 않은 상태를 나타내는 자료형입니다. 변수를 선언만 하고 초기화하지 않았을 때 자동으로 할당됩니다.

let a; console.log(a);

5. null

null은 명시적으로 값이 비어있음을 나타내는 자료형입니다.

let isLoggedIn = true; let user = { name: 'weniv', level: 3, }; if(isLoggedIn === false){ user = null; } console.log(user);

값이 비어있음을 나타내기 위해 undefined을 사용해도 되나요?

null은 변수를 초기화 하기 위한 목적으로 의도적으로 사용됩니다. 그렇다면 빈 값을 나타내는 undefined을 사용하여 초기화하는 것은 어떨까요?

undefined는 선언된 변수에 아직 값이 할당되지 않았음을 의미하기 때문에 의미론적으로 부적합합니다. 따라서 개발자가 명시적으로 빈 값을 나타내기 위해서는 null을 사용하는 것을 권장합니다.

6. 심볼(Symbol)

ES6(ES2015)에 새롭게 도입된 자료형으로 고유하고 변경 불가능한 값을 생성합니다. 주로 객체의 속성 키로 사용되어 이름 충돌을 방지하는데 사용합니다. 심볼의 출력 또한 위니북스에서 지원하고 있지 않으니 콘솔 창에서 실행해보세요.

let sym1 = Symbol(); // 설명이 있는 심볼 let sym2 = Symbol('id'); let sym3 = Symbol('id'); console.log(sym1); console.log(sym2); console.log(sym3); console.log(sym2 === sym3);

const secretKey = Symbol(password); const licat = { name: '라이캣', [secretKey]: '#0000', }; console.log(licat); console.log(licat[secretKey]); console.log(Object.keys(licat)); // 심볼 키는 나타나지 않음.

7. BigInt

ES2020에 도입된 자료형으로, 숫자 자료형의 안전한 정수 범위(Number.MAX_SAFE_INTEGER)를 초과하는 큰 정수를 다룰 수 있게 해줍니다. 정수 뒤에 n을 붙이거나, BigInt() 함수를 사용하여 생성합니다.

let bigNum1 = 9007199254740991n;
let bigNum2 = BigInt('90071992547540092');
let number = 90071992547540092;
 
console.log(bigNum1);
console.log(bigNum2);
console.log(number);

let bigNum1 = 9007199254740991n;
let bigNum2 = BigInt('90071992547540092');
let number = 90071992547540092;
 
console.log(bigNum1);
console.log(bigNum2);
console.log(number);

7.1 BigInt의 필요성

7.1.1 숫자 표현 방식

자바스크립트는 숫자를 표현하기 위해서 IEEE 754 배정밀도 부동소수점 형식(double precision floating point number) 을 사용합니다.

64비트를 이용하여 숫자를 저장하며,
소수점을 이동시키면서 숫자를 표현하는 방식을 나타냅니다.

부호비트(S)는 양수 또는 음수 / 지수부(E)는 소수점의 위치 / 가수부(F)에는 실제 숫자 값의 정밀도

예를 들어, 64비트 부동소수점 방식으로 10을 저장하는 과정을 살펴보면 다음과 같습니다.

10을 이진수로 변환: 1010
정규화(소수점을 이동): 1.01 * 2^3
각 부분 계산
- 부호 비트: 양수이므로 0
- 지수부: 3 + 1023(바이어스) = 1026을 이진수로 변환
- 가수부: 소수점 이하 부분 01, 나머지 부분은 0

7.1.2 부동 소수점 오차

부동 소수점의 오차는 10진수를 2진수로 변환하는 과정에서 정확히 표현하지 못하는 경우에 발생하게 됩니다.

예를 들어 0.1을 이진수로 표현하는 과정을 살펴보겠습니다.

0.1을 이진수로 변환: 0.0001100110011... (무한 반복)
정규화: 1.1001100111... * 2^(-4)
각 부분 계산
- 부호 비트: 양수이므로 0
- 지수부: -4 + 1023(바이어스) = 1019를 이진수로 변환
- 가수부: 소수점 이하 부분 100110011... 을 52비트까지 저장

위 과정에서 가수부가 52비트로 제한이 되어 있기 때문에 정확한 값을 저장하지 못하고 근삿값이 저장됩니다. 이것이 0.1 + 0.2가 정확히 0.3이 되지 못하는 이유입니다.

console.log(`0.1 + 0.2 = ${0.1 + 0.2}`);

부동 소수점 오차

정확한 소수 계산이 필요하다면 Decimal.js, math.js 등의 라이브러리로 해결할 수 있습니다.

7.1.3 정확히 표현할 수 있는 정수

이러한 부동 소수점 표현 방식에 의해 자바스크립트에서 정확히 표현할 수 있는 정수 범위는 -(2^53 - 1)부터 (2^53 - 1)까지입니다. Number.MIN_SAFE_INTEGER 혹은 Number.MAX_SAFE_INTEGER로 값에 접근할 수 있으며, 이 범위를 벗어나는 숫자는 정확성을 보장할 수 없습니다.

const number = Number.MAX_SAFE_INTEGER; console.log(number + 1); // 9007199254740992 console.log(number + 2); // 9007199254740992 console.log(number + 3); // 9007199254740994 console.log(number + 4); // 9007199254740996

큰 정수를 정확히 다루기 위해서 ES2020에 BigInt 타입을 도입하게 되었습니다.

7.2 BigInt 특징

7.2.1 값 생성

범위를 벗어나는 숫자는 유효하지 않을 수 있기 때문에 BigInt로 변환하는 과정에서 정확성을 보장하지 못할 수 있습니다. 따라서 BigInt 함수로 값을 생성할 떄는 문자열로 값을 생성하는 것을 권장합니다.

let numberToBigInt = BigInt(9007199254740993);
let stringToBigInt = BigInt('9007199254740993');
 
console.log(numberToBigInt);
console.log(stringToBigInt);

let numberToBigInt = BigInt(9007199254740993);
let stringToBigInt = BigInt('9007199254740993');
 
console.log(numberToBigInt);
console.log(stringToBigInt);

7.2.2 연산

BigInt는 숫자형과 비슷해 보이지만 다른 자료형이므로 숫자형 타입과 혼합하여 연산할 수 없습니다. 또한 BigInt는 정수형이기 때문에 소수점 표현이 불가합니다.

console.log(10n + 20n); console.log(10n * 20n); console.log(20n / 3n);