[JavaScript] var, let, const

wldud·2025년 2월 28일

JavaScript

자바스크립트

목록 보기

2/15

var, let, const

자바스크립트에서 변수를 선언할 때 var, let, const를 사용합니다.

변수 선언 방식

var: 중복 선언과 재할당이 가능
let: 중복 선언은 불가능 하며, 재할당은 가능
const: 중복 선언과 재할당 둘 다 불가능

var

아래와 같이 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다.
이런 특징으로 인해 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어지게 될 수 있다.

let

아래와 같이 중복 선언은 불가하며, 재할당은 가능합니다.

const

아래와 같이 중복 선언과 재할당 모두 불가능합니다.

호이스팅(Hoisting)

호이스트(Hoist)의 뜻은 무엇인가를 들어 올리거나 끌어 올리는 동작을 설명합니다.
JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명합니다.

var 선언문 호이스팅

아래 코드를 실행시키면 undefined가 반환됩니다.
이 코드가 에러를 발생시키지 않는 이유는 호이스팅 때문입니다.
JavaScript 인터프리터는 변수 생성의 선언(var greeting)단계 및 할당( = "hello")단계를 분할합니다. 선언 부분은 코드가 실행되기 전에 현재 범위의 맨 위로 호이스팅되고 초기에 undefined 값이 할당됩니다.
초기화 되기 전에 greeting 변수를 사용할 수 있습니다.

함수 선언문 호이스팅

함수 선언문도 함수 생성 전에 호출하면 올바른 출력이 됩니다.

let/const 선언문 호이스팅

let 또는 const로 변수를 선언하면 실제로 변수는 여전히 호이스팅됩니다.
그러나 var와 차이점은 var는 실제 할당 값이 할당되기전 까지 undefined 값이 할당됩니다.
하지만 let/const를 사용하면 변수 초기에 어떤 값도 할당되지 않습니다.

var과 달리 초기화되지 않습니다. 코드가 실행되면 변수에 값을 할당하기 전에 콘솔 로그가 발생하므로 위의 오류가 발생합니다. const로 변수를 선언하는 것도 같은 방식으로 작동합니다.
이러한 일이 발생하는 이유를 TDZ(Temporal Dead Zone)이라고 합니다. 일시적 데드 존은 변수를 사용할 수 없는 일시적인 비활성화 상태를 나타냅니다.