자료형

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 자바스크립트의 7가지 원시 자료형(number, string, boolean, null, undefined, symbol, bigint)을 설명하고 구분할 수 있습니다.
• typeof 연산자로 변수의 자료형을 확인할 수 있습니다.
• 자바스크립트의 동적 타입(Dynamic Typing) 시스템의 특성과 주의점을 이해할 수 있습니다.
• 명시적 형 변환 함수(Number(), String(), Boolean())를 사용할 수 있습니다.

💡 자료형이란 무엇인가

이 섹션에서는 자료형의 개념과 자바스크립트가 다른 언어와 다른 점을 살펴보겠습니다.

세상의 모든 데이터에는 종류가 있습니다. 숫자 42와 문자열 "42"는 생김새는 비슷하지만 컴퓨터가 처리하는 방식이 완전히 다릅니다. 42 + 8은 50이지만, "42" + "8"은 "428"이 됩니다. 이처럼 데이터의 종류를 자료형(Data Type)이라고 합니다.

자바스크립트는 동적 타입(Dynamic Typing) 언어입니다. 변수를 선언할 때 자료형을 명시하지 않아도 되고, 같은 변수에 다른 종류의 값을 재할당할 수도 있습니다. 반면 자바(Java), C, TypeScript 같은 언어는 변수를 선언할 때 반드시 자료형을 지정해야 하는 정적 타입(Static Typing) 언어입니다.

// 자바스크립트 — 동적 타입 (자료형 명시 불필요)
let value = 42;         // 숫자
value = "안녕하세요";   // 문자열로 변경 가능
value = true;           // 불리언으로 변경 가능
console.log(value);     // true

// 자바 — 정적 타입 (비교용 예시, 실행 안 됨)
// int value = 42;
// value = "안녕";  // 컴파일 오류!

동적 타입의 장점은 코드를 빠르게 작성할 수 있다는 것입니다. 단점은 예상치 못한 자료형 관련 버그가 발생할 수 있다는 것입니다. 자바스크립트의 자료형 시스템을 잘 이해하면 이런 버그를 예방하고 디버깅하는 데 큰 도움이 됩니다.

🔢 숫자형(Number)

이 섹션에서는 자바스크립트에서 숫자를 다루는 방법과 주의해야 할 특성을 살펴보겠습니다.

자바스크립트의 숫자형(Number)은 정수와 소수를 구분하지 않고 하나의 자료형으로 처리합니다. 내부적으로는 IEEE 754 배정밀도 부동소수점 형식을 사용하여 숫자를 저장합니다.

let integer = 42;          // 정수
let negative = -10;        // 음수
let decimal = 3.14;        // 소수
let scientific = 2.5e6;    // 과학적 표기법 (2,500,000)

console.log(typeof integer);   // "number"
console.log(typeof decimal);   // "number"

// 특수 숫자값
console.log(Infinity);         // 양의 무한대
console.log(-Infinity);        // 음의 무한대
console.log(NaN);              // Not a Number (숫자가 아님)

console.log(1 / 0);            // Infinity
console.log("hello" * 2);      // NaN — 숫자가 아닌 값의 연산 결과

Infinity는 어떤 숫자를 0으로 나눌 때 발생하는 무한대 값입니다. NaN(Not a Number)은 수학적으로 정의되지 않는 연산의 결과를 나타냅니다. 문자열을 숫자처럼 곱하거나 0을 0으로 나눌 때 등 발생합니다. NaN의 흥미로운 특성은 NaN === NaN이 false라는 것입니다. NaN이 NaN 자신과도 같지 않다는 특성 때문에, NaN인지 확인하려면 Number.isNaN() 함수를 사용해야 합니다.

주의해야 할 유명한 특성이 있습니다.

// 부동소수점 정밀도 문제
console.log(0.1 + 0.2);  // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);  // false!

// 해결 방법: toFixed()로 소수점 자릿수 제한
console.log((0.1 + 0.2).toFixed(1));  // "0.3" (문자열)
console.log(Number((0.1 + 0.2).toFixed(1)));  // 0.3 (숫자)

