프로그래밍의 첫걸음은 데이터를 저장하는 거예요. “사용자 이름이 뭐지?”, “클릭 횟수는 몇 번이지?” 이런 정보를 어딘가에 담아둬야 하거든요. 그게 바로 변수입니다.

변수가 뭔가요?

변수는 값을 담는 상자예요. 상자에 이름표를 붙이고, 그 안에 숫자나 문자를 넣는 거죠.

let name = "철수";

• let: 변수 만드는 키워드
• name: 변수 이름 (이름표)
• "철수": 값 (상자 안의 내용물)

변수 선언 방법: let, const, var

JavaScript에는 변수 만드는 방법이 3가지 있어요.

1. let - 값을 바꿀 수 있는 변수

let age = 20;
console.log(age); // 20

age = 21; // 값 변경 가능
console.log(age); // 21

실행 결과:

나이, 점수처럼 나중에 바뀔 수 있는 값은 let으로 선언하세요.

2. const - 값을 바꿀 수 없는 변수

const PI = 3.14;
console.log(PI); // 3.14

PI = 3.14159; // 에러 발생!

한 번 정하면 절대 안 바뀌는 값(생일, 주민번호 등)은 const로 선언합니다.

팁: 실무에서는 const를 기본으로 쓰고, 꼭 바꿔야 할 때만 let 씁니다. 버그가 줄어들어요.

3. var - 옛날 방식 (쓰지 마세요)

var oldWay = "이건 구식";

2015년 이전에 쓰던 방식이에요. 요즘은 안 씁니다. let과 const만 쓰세요.

왜 안 쓰나요?

• 같은 이름으로 여러 번 선언 가능 (헷갈림)
• 스코프(유효 범위)가 이상함
• 호이스팅 문제

데이터 타입

JavaScript에는 여러 종류의 데이터가 있어요.

1. 숫자 (Number)

let age = 25;
let price = 9900;
let temperature = -5.5;

정수, 소수 전부 Number 타입입니다.

let a = 10;
let b = 3;

console.log(a + b); // 13 (더하기)
console.log(a - b); // 7 (빼기)
console.log(a * b); // 30 (곱하기)
console.log(a / b); // 3.3333... (나누기)
console.log(a % b); // 1 (나머지)

실행 결과:

2. 문자열 (String)

let name = "홍길동";
let message = '안녕하세요';
let sentence = `반갑습니다`;

따옴표 3가지 전부 사용 가능해요. 큰따옴표(")든 작은따옴표(')든 상관없는데, ` (백틱)은 특별한 기능이 있습니다.

백틱의 장점:

let name = "철수";
let age = 20;

// 일반 따옴표
let intro1 = "제 이름은 " + name + "이고, 나이는 " + age + "살입니다.";

// 백틱 (템플릿 리터럴)
let intro2 = `제 이름은 ${name}이고, 나이는 ${age}살입니다.`;

console.log(intro2); // 제 이름은 철수이고, 나이는 20살입니다.

실행 결과:

${변수} 형식으로 변수를 문자열 안에 넣을 수 있어요. 훨씬 편합니다!

3. 불리언 (Boolean)

참(true) 또는 거짓(false) 두 가지 값만 있어요.

let isStudent = true;
let isAdult = false;

console.log(isStudent); // true
console.log(isAdult); // false

실행 결과:

조건문에서 엄청 많이 씁니다.

let age = 17;
let isAdult = age >= 18;

console.log(isAdult); // false

실행 결과:

4. undefined

변수를 선언만 하고 값을 안 넣으면 undefined예요.

let something;
console.log(something); // undefined

실행 결과:

“아직 정해지지 않음”이라는 의미입니다.

5. null

아무것도 없음을 의도적으로 나타낼 때 씁니다.

let value = null;
console.log(value); // null

실행 결과:

undefined vs null:

• undefined: 자동으로 부여됨 (깜빡하고 안 넣음)
• null: 개발자가 의도적으로 넣음 (비어있음을 명시)

타입 확인하기

변수의 타입을 확인하려면 typeof를 씁니다.

console.log(typeof 123); // "number"
console.log(typeof "안녕"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (버그지만 고치지 않음)

실행 결과:

재미있는 사실: null의 타입은 “object”로 나와요. JavaScript의 오래된 버그인데, 고치면 기존 코드가 다 망가져서 그냥 놔뒀대요.

변수 이름 규칙

변수 이름 지을 때 지켜야 할 규칙이 있어요.

필수 규칙 (안 지키면 에러)

// 1. 영문자, 숫자, _, $ 만 사용 가능
let userName = "OK";
let user_name = "OK";
let $price = "OK";
let 이름 = "가능하긴 한데 비추천";

// 2. 숫자로 시작하면 안 됨
let 1st = "에러!";
let first1 = "OK";

// 3. 예약어 사용 금지
let let = "에러!"; // let은 키워드라서 안 됨
let if = "에러!";

권장 사항 (안 지켜도 되지만 지키는 게 좋음)

// 1. camelCase 사용 (첫 단어 소문자, 나머지 단어 대문자 시작)
let userName = "좋은 이름";
let user_name = "가능하지만 비추";

// 2. 의미 있는 이름 사용
let a = "홍길동"; // 나쁜 예
let userName = "홍길동"; // 좋은 예

// 3. 상수는 대문자와 _ 사용
const MAX_SIZE = 100;
const API_KEY = "abc123";

실전 예제

간단한 계산기를 만들어볼게요.

// 상품 가격
const productPrice = 25000;

// 수량
let quantity = 3;

// 총 가격
let totalPrice = productPrice * quantity;
console.log(`총 가격: ${totalPrice}원`); // 총 가격: 75000원

// 할인율 10%
const discountRate = 0.1;
let discountPrice = totalPrice * (1 - discountRate);
console.log(`할인가: ${discountPrice}원`); // 할인가: 67500원

실행 결과:

자주 하는 실수

1. const로 선언한 변수 변경 시도

const name = "철수";
name = "영희"; // 에러!

해결: let으로 바꾸거나, 다른 변수 사용

2. 변수 선언 전에 사용

console.log(score); // 에러!
let score = 100;

해결: 선언을 먼저 하세요

3. 오타

let userName = "철수";
console.log(username); // 에러! (U가 소문자)

해결: 대소문자 정확히 입력

다음 단계

다음 글에서는 연산자와 조건문을 배웁니다. 데이터를 비교하고, “만약 ~라면”이라는 조건을 만드는 방법을 알아볼 거예요.

변수는 프로그래밍의 기초 중의 기초예요. 지금 잘 이해해두면 나중이 훨씬 편합니다!

---

JavaScript 독학 가이드 시리즈:

• 이전: JavaScript 독학 가이드 - 소개 및 시작하기
• 다음: JavaScript 독학 가이드 - 연산자와 조건문

← 블로그 목록으로