🔎 var, let, const 중복 선언 허용, 스코프, 호이스팅 관점에서 비교
자바스크립트에서 변수를 선언할 때 사용되는 키워드로는 var, let, const가 있다.
스코프와 호이스팅에 대해 설명 후 var, let, const의 특성을 중복 선언 허용 여부, 스코프, 호이스팅과 관련하여 비교해 보려고 한다.
🤔 Scope
스코프는 함수 스코프와 블록 스코프로 나뉜다.
1) 함수 스코프(Function Scope)
- 변수가 함수 내에서 선언되었을 때 해당 함수 내에서만 유효한 범위를 가진다.
- 함수 스코프를 가진 변수는 함수 외부에서는 접근할 수 없다.
function exampleFunction() {
var localVar = 10;
console.log(localVar); // 10
}
exampleFunction();
console.log(localVar); // ReferenceError: localVar is not defined2) 블록 스코프(Block Scope)
- 변수가 중괄호
{}로 둘러싸인 블록 내에서 선언되었을 때 해당 블록 내에서만 유효한 범위를 가진다. - 주로 if문, for문, while문, 함수 등의 블록 내에서 변수를 선언할 때 적용
if (true) {
let blockVar = 20;
console.log(blockVar); // 20
}
console.log(blockVar); // ReferenceError: blockVar is not defined🤔 Hoisting
호이스팅은 자바스크립트에서 변수 및 함수 선언이 스코프의 최상단으로 끌어올려지는 현상이다. 이 현상은 코드 실행 전에 발생하며, 선언부가 실제로 코드에서 위치한 곳과는 상관없이 동작한다. 변수 호이스팅과 함수 호이스팅으로 나뉜다. 변수와 함수 선언문이 호이스팅은 되지만, 할당(초기화)은 호이스팅되지 않는다.
1) 변수 호이스팅(Variable Hoisting)
console.log(x); // undefined
var x = 5;
console.log(x); // 5위 코드에서 변수 x는 선언되기 전에 참조되었으나, 호이스팅에 의해 선언부가 코드의 맨 위로 끌어올려지기 때문에 에러가 발생하지 않고 undefined로 초기화된다.
2) 함수 호이스팅(Function Hoisting)
sayHello(); // "Hello, World!"
function sayHello() {
console.log("Hello, World!");
}위 코드에서 함수 sayHello()가 선언되기 전에 호출되었지만, 함수 선언문은 호이스팅에 의해 코드의 맨 위로 끌어올려지기 때문에 정상적으로 실행된다.
✨ var
- ES5 이전부터 사용되었던 변수 선언 방식
- 중복 선언이 허용되어서, 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않는다.
- 함수 스코프(Function scope)를 가지며, 함수 내에서 선언된 변수는 함수 내에서만 유효하다.
- 호이스팅(Hoisting)이 발생하여 변수 선언이 스코프의 최상단으로 끌어올려지지만, 초기화는 끌어올려지지 않는다. 그래서 아래 코드에서 첫 행은
undefined가 된다.
console.log(foo); // undefined
var foo = "Hello";
console.log(foo); // "Hello"✨ let
- ES6부터 도입되었다.
- 중복 선언이 허용되지 않으며, 같은 이름의 변수를 중복 선언하면
SyntaxError가 발생 - 블록 스코프(Block scope)를 가진다. 블록 내에서 선언된 변수는 블록 내부에서만 유효하다. 블록은 중괄호
{}로 구분된 코드 영역, 따라서 if문이나 for문 등의 블록 내에서 선언된 변수는 블록 외부에서 접근 불가 - 호이스팅이 발생하지만, TDZ(Temporal Dead Zone)에 의해 초기화 이전에 접근하면
ReferenceError가 발생한다.
console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
let bar = "World";✨ const
- ES6부터 도입되었다.
- const로 선언된 객체나 배열은 수정할 수 있지만, 새로운 값을 할당할 수는 없다.
TypeError발생 - let과 마찬가지로 중복 선언이 불가능하다. 같은 이름의 변수를 중복 선언하면
SyntaxError가 발생 - 상수를 선언하는 데 사용된다. 선언 후에 재할당이 불가능하며, 상수로 선언된 값은 변경될 수 없다.
- 블록 스코프(Block scope)를 가진다. 블록 내에서 선언된 변수는 블록 내부에서만 유효하다. 블록은 중괄호
{}로 구분된 코드 영역, 따라서 if문이나 for문 등의 블록 내에서 선언된 변수는 블록 외부에서 접근 불가 - 호이스팅이 발생하지만, TDZ(Temporal Dead Zone)에 의해 초기화 이전에 접근하면
ReferenceError가 발생한다.
const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.
console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
const bar = "World";| var | let | const | |
|---|---|---|---|
| 중복 선언 | 가능 | 불가 | 불가 |
| 스코프 | 함수 스코프 | 블록 스코프 | 블록 스코프 |
| 호이스팅 | 선언 전 접근 가능 | 선언 전 접근 불가 | 선언 전 접근 불가 |
var, let, const는 각각의 스코프와 변수 재할당에 대한 특징이 다르기 때문에 상황에 맞게 적절히 선택하여 사용해야 한다. 일반적으로 변수를 선언할 때는 let을 사용하며, 상수 값이 필요한 경우에는 const를 사용한다. var는 ES6 이전 코드와의 호환성을 위해 사용하지 않는 편이다.
Cho