JavaScript 데이터타입
값의 종류를 이해하는 것이 JavaScript의 출발점이에요
문자열
숫자
불린
null vs undefined
typeof
CHAPTER 01
String — 문자열
따옴표 안에 들어가는 모든 것이 문자열이에요. 글자, 숫자, 기호 모두 가능!
3가지 따옴표
// 1️⃣ 큰따옴표
let hello = "Hello";
// 2️⃣ 작은따옴표
let hello2 = 'Hello';
// 3️⃣ 백틱 (역따옴표)
let hello3 = `Hello`;
let hello = "Hello";
// 2️⃣ 작은따옴표
let hello2 = 'Hello';
// 3️⃣ 백틱 (역따옴표)
let hello3 = `Hello`;
✅ 큰따옴표 vs 작은따옴표: 기능 동일. 취향대로 선택해도 OK!
⭐ 백틱: 템플릿 리터럴 기능으로 더 강력해요!
⭐ 백틱: 템플릿 리터럴 기능으로 더 강력해요!
템플릿 리터럴 (백틱의 힘)
// ❌ 큰따옴표로는 복잡
let name = "찐망고";
let age = 20;
console.log("이름: " + name + " 나이: " + age);
// ✅ 백틱으로는 간단
console.log(`이름: ${name} 나이: ${age}`);
let name = "찐망고";
let age = 20;
console.log("이름: " + name + " 나이: " + age);
// ✅ 백틱으로는 간단
console.log(`이름: ${name} 나이: ${age}`);
OUTPUT
이름: 찐망고 나이: 20
표현식도 넣을 수 있어요!
// 계산 넣기
console.log(`3 + 5 = ${3 + 5}`); // 3 + 5 = 8
// 함수 호출도 가능
let greet = () => "안녕하세요";
console.log(`${greet()}!`); // 안녕하세요!
console.log(`3 + 5 = ${3 + 5}`); // 3 + 5 = 8
// 함수 호출도 가능
let greet = () => "안녕하세요";
console.log(`${greet()}!`); // 안녕하세요!
여러 줄 문자열
// ❌ 일반 따옴표로는 어려움
let poem = "첫 번째 줄\n두 번째 줄\n세 번째 줄";
// ✅ 백틱으로는 자연스러움
let poem2 = `첫 번째 줄
두 번째 줄
세 번째 줄`;
let poem = "첫 번째 줄\n두 번째 줄\n세 번째 줄";
// ✅ 백틱으로는 자연스러움
let poem2 = `첫 번째 줄
두 번째 줄
세 번째 줄`;
같은 따옴표 중첩 문제
// ❌ 작은따옴표 안에 작은따옴표 불가
// let quote = 'don't ask'; // 에러!
// ✅ 해결방법 1: 다른 따옴표 사용
let quote = "don't ask";
// ✅ 해결방법 2: 이스케이프 (역슬래시)
let quote2 = 'don\'t ask';
// ✅ 해결방법 3: 백틱 (가장 간단)
let quote3 = `don't ask`;
// let quote = 'don't ask'; // 에러!
// ✅ 해결방법 1: 다른 따옴표 사용
let quote = "don't ask";
// ✅ 해결방법 2: 이스케이프 (역슬래시)
let quote2 = 'don\'t ask';
// ✅ 해결방법 3: 백틱 (가장 간단)
let quote3 = `don't ask`;
💡 언제 어떤 따옴표를?
기본: 백틱 (템플릿 리터럴)
변수가 없으면: 작은따옴표 (짧고 빨라요)
특수 문자 피하고 싶으면: 다른 따옴표 조합
기본: 백틱 (템플릿 리터럴)
변수가 없으면: 작은따옴표 (짧고 빨라요)
특수 문자 피하고 싶으면: 다른 따옴표 조합
CHAPTER 02
Number — 숫자
정수든 소수든 모두 Number 타입이에요. 그리고 특수한 숫자들도 있어요!
숫자의 종류
// 정수
let integer = 42;
// 소수 (실수)
let decimal = 3.14;
// 음수
let negative = -10;
// JavaScript는 모두 Number 타입
typeof 42; // "number"
typeof 3.14; // "number"
let integer = 42;
// 소수 (실수)
let decimal = 3.14;
// 음수
let negative = -10;
// JavaScript는 모두 Number 타입
typeof 42; // "number"
typeof 3.14; // "number"
큰 숫자는 과학 기법으로!
// 보통 방법 (0이 너무 많음)
let million = 1000000; // 백만
let billion = 1000000000; // 십억
// 과학 기법 (깔끔!)
let million2 = 1e6; // 1 × 10⁶
let billion2 = 1e9; // 1 × 10⁹
// 작은 소수도 가능
let small = 0.000001; // 정말 복잡
let small2 = 1e-6; // 훨씬 깔끔
let million = 1000000; // 백만
let billion = 1000000000; // 십억
// 과학 기법 (깔끔!)
let million2 = 1e6; // 1 × 10⁶
let billion2 = 1e9; // 1 × 10⁹
// 작은 소수도 가능
let small = 0.000001; // 정말 복잡
let small2 = 1e-6; // 훨씬 깔끔
특수한 숫자들 (Infinity, NaN)
// Infinity: 무한대
let inf = 1 / 0; // Infinity
console.log(1000000000 > Infinity); // false
// -Infinity: 음의 무한대
console.log(-1 / 0); // -Infinity
// NaN: Not a Number (숫자가 아님)
let notNum = "글자" / 2; // NaN
let notNum2 = 0 / 0; // NaN (수학적으로 정의 불가)
let inf = 1 / 0; // Infinity
console.log(1000000000 > Infinity); // false
// -Infinity: 음의 무한대
console.log(-1 / 0); // -Infinity
// NaN: Not a Number (숫자가 아님)
let notNum = "글자" / 2; // NaN
let notNum2 = 0 / 0; // NaN (수학적으로 정의 불가)
⚠️ 조심: NaN이 한 번 나타나면 계산 결과 전체가 NaN이 돼요!
NaN + 10 = NaN
💡 Number의 특징
JavaScript는 정수/소수 구분 없이 모두 Number
매우 크거나 작은 숫자는 과학 기법(e) 사용
Infinity와 NaN도 Number 타입!
JavaScript는 정수/소수 구분 없이 모두 Number
매우 크거나 작은 숫자는 과학 기법(e) 사용
Infinity와 NaN도 Number 타입!
CHAPTER 03
Boolean — 참/거짓
true 또는 false, 둘 중 하나만 가능! 가장 간단한 타입이에요.
Boolean은 2가지만 있어요
// 참
let isStudent = true;
// 거짓
let isAdmin = false;
// 비교 결과도 Boolean
let result = 5 > 3; // true
let result2 = 5 < 3; // false
let isStudent = true;
// 거짓
let isAdmin = false;
// 비교 결과도 Boolean
let result = 5 > 3; // true
let result2 = 5 < 3; // false
Boolean은 언제 쓸까?
실제 예시
- 로그인 여부 확인:
isLoggedIn = true - 관리자 권한:
isAdmin = false - 게임 진행 중:
isPlaying = true - 나이 제한:
age >= 18
💡 Boolean 비유
라이트 스위치처럼 ON(true) / OFF(false) 중 하나
문이 열려있으면(true) / 닫혀있으면(false)
라이트 스위치처럼 ON(true) / OFF(false) 중 하나
문이 열려있으면(true) / 닫혀있으면(false)
CHAPTER 04
null vs undefined — 중요한 차이!
둘 다 "없음"을 의미하지만, 원인이 다르다는 게 핵심!
undefined: 변수만 선언했어요
// 변수는 만들었는데, 값을 안 넣음
let x;
console.log(x); // undefined (자동 할당)
// 함수가 값을 반환 안 하면
function noReturn() {
// return 없음
}
console.log(noReturn()); // undefined
let x;
console.log(x); // undefined (자동 할당)
// 함수가 값을 반환 안 하면
function noReturn() {
// return 없음
}
console.log(noReturn()); // undefined
📝 undefined는 JavaScript가 자동으로 만들어요!
"변수는 있는데 값은 비어있어" 라는 뜻
"변수는 있는데 값은 비어있어" 라는 뜻
null: 프로그래머가 의도적으로 "없음"
// 프로그래머가 명시적으로 null 할당
let user = null; // "이 값은 없다"고 명시
// 검색 결과가 없을 때
let result = findUser("존재하지 않는 사람");
// result = null (찾지 못함을 명시)
// 데이터 초기화
let data = null; // 아직 데이터 없음을 명시
let user = null; // "이 값은 없다"고 명시
// 검색 결과가 없을 때
let result = findUser("존재하지 않는 사람");
// result = null (찾지 못함을 명시)
// 데이터 초기화
let data = null; // 아직 데이터 없음을 명시
🎯 null은 프로그래머의 의도!
"이 값은 의도적으로 비워두겠다" 는 뜻
"이 값은 의도적으로 비워두겠다" 는 뜻
비교: undefined vs null
// ❌ null과 undefined는 다르다
let x; // undefined (자동)
let y = null; // null (명시적)
x === y; // false (다르다)
typeof x; // "undefined"
typeof y; // "object" (특이함!)
// ✅ 느슨한 비교로는 같음
x == y; // true (내용 비교)
let x; // undefined (자동)
let y = null; // null (명시적)
x === y; // false (다르다)
typeof x; // "undefined"
typeof y; // "object" (특이함!)
// ✅ 느슨한 비교로는 같음
x == y; // true (내용 비교)
💚 정리
undefined: 자동으로 만들어짐 (변수만 선언)
null: 프로그래머가 명시적으로 "없음" 표시
정리: null을 사용하면 의도가 명확해져요!
undefined: 자동으로 만들어짐 (변수만 선언)
null: 프로그래머가 명시적으로 "없음" 표시
정리: null을 사용하면 의도가 명확해져요!
CHAPTER 05
typeof 연산자 — 타입 확인하기
어떤 타입인지 빠르게 알아내는 도구!
typeof 사용법
// 문법 1: 연산자처럼
typeof 42; // "number"
// 문법 2: 함수처럼
typeof(42); // "number"
// 둘 다 결과는 동일!
typeof 42; // "number"
// 문법 2: 함수처럼
typeof(42); // "number"
// 둘 다 결과는 동일!
모든 타입 확인해보기
typeof "hello" // "string"
typeof 42 // "number"
typeof 3.14 // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" ⚠️
typeof {} // "object"
typeof [] // "object"
typeof 42 // "number"
typeof 3.14 // "number"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" ⚠️
typeof {} // "object"
typeof [] // "object"
⚠️ 특이한 경우:
이건 JavaScript의 오래된 버그입니다. null은 사실 object가 아니에요.
typeof null은 "object"를 반환해요!이건 JavaScript의 오래된 버그입니다. null은 사실 object가 아니에요.
다양한 typeof 예시 (콘솔로 직접 보기)
// 문자열
typeof "찐망고"; // ?
// 숫자
typeof 0; // ?
typeof -100; // ?
typeof Infinity; // ?
// 불린
typeof true; // ?
typeof false; // ?
// undefined / null
typeof undefined; // ?
typeof null; // ?
// 객체와 배열
typeof {}; // ?
typeof []; // ?
typeof () => {}; // ?
typeof "찐망고"; // ?
// 숫자
typeof 0; // ?
typeof -100; // ?
typeof Infinity; // ?
// 불린
typeof true; // ?
typeof false; // ?
// undefined / null
typeof undefined; // ?
typeof null; // ?
// 객체와 배열
typeof {}; // ?
typeof []; // ?
typeof () => {}; // ?
OUTPUT
실행하세요 →
💡 typeof를 언제 쓸까?
변수의 타입을 확인해서 처리 방식을 다르게 할 때
예: 숫자면 계산하고, 문자면 자르기 등
변수의 타입을 확인해서 처리 방식을 다르게 할 때
예: 숫자면 계산하고, 문자면 자르기 등
SUMMARY
데이터타입 완벽 정리
7가지 기본 타입
타입 정리표
| 타입 | 예시 | 특징 |
|---|---|---|
| String | "hello", `hi ${name}` |
따옴표 안의 모든 것 |
| Number | 42, 3.14, 1e6 |
정수/소수 모두 Number |
| Boolean | true, false |
오직 2가지만 존재 |
| undefined | let x; |
변수만 선언, 값 없음 |
| null | let x = null; |
의도적으로 "없음" |
| Object | {}, [] |
복잡한 데이터 |
| Symbol | Symbol("id") |
고유한 식별자 |
동적 타입의 힘!
// JavaScript는 타입이 자유로워요 (동적 타입)
let x = "안녕"; // 문자열
x = 42; // 숫자로 변경!
x = true; // 불린으로 변경!
x = null; // null로 변경!
// 모두 가능! 이를 '동적 타입(dynamically typed)'이라 합니다
let x = "안녕"; // 문자열
x = 42; // 숫자로 변경!
x = true; // 불린으로 변경!
x = null; // null로 변경!
// 모두 가능! 이를 '동적 타입(dynamically typed)'이라 합니다
💚 핵심 정리
JavaScript는 7가지 기본 타입 제공
변수의 타입은 언제든 변할 수 있음 (동적 타입)
typeof로 언제든 타입 확인 가능
null과 undefined는 다르다!
JavaScript는 7가지 기본 타입 제공
변수의 타입은 언제든 변할 수 있음 (동적 타입)
typeof로 언제든 타입 확인 가능
null과 undefined는 다르다!