JavaScript 변수와 상수, 스코프와 호이스팅

JavaScript 변수와 상수, 스코프와 호이스팅

JavaScript의 변수와 상수는 모든 코드의 기초입니다. 변수 선언 방식 (var, let, const)에 따라 동작 방식이 크게 달라지며, 스코프와 호이스팅 같은 개념이 변수의 접근성과 실행 순서에 영향을 미칩니다. 이 글에서는 이러한 개념을 체계적으로 정리하고, 이해를 돕기 위한 예제와 설명을 제공합니다.

 

 

목차

1. 변수와 상수의 개요
2. var, let, const의 차이점
3. 스코프(Scope) 이해하기
4. 호이스팅(Hoisting)의 작동 원리
5. 실제 예제
6. 변수와 상수 활용 모범 사례

 

1. 변수와 상수의 개요

JavaScript에서 변수는 데이터를 저장하기 위한 컨테이너 역할을 합니다. 변수 선언에는 var, let, const 세 가지 방법이 있습니다. 각각의 방식은 스코프와 재할당 가능 여부에서 차이가 있습니다.

변수와 상수의 핵심 특징

• var: 함수 스코프, 재선언 가능
• let: 블록 스코프, 재선언 불가
• const: 블록 스코프, 재선언 및 재할당 불가

 

 

2. var, let, const의 차이점

특성	var	let	const
스코프	함수	블록	블록
재선언	가능	불가능	불가능
재할당	가능	가능	불가능

 

 

3. 스코프(Scope) 이해하기

변수의 스코프는 변수에 접근할 수 있는 코드의 범위를 결정합니다. var는 함수 스코프를 따르며, let과 const는 블록 스코프를 따릅니다.

예제

function example() {
    if (true) {
        var varVariable = "var";
        let letVariable = "let";
        const constVariable = "const";
    }
    console.log(varVariable); // var
    console.log(letVariable); // ReferenceError
    console.log(constVariable); // ReferenceError
}
example();
        

 

 

 

 

4. 호이스팅(Hoisting)의 작동 원리

호이스팅은 변수와 함수 선언이 코드의 최상단으로 끌어올려진 것처럼 동작하는 JavaScript의 특징입니다. var는 선언과 초기화가 끌어올려지지만, let과 const는 선언만 호이스팅됩니다.

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 20;
        

 

 

5. 실제 예제

아래는 변수를 적절히 사용하여 코드를 작성한 간단한 예제입니다:

const MAX_USERS = 5;
let currentUsers = 0;

function addUser() {
    if (currentUsers < MAX_USERS) {
        currentUsers++;
        console.log("User added. Current users:", currentUsers);
    } else {
        console.log("Maximum users reached.");
    }
}
addUser();
addUser();
        

 

 

6. 변수와 상수 활용 모범 사례

• 상수는 const로 선언하여 의도를 명확히 표현
• 필요한 최소 범위의 스코프에서 변수 선언
• 호이스팅을 고려한 선언 위치 정리