JavaScript 변수
값을 저장하고 관리하는 방법
변수란?
var / let / const
데이터타입
타입 확인
CHAPTER 01
변수란?
값을 저장하는 상자예요. 프로그래밍의 가장 기초적인 개념입니다.
정의
CONCEPT
Variable (변수)
= 데이터를 임시로 저장하는 공간
= 값을 저장하는 상자
한 변수 = 한 개의 값만 저장 가능
새로운 값을 넣으면 = 이전 값은 사라짐
= 데이터를 임시로 저장하는 공간
= 값을 저장하는 상자
한 변수 = 한 개의 값만 저장 가능
새로운 값을 넣으면 = 이전 값은 사라짐
변수 만들기 (선언 + 초기화)
// 방법 1: 선언 먼저, 값 나중
let name;
name = "찐망고";
// 방법 2: 선언하면서 값 할당 (초기화)
let age = 20;
let score = 95.5;
let name;
name = "찐망고";
// 방법 2: 선언하면서 값 할당 (초기화)
let age = 20;
let score = 95.5;
변수 사용하기
let name = "찐망고";
let age = 20;
// 값 출력
console.log(name); // "찐망고"
console.log(age); // 20
// 값 변경
age = 21;
console.log(age); // 21
let age = 20;
// 값 출력
console.log(name); // "찐망고"
console.log(age); // 20
// 값 변경
age = 21;
console.log(age); // 21
OUTPUT
실행하세요 →
💡 중요: = 기호는 수학의 '같다'가 아니라 '오른쪽 값을 왼쪽에 저장'이라는 의미예요. 이를 대입(할당)이라고 부릅니다.
변수명 규칙
// ❌ 안 되는 이름들
let my age = 10; // 공백 불가
let my-age = 10; // 하이픈 불가
let 1age = 10; // 숫자로 시작 불가
// ✅ 가능한 이름들
let myAge = 10; // camelCase ✅
let my_age = 10; // snake_case ✅
let MY_AGE = 10; // UPPER_CASE ✅
let my age = 10; // 공백 불가
let my-age = 10; // 하이픈 불가
let 1age = 10; // 숫자로 시작 불가
// ✅ 가능한 이름들
let myAge = 10; // camelCase ✅
let my_age = 10; // snake_case ✅
let MY_AGE = 10; // UPPER_CASE ✅
✅ 대소문자 구별: age와 Age는 다른 변수예요!
CHAPTER 02
var vs let vs const
3가지 선언 방식의 차이를 완벽하게 이해해야 안전한 코드를 쓸 수 있어요.
3가지 방식 비교
COMPARISON
| 항목 | var | let | const |
|---|---|---|---|
| 중복선언 | ✅ 가능 | ❌ 불가 | ❌ 불가 |
| 값 재할당 | ✅ 가능 | ✅ 가능 | ❌ 불가 |
| 추천 | ❌ 금지 | ✅ 권장 | ✅ 권장 |
let — 값이 변하는 변수
USE CASE
💚 사용 상황:
카운터, 점수 증감, 상태 변경, 누적 계산
카운터, 점수 증감, 상태 변경, 누적 계산
// 재할당 가능
let count = 0;
count = 1; // ✅ OK
count = 2; // ✅ OK
// 중복선언 불가
let score = 100;
let score = 200; // ❌ SyntaxError!
let count = 0;
count = 1; // ✅ OK
count = 2; // ✅ OK
// 중복선언 불가
let score = 100;
let score = 200; // ❌ SyntaxError!
const — 절대 안 바뀌는 상수
USE CASE
💚 사용 상황:
API 키, 설정값, 상수, 고정 데이터
API 키, 설정값, 상수, 고정 데이터
const PI = 3.14159;
const MAX_SCORE = 100;
const API_KEY = "abc123xyz";
// 재할당 불가
PI = 3.14; // ❌ TypeError!
const MAX_SCORE = 100;
const API_KEY = "abc123xyz";
// 재할당 불가
PI = 3.14; // ❌ TypeError!
var — 절대 쓰면 안 됨 ❌
WARNING
var는 예측 불가능한 버그를 만들어요.
절대 사용하면 안 됩니다!
절대 사용하면 안 됩니다!
문제점 1️⃣: 중복 선언 가능
var x = 10;
console.log(x); // 10
// 실수로 다시 선언
var x = 20; // ❌ 중복 허용!
console.log(x); // 20 (이전 값 사라짐)
console.log(x); // 10
// 실수로 다시 선언
var x = 20; // ❌ 중복 허용!
console.log(x); // 20 (이전 값 사라짐)
⚠️ 문제: 같은 이름으로 실수로 선언해도 에러가 안 나요. 코드가 복잡해지면 찾기 어려운 버그가 됩니다.
문제점 2️⃣: 함수 스코프만 인정
function example() {
var x = 10;
if (true) {
var y = 20;
}
console.log(y); // 20 (if 블록 밖인데!)
}
example();
var x = 10;
if (true) {
var y = 20;
}
console.log(y); // 20 (if 블록 밖인데!)
}
example();
⚠️ 문제: if 블록 안에서 선언한 y가 if 블록 밖에서도 접근돼요. 예상과 다른 결과! (자세한 설명은 다음 강의 "스코프"에서)
비교: var vs let
// ❌ var 문제
var score = 100;
if (true) {
var score = 200; // 같은 변수
}
console.log(score); // 200 (의도와 다름)
// ✅ let 안전
let score = 100;
if (true) {
let score = 200; // 다른 변수
}
console.log(score); // 100 (원래대로)
var score = 100;
if (true) {
var score = 200; // 같은 변수
}
console.log(score); // 200 (의도와 다름)
// ✅ let 안전
let score = 100;
if (true) {
let score = 200; // 다른 변수
}
console.log(score); // 100 (원래대로)
✅ let은 블록 단위로 범위가 나뉘어 안전합니다!
var는 if 블록 내의 변수가 블록 밖에서도 접근돼요. 의도와 다른 결과!
var는 if 블록 내의 변수가 블록 밖에서도 접근돼요. 의도와 다른 결과!
실제 예제: let vs const
// 게임 점수 관리
const PLAYER_NAME = "찐망고";
const MAX_SCORE = 100;
let currentScore = 0;
// 플레이 중
currentScore = 10; // 점수 획득
currentScore = 25; // 점수 획득
// PLAYER_NAME = "찐망고"; // ❌ 불가!
// MAX_SCORE = 200; // ❌ 불가!
const PLAYER_NAME = "찐망고";
const MAX_SCORE = 100;
let currentScore = 0;
// 플레이 중
currentScore = 10; // 점수 획득
currentScore = 25; // 점수 획득
// PLAYER_NAME = "찐망고"; // ❌ 불가!
// MAX_SCORE = 200; // ❌ 불가!
💚 변수 선언 황금 법칙
1️⃣ 기본으로
2️⃣ 값이 변해야 하면
3️⃣ 절대로
1️⃣ 기본으로
const 사용2️⃣ 값이 변해야 하면
let으로 변경3️⃣ 절대로
var 쓰지 마기
CHAPTER 03
데이터타입 (Data Type)
JavaScript는 자동으로 타입을 판단해요. 각 타입이 뭔지는 알아야 합니다.
6가지 기본 데이터타입
TYPES
| 타입 | 설명 | 예시 | typeof |
|---|---|---|---|
| String | 문자열 | "찐망고", 'hello' | "string" |
| Number | 숫자 (정수 + 소수) | 20, 3.14, -5 | "number" |
| Boolean | 참/거짓 | true, false | "boolean" |
| Null | 빈 값 (의도적) | null | "object" ⚠️ |
| Undefined | 정의 안 됨 | undefined | "undefined" |
| Object | 객체 (배열, 함수) | {}, [] | "object" |
String — 문자열
// 큰따옴표 또는 작은따옴표
let name = "찐망고";
let greeting = '안녕';
// 템플릿 리터럴 (더 편함)
let message = `안녕, ${name}!`;
console.log(message); // "안녕, 찐망고!"
let name = "찐망고";
let greeting = '안녕';
// 템플릿 리터럴 (더 편함)
let message = `안녕, ${name}!`;
console.log(message); // "안녕, 찐망고!"
Number — 숫자
// 정수
let age = 20;
let count = -5;
// 소수 (실수)
let pi = 3.14159;
let price = 99.99;
// 계산
let result = 10 + 5; // 15
let age = 20;
let count = -5;
// 소수 (실수)
let pi = 3.14159;
let price = 99.99;
// 계산
let result = 10 + 5; // 15
Boolean — 참/거짓
let isStudent = true;
let isAdmin = false;
// 비교 결과
let result = 10 > 5; // true
let result2 = 10 === 5; // false
let isAdmin = false;
// 비교 결과
let result = 10 > 5; // true
let result2 = 10 === 5; // false
Null vs Undefined
// null = 의도적으로 값이 없음
let user = null; // "값이 없다"고 명시
// undefined = 정의되지 않음 (자동)
let x; // 선언만 함
console.log(x); // undefined (자동 할당)
let user = null; // "값이 없다"고 명시
// undefined = 정의되지 않음 (자동)
let x; // 선언만 함
console.log(x); // undefined (자동 할당)
⚠️ 특이점: typeof null은 "object"를 반환해요. 이건 JavaScript의 오래된 버그예요.
타입 확인하기
typeof "찐망고" // "string"
typeof 20 // "number"
typeof 3.14 // "number"
typeof true // "boolean"
typeof null // "object" (버그!)
typeof undefined // "undefined"
typeof [] // "object"
typeof 20 // "number"
typeof 3.14 // "number"
typeof true // "boolean"
typeof null // "object" (버그!)
typeof undefined // "undefined"
typeof [] // "object"
OUTPUT
실행하세요 →
실제 예제: 여러 데이터타입
let name = "찐망고"; // String
let age = 20; // Number
let height = 175.5; // Number (소수)
let isStudent = true; // Boolean
let phoneNumber = null; // Null
let address; // Undefined
let age = 20; // Number
let height = 175.5; // Number (소수)
let isStudent = true; // Boolean
let phoneNumber = null; // Null
let address; // Undefined
SUMMARY
변수 정리
지금까지 배운 것
CHECKLIST
- ✅ 변수란? 값을 저장하는 상자
- ✅ 변수 선언: let, const, var (기본으로 const 사용)
- ✅ 중복선언: let/const는 불가, var는 가능 (위험)
- ✅ 재할당: let은 가능, const는 불가
- ✅ 데이터타입: String, Number, Boolean, Null, Undefined, Object
- ✅ typeof: 변수의 타입을 확인하는 방법
💚 다음으로 배울 것:
다음 강의에서 스코프와 호이스팅을 배워요.
변수가 어디서 사용 가능한지, 왜 버그가 발생하는지 이해할 수 있어요!
다음 강의에서 스코프와 호이스팅을 배워요.
변수가 어디서 사용 가능한지, 왜 버그가 발생하는지 이해할 수 있어요!