3장. 변수와 상수

변수란?

변수(Variable)는 데이터를 저장하는 메모리 공간에 붙인 이름입니다. 프로그램에서 데이터를 임시로 저장하고 나중에 사용하기 위해 변수를 사용합니다.

변수의 특징

변수는 이름(식별자)을 가지고 있습니다
변수에 저장된 값은 변경 가능합니다
변수는 선언 후에 사용할 수 있습니다
변수는 타입을 미리 선언하지 않습니다 (동적 타입)

변수 선언 방법

var (사용하지 않음 ❌)

var age = 20;
var name = '홍길동';

문제점:

함수 스코프만 인식 (블록 스코프 무시)
호이스팅(Hoisting) 문제
중복 선언 가능
현재는 사용하지 않는 것을 권장

let (변수 선언 ✅)

let age = 20;
let name = '홍길동';

특징:

블록 스코프 지원
값 변경 가능
중복 선언 불가 (같은 스코프에서)
변수를 선언할 때 사용

const (상수 선언 ✅)

const name = '홍길동';
const PI = 3.14159;

특징:

블록 스코프 지원
값 변경 불가 (상수)
선언과 동시에 초기화 필수
상수를 선언할 때 사용 (권장)

변수 선언 규칙

1. 선언과 초기화

// 선언만 하기
let age;
console.log(age);  // undefined

// 선언과 동시에 초기화
let name = '홍길동';
console.log(name);  // '홍길동'

// 값 변경
name = '김철수';
console.log(name);  // '김철수'

2. 여러 변수 동시 선언

// 각각 선언
let a = 10;
let b = 20;
let c = 30;

// 한 줄에 선언
let a = 10, b = 20, c = 30;

// 여러 줄로 선언 (가독성 좋음)
let a = 10,
    b = 20,
    c = 30;

3. 변수명 규칙 (식별자 규칙)

올바른 변수명

let userName;        // 카멜 케이스 (권장)
let user_name;       // 스네이크 케이스
let $price;          // $ 사용 가능
let _count;          // _ 사용 가능
let name2;           // 숫자 포함 가능 (시작은 안 됨)

잘못된 변수명

let 2name;           // ❌ 숫자로 시작 불가
let user-name;       // ❌ 하이픈 사용 불가
let let;             // ❌ 예약어 사용 불가
let user name;       // ❌ 공백 사용 불가

변수명 규칙 요약

영문자, 숫자, 언더스코어(_), 달러 기호($)만 사용 가능
숫자로 시작할 수 없음
예약어는 사용 불가 (let, const, if, for, function 등)
대소문자를 구분함 (name과 Name은 다름)
의미 있는 이름을 사용하는 것이 좋음

상수 (const)

const의 특징

const PI = 3.14159;
const MAX_SIZE = 100;
const COMPANY_NAME = 'ABC Corp';

// 오류: 상수는 변경할 수 없음
// PI = 3.14;  // TypeError: Assignment to constant variable.

const 사용 권장 사례

변경되지 않는 값

const TAX_RATE = 0.1;
const MAX_USERS = 1000;

객체나 배열의 참조

const user = {
    name: '홍길동',
    age: 20
};

// 객체의 속성은 변경 가능
user.age = 21;  // ✅ 가능
// user = {};   // ❌ 불가능 (새로운 객체 할당 불가)

함수 선언

const greet = function(name) {
    return `안녕하세요, ${name}님!`;
};

const vs let 선택 가이드

기본적으로 const 사용 (값이 변경되지 않을 때)
값이 변경될 때만 let 사용

// const 사용 (권장)
const name = '홍길동';
const birthYear = 2000;

// let 사용 (값이 변경될 때)
let age = 20;
age = 21;  // 나이는 변경될 수 있음

let count = 0;
count++;  // 카운터는 증가함

스코프 (Scope)

블록 스코프 (Block Scope)

let과 const는 블록 스코프를 가집니다.

{
    let x = 10;
    const y = 20;
    console.log(x);  // 10
    console.log(y);  // 20
}

// 블록 밖에서는 접근 불가
// console.log(x);  // ReferenceError
// console.log(y);  // ReferenceError

함수 스코프

function test() {
    let x = 10;
    const y = 20;
    console.log(x);  // 10
    console.log(y);  // 20
}

// 함수 밖에서는 접근 불가
// console.log(x);  // ReferenceError

전역 스코프

let globalVar = '전역 변수';

function test() {
    console.log(globalVar);  // '전역 변수' (접근 가능)
}

console.log(globalVar);  // '전역 변수'

변수 사용 예제

예제 1: 기본 사용

// 변수 선언 및 사용
let userName = '홍길동';
let userAge = 25;
let isActive = true;

console.log('이름:', userName);
console.log('나이:', userAge);
console.log('활성 상태:', isActive);

// 값 변경
userAge = 26;
console.log('변경된 나이:', userAge);

예제 2: 계산에 사용

let price = 10000;
let quantity = 3;
let discount = 0.1;

