let, var, const 기초

let, var, const 차이점

• 변수를 선언하는데 사용되는 키워드이다.
• 이들 간의 주요 차이점은 변수의 스코프, 재할당 가능성 그리고 호이스팅 방식에 있다.

* 스코프(scope): 사전적 의미는 범위이고, 프로그래밍에서의 의미도 비슷한 개념으로 변수에 접근할 수 있는 범위로 재해석 하면 된다.

* 호이스팅(hoisting): 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

 

호이스팅과 스코프

 

var

스코프(scope)

• var로 선언된 변수는 함수 스코프(function scope) 또는 전역 스코프(global scope)를 가진다.
• 이는 블록 스코프(block scope)를 지원하지 않는다는 의미이다.

function example() {
	if(true) {
    	var x = 5;
    }
    console.log(x) // 5, 블록 외부에서도 접근 가능
}
example();

 

호이스팅(hoisting)

• var 변수 선언은 호이스팅되며, 선언과 초기화가 분리되어 처리된다.
• 변수 선언은 스코프의 맨위로 끌어올려지지만, 초기화는 실제 코드 위치에서 이루어진다.

console.log(y) // undefined, y는 선언되었지만 초기화되기 전에 참조함
var y = 5;

 

let

스코프(scope)

• let으로 선언된 변수는 블록 스코프(block scope)를 가진다.
• 즉, 변수가 선언된 블록 내에서만 접근이 가능하다.

function example() {
	if(true) {
    	let x = 5;
        console.log(x); // 5
    }
    console.log(x) // ReferenceError: y is not defined.
}
example();

 

호이스팅(hoisting)

• let 변수도 호이스팅 되지만, var와 달리 초기화 전에 접근할 수 없으므로 '일시적 사각지대 (Temporal Dead Zone, TDZ)'가 발생한다.

console.log(y); // ReferenceError: y is not defined
let y = 10;

 

const

스코프(scope)

• const도 블록 스코프(block scope)를 가진다.

if(true) {
	const x = 5;
    console.log(x); // 5
}
console.log(x) // ReferenceError: x is not defined

 

재할당 불가(constant)

• const로 선언된 변수는 재할당이 불가능하다.
• 즉, 값을 한 번 설정하면 변경할 수 없다.

const x = 10;
x = 5 // TypeError: Assignment to constant variable

 

호이스팅(hoisting)

• const도 호이스팅 되지만 let과 마찬가지로 '일시적 사각지대 (Temporal Dead Zone, TDZ)'가 발생한다.

console.log(x); // ReferenceError: x is not defined
const x = 10;

 

요약

• 스코프(scope)
  • var: 함수 스코프(function scope) 또는 전역 스코프(global scope)
  • let, const: 블록 스코프
• 호이스팅(hoisting)
  • var: 선언만 호이스팅되고 초기화는 원래 위치에서 발생
  • let, const: 호이스팅되지만 TDZ 발생으로 초기화 전에는 접근 불가
• 재할당
  • var, let: 재할당 가능
  • const: 재할당 불가