0.1 + 0.2가 0.3이 아닌 이유는 컴퓨터가 소수를 이진법으로 저장하는 과정에서 미세한 오차가 발생하기 때문입니다. 이것은 자바스크립트만의 문제가 아니라 IEEE 754를 사용하는 모든 언어에서 발생합니다. 금융 계산처럼 정밀도가 중요한 상황에서는 이 점을 반드시 고려해야 합니다.

📝 문자열(String)

이 섹션에서는 자바스크립트에서 텍스트를 다루는 문자열 자료형의 특성을 살펴보겠습니다.

문자열(String)은 텍스트 데이터를 나타내는 자료형입니다. 따옴표로 감싸서 표현합니다. 자바스크립트에서는 세 가지 방식으로 문자열을 만들 수 있습니다.

// 작은따옴표
let str1 = '안녕하세요';

// 큰따옴표
let str2 = "Hello, World!";

// 백틱 (템플릿 리터럴) — ES6
let name = "홍길동";
let str3 = `안녕하세요, ${name}님!`;  // 변수 삽입 가능
console.log(str3);  // 안녕하세요, 홍길동님!

// 여러 줄 문자열 (백틱만 가능)
let multiLine = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(multiLine);

// 문자열 안에 따옴표 포함
let quote1 = '그는 "안녕"이라고 말했다.';  // 다른 종류의 따옴표 사용
let quote2 = "It's a great day!";           // 마찬가지
let quote3 = '이스케이프: \'내부 따옴표\''; // 역슬래시로 이스케이프

세 가지 중 실무에서 가장 많이 쓰이는 것은 백틱(Template Literal)입니다. 변수를 문자열 안에 쉽게 삽입할 수 있고, 여러 줄 문자열도 자연스럽게 표현할 수 있기 때문입니다. 6강에서 문자열을 더 깊이 다루겠지만, 미리 알아두면 좋은 중요한 특성이 있습니다.

// 문자열의 길이
let greeting = "안녕하세요";
console.log(greeting.length);  // 5

// 문자열은 불변(immutable) — 한 번 만들면 내부 변경 불가
let word = "hello";
// word[0] = "H";  // 오류 없이 무시됨
console.log(word);  // hello (바뀌지 않음)

// 대신 새 문자열을 만들어야 함
let upperWord = word.toUpperCase();
console.log(upperWord);  // HELLO
console.log(word);       // hello (원본 유지)

문자열은 불변(Immutable)입니다. 한 번 만들어진 문자열의 특정 글자를 직접 바꿀 수 없습니다. 변경된 내용이 필요하면 toUpperCase()처럼 새로운 문자열을 반환하는 메서드를 사용해야 합니다. 이 특성은 6강에서 문자열 메서드를 배울 때 더 자세히 이해하게 됩니다.

🔵 불리언(Boolean) · null · undefined

이 섹션에서는 참·거짓을 표현하는 불리언과, 값이 없음을 나타내는 null·undefined를 살펴보겠습니다.

불리언(Boolean)은 true(참) 또는 false(거짓) 두 가지 값만 가지는 자료형입니다. 조건문(7강)에서 가장 핵심적으로 사용됩니다.

let isLoggedIn = true;
let hasSubscription = false;

console.log(typeof isLoggedIn);  // "boolean"

// 비교 연산의 결과도 불리언
console.log(10 > 5);    // true
console.log(10 < 5);    // false
console.log(10 === 10); // true
console.log("a" === "b"); // false

null은 개발자가 의도적으로 "값이 없음"을 나타낼 때 사용합니다. "이 변수는 비어 있어야 한다"고 명시적으로 설정하는 것입니다. 사용자가 로그아웃하면 로그인 정보를 null로 설정하는 것이 대표적인 예입니다. undefined는 시스템이 자동으로 부여하는 "아직 값이 없음" 상태입니다. 변수를 선언하고 초기화하지 않거나, 함수가 아무것도 반환하지 않을 때 자동으로 나타납니다.

// null — 개발자가 의도적으로 비움
let currentUser = null;
console.log(currentUser);         // null
console.log(typeof currentUser);  // "object" ← 역사적 버그!

// undefined — 시스템이 자동으로 부여
let notAssigned;
console.log(notAssigned);         // undefined
console.log(typeof notAssigned);  // "undefined"

// null과 undefined의 차이
console.log(null == undefined);   // true  (느슨한 비교)
console.log(null === undefined);  // false (엄격한 비교)

