자바스크립트의 const, let, var

 

자바스크립트의 변수 선언 방식에 대해 알아보겠습니다

 

자바스크립트에서는 var, let, const 세 가지 방법으로 변수를 선언할 수 있으며, 각각 스코프 범위와 호이스팅 방식에 차이가 있습니다.

 

1. var

1) var는 함수 스코프(Function Scope)를 가집니다.

함수 스코프란 변수가 선언된 함수 전체에서 접근 가능하다는 의미입니다.

즉, 중괄호({})로 감싸진 블록 내부에서 선언된 변수라도, 함수 내라면 블록 밖에서도 참조할 수 있습니다.

 

function a() {
  if (true) {
    var x = 2;
  }

  console.log(x); // 출력: 2 (에러 아님)
}

 

 

2) var는 호이스팅(hoisting)이 됩니다.

호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전에 변수 선언을 코드 상단으로 끌어올리는 개념입니다.

단, 끌어올려지는 것은 선언만이며, 할당은 끌어올려지지 않습니다.

console.log(x); // 출력: undefined
var x = 2;

위 코드는 실제로는 아래처럼 동작합니다:

var x;
console.log(x); // undefined
x = 2;

 

 

 

2. const

1) const는 블록 스코프(Block Scope)를 가집니다.

 

블록({}) 내부에서만 접근할 수 있으며, 블록을 벗어나면 참조할 수 없습니다.

function example() {
  if (true) {
    let y = 20;
    const z = 30;
  }
  console.log(y); // ❌ ReferenceError
  console.log(z); // ❌ ReferenceError
}

2) const는 초기값을 반드시 할당해야 하며, 이후 값을 변경할 수 없습니다.

그래서 상수(constant)로 사용되며, 변하지 않는 값을 저장할 때 주로 사용됩니다.

일반적으로는 const로 변수를 선언하고, 값이 바뀔 필요가 있을 때만 let을 사용합니다.

 

 

3. let

1) let 역시 블록 스코프(Block Scope)를 가집니다.

const와 마찬가지로 블록 내부에서만 유효합니다.

 

2) let은 값을 나중에 변경할 수 있습니다.

재할당이 가능하기 때문에 반복문 등에서 자주 사용됩니다.

 

let count = 0;
count = count + 1; // ✅ 가능

 

 

4. 함수 선언과 함수 표현식의 호이스팅 차이

1) 함수 선언문(Function Declaration)은 완전히 호이스팅됩니다.

즉, 선언 전에 호출해도 정상적으로 실행됩니다.

sayHello(); // 출력: Hello!

function sayHello() {
  console.log("Hello!");
}

함수 선언문은 변수 선언과 함수 정의 전체가 한꺼번에 호이스팅되기 때문에, 코드 상단에서 호출하더라도 에러가 발생하지 않습니다.

 

 

2) var로 선언한 함수 표현식(Function Expression)은 호이스팅될 때 undefined로 초기화됩니다.

함수 표현식은 var로 선언되었기 때문에 선언만 호이스팅되고, 함수 내용은 나중에 할당됩니다.

sayHi(); // ❌ TypeError: sayHi is not a function

var sayHi = function () {
  console.log("Hi!");
};

이 코드는 내부적으로 아래처럼 해석됩니다:

var sayHi;
sayHi(); // ❌ TypeError
sayHi = function () {
  console.log("Hi!");
};

즉, sayHi는 함수로 인식되기 전에 undefined 상태이기 때문에, 호출 시 에러가 발생합니다.