let total = price * quantity;
let finalPrice = total * (1 - discount);

console.log('원가:', price);
console.log('수량:', quantity);
console.log('총액:', total);
console.log('할인 후 가격:', finalPrice);

예제 3: 상수 사용

const TAX_RATE = 0.1;
const SHIPPING_COST = 3000;

let productPrice = 50000;
let tax = productPrice * TAX_RATE;
let totalPrice = productPrice + tax + SHIPPING_COST;

console.log('상품 가격:', productPrice);
console.log('세금:', tax);
console.log('배송비:', SHIPPING_COST);
console.log('최종 가격:', totalPrice);

예제 4: 변수 재할당

let count = 0;
console.log('초기값:', count);

count = count + 1;
console.log('1 증가:', count);

count += 1;  // count = count + 1과 동일
console.log('또 1 증가:', count);

count++;  // count = count + 1과 동일
console.log('또 1 증가:', count);

변수명 네이밍 컨벤션

카멜 케이스 (Camel Case) - 권장

let userName;
let userAge;
let isActiveUser;
let totalPrice;

스네이크 케이스 (Snake Case)

let user_name;
let user_age;
let is_active_user;
let total_price;

상수는 대문자 + 언더스코어

const MAX_SIZE = 100;
const TAX_RATE = 0.1;
const API_BASE_URL = 'https://api.example.com';

의미 있는 이름 사용

// ❌ 나쁜 예
let x = 10;
let data = '홍길동';
let flag = true;

// ✅ 좋은 예
let userCount = 10;
let userName = '홍길동';
let isLoggedIn = true;

변수와 상수 비교

구분	let	const
값 변경	✅ 가능	❌ 불가능
재선언	❌ 불가능	❌ 불가능
초기화	선택사항	필수
스코프	블록 스코프	블록 스코프
사용 시기	값이 변경될 때	값이 고정될 때

주의사항

1. 선언하지 않은 변수 사용

// ❌ 오류 발생
console.log(undefinedVar);  // ReferenceError

// ✅ 올바른 방법
let definedVar = 10;
console.log(definedVar);

2. const는 선언과 동시에 초기화 필수

// ❌ 오류 발생
const PI;
PI = 3.14;  // SyntaxError

// ✅ 올바른 방법
const PI = 3.14;

3. 같은 이름의 변수 중복 선언

let name = '홍길동';
// let name = '김철수';  // SyntaxError (같은 스코프에서)

// 다른 스코프에서는 가능
{
    let name = '김철수';  // ✅ 가능
    console.log(name);  // '김철수'
}
console.log(name);  // '홍길동'

연습 문제

변수 선언 및 출력
- 이름, 나이, 주소를 변수로 선언하고 출력하는 프로그램을 작성하세요.
계산 프로그램
- 두 수를 변수에 저장하고, 합, 차, 곱, 나눗셈 결과를 출력하세요.
상수 사용
- 원주율(PI)을 상수로 선언하고, 반지름이 5인 원의 넓이를 계산하세요.
변수명 연습
- 다음 변수명 중 올바른 것과 잘못된 것을 구분하세요:
  - userName
  - 2ndPlace
  - user-name
  - _count
  - let

다음 장 예고

다음 장에서는 자바스크립트의 데이터 타입(Number, String, Boolean 등)에 대해 학습합니다.

'FrontEnd > Javascript' 카테고리의 다른 글

6장. 조건문 (0)	2026.01.06
5장. 연산자 (0)	2026.01.06
4장. 데이터 타입 (0)	2025.12.30
2장. 자바스크립트 실행 환경 (0)	2025.12.30
1장. 자바스크립트란? (0)	2025.12.30

3장. 변수와 상수

3장. 변수와 상수

변수란?

변수의 특징

변수 선언 방법

var (사용하지 않음 ❌)

let (변수 선언 ✅)

const (상수 선언 ✅)

변수 선언 규칙

1. 선언과 초기화

2. 여러 변수 동시 선언

3. 변수명 규칙 (식별자 규칙)

올바른 변수명

잘못된 변수명

변수명 규칙 요약

상수 (const)

const의 특징

const 사용 권장 사례

const vs let 선택 가이드

스코프 (Scope)

블록 스코프 (Block Scope)

함수 스코프

전역 스코프

변수 사용 예제

예제 1: 기본 사용

예제 2: 계산에 사용

예제 3: 상수 사용

예제 4: 변수 재할당

변수명 네이밍 컨벤션

카멜 케이스 (Camel Case) - 권장

스네이크 케이스 (Snake Case)

상수는 대문자 + 언더스코어

의미 있는 이름 사용

변수와 상수 비교

주의사항

1. 선언하지 않은 변수 사용

2. const는 선언과 동시에 초기화 필수

3. 같은 이름의 변수 중복 선언

연습 문제

다음 장 예고

'FrontEnd > Javascript' 카테고리의 다른 글

관련글

티스토리툴바