중요한 점은 typeof null이 "object"를 반환한다는 것입니다. 이것은 자바스크립트 초기 구현의 버그인데, 수많은 기존 코드가 이 동작에 의존하고 있어서 수정할 수 없는 역사적 유산이 되었습니다. null인지 확인할 때는 typeof 대신 === null로 직접 비교해야 합니다.

🔄 형 변환(Type Conversion)

이 섹션에서는 자료형을 다른 자료형으로 변환하는 방법과 자바스크립트의 자동 형 변환 특성을 살펴보겠습니다.

자바스크립트에서는 서로 다른 자료형 사이의 연산이 발생할 때 자동으로 형을 변환하는 암묵적 형 변환(Implicit Type Conversion)이 일어납니다. 이 특성은 편리하지만 때로는 예상치 못한 결과를 만들어 버그의 원인이 됩니다.

// 암묵적 형 변환 — 자동으로 발생
console.log("5" + 3);     // "53" — 숫자가 문자열로 변환
console.log("5" - 3);     // 2   — 문자열이 숫자로 변환
console.log("5" * "3");   // 15  — 두 문자열 모두 숫자로 변환
console.log(true + 1);    // 2   — true는 1로 변환
console.log(false + 1);   // 1   — false는 0으로 변환
console.log("" + 0);      // "0" — 빈 문자열 + 숫자

+ 연산자는 피연산자 중 하나가 문자열이면 문자열 연결로 동작하고, -, *, /는 항상 수학 연산을 시도합니다. true는 숫자 1로, false는 0으로 변환됩니다. 이런 암묵적 변환은 의도하지 않은 결과를 낳을 수 있으므로, 명시적으로 형을 변환하는 것이 훨씬 안전합니다.

// 명시적 형 변환 — 개발자가 직접 변환

// 숫자로 변환
console.log(Number("42"));     // 42
console.log(Number("3.14"));   // 3.14
console.log(Number(""));       // 0
console.log(Number("hello"));  // NaN — 변환 불가
console.log(Number(true));     // 1
console.log(Number(false));    // 0
console.log(Number(null));     // 0
console.log(Number(undefined));// NaN

// 문자열로 변환
console.log(String(42));       // "42"
console.log(String(true));     // "true"
console.log(String(null));     // "null"
console.log((42).toString());  // "42" — 메서드 방식

// 불리언으로 변환
console.log(Boolean(1));       // true
console.log(Boolean(0));       // false — Falsy!
console.log(Boolean(""));      // false — Falsy!
console.log(Boolean("hello")); // true
console.log(Boolean(null));    // false — Falsy!
console.log(Boolean(undefined));// false — Falsy!

Falsy(거짓 같은) 값은 불리언으로 변환했을 때 false가 되는 값들입니다. 자바스크립트에서 Falsy 값은 정확히 6가지입니다: false, 0, -0, ""(빈 문자열), null, undefined, NaN. 이 6가지를 제외한 모든 값은 Truthy(참 같은) 값으로, 불리언 변환 시 true가 됩니다. 조건문을 배우는 7강에서 이 개념이 매우 중요하게 활용됩니다.

📝 핵심 요약

4강에서 배운 내용을 정리해 보겠습니다.

자료형	예시	typeof 결과	특이사항
number	42, 3.14, NaN	"number"	0.1+0.2 부동소수점 오차
string	"hello", 'world', 백틱	"string"	불변, 백틱으로 변수 삽입 가능
boolean	true, false	"boolean"	Falsy: 0, "", null, undefined, NaN
null	null	"object" ← 버그!	의도적 빈 값, === null로 확인
undefined	undefined	"undefined"	시스템 자동 부여 (초기화 안 된 변수)

형 변환 함수	결과
Number("42")	42 (숫자)
Number("hello")	NaN
String(42)	"42" (문자열)
Boolean(0)	false
Boolean("hello")	true

다음 강인 5강 — 연산자에서는 자바스크립트에서 값을 계산하고 비교하는 다양한 연산자를 배웁니다. 산술 연산자, 비교 연산자, 논리 연산자, 그리고 ==와 ===의 결정적인 차이까지 — 연산자는 자료형과 떼려야 뗄 수 없는 관계이므로 오늘 배운 내용과 함께 이해하면 더욱 깊이 와 닿을 것입니다!