[FE] 📚 자바스크립트 var, let, const

728x90

🤗 오늘의 위클리 페이퍼는

자바 스크립트에서 var, let, const를 중복 선언 허용, 스코프, 호이스팅 관점에서

서로 비교하는 토픽입니다.

📝 JavaScript 에서 변수를 선언하는 'var', 'let', 'const'는 각각 중복 선언 허용 여부,

스코프(유효 범위), 호이스팅(끌어올림)의 관점에서 다르게 동작합니다.

📝 스코프란?

함수를 기준으로만 적용되는 스코프를 함수 스코프, 코드 블록 ({} 중괄호로 감싸진 부분)을 기준으로

적용되는 스코프를 블록 스포크라고 합니다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

var는 코드 블록을 무시하기 때문에 test는 전역 변수가 됩니다.

전역 스코프에서 이 변수에 접근할 수 있습니다.

두 번째 행에서 var test가 아닌 let test를 사용했다면, 변수 test는 if문 안에서만 접근할 수 있습니다.

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

코드 블록이 function 안에 있다면, var는 함수 레벨 변수가 됩니다.

📝 호이스팅이란?

호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 코드의 최상단으로 끌어올려지는 동작을 말합니다. 이는 코드 실행 전에 JavaScript 엔진에 의해 처리되는데, 선언된 변수 또는 함수가 해당 스코프의 최상단으로 끌어올려지는 것을 의미합니다.

변수 호이스팅

변수 선언(var, let, const)은 선언 단계와 초기화(값 할당) 단계가 분리됩니다. 선언 단계는 호이스팅 되어 스코프의 맨 위로 끌어올려지지만, 초기화 단계(값 할당)는 그 자리에 남아 있습니다.

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

JavaScript는 위 코드를 다음과 같이 해석합니다

var x; // 변수 선언이 호이스팅됨
console.log(x); // undefined
x = 5; // 초기화(값 할당)
console.log(x); // 5

함수 호이스팅

함수 선언은 전체적으로 호이스팅됩니다. 함수 선언식(function declaration)은 선언 단계와 할당 단계가 분리되지 않고 통째로 끌어올려집니다.

sayHello(); // "Hello!"

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

JavaScript는 위 코드를 다음과 같이 해석합니다

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

sayHello(); // "Hello!"

📗 Var

중복 선언 허용 👉 'var'는 같은 이름의 변수를 중복 선언할 수 있습니다. 중복 선언시 이전 값이 덮어 쓰입니다.
스코프 👉 'var'로 선언된 변수는 함수 스코프를 가집니다. 함수 내에서 선언된 변수는 함수 내부에서만 유효하며 함수 외부에서는 접근할 수 없습니다.
호이스팅 👉 'var'는 선언 단계와 초기화 단계가 분리되어 호이스팅 됩니다. 선언이 스코프의 맨 위로 끌어올려지지만, 초기화는 그 자리에 남아있습니다.

console.log(x); // undefined (선언은 되었지만 값이 할당되지 않았음)
var x = 5;
console.log(x); // 5

function example() {
  var y = 10;
  console.log(y); // 10
}
console.log(y); // ReferenceError: y is not defined

//var는 변수의 중복선언을 허용합니다.
//var로 같은 변수를 여러 번 중복으로 선언할 수 있습니다. 하지만 이미 선언된 변수에 var을 사용하면
//두 번째 선언문은 무시됩니다.
var user = "Pete";
var user = "John"; // 이 "var"는 아무것도 하지 않습니다(이전에 이미 선언됨).
// ...에러 또한 발생하지 않습니다.

alert(user); // John

📘 let

중복 선언 허용 👉 let은 같은 스코프 내에서 같은 이름의 변수를 중복 선언할 수 없습니다. 중복 선언 시 SyntaxError가 발생합니다.
스코프 👉 let으로 선언된 변수는 블록 스코프(block scope)를 가집니다. {}(중괄호) 내에서 선언된 변수는 해당 블록 내에서만 유효합니다.
호이스팅 👉 let은 호이스팅 되지만 TDZ(Temporal Dead Zone)에 의해 초기화 전에는 접근할 수 없습니다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;
console.log(x); // 5

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

let user;
let user; // SyntaxError: 'user' has already been declared
// 한 스코프에서 같은 변수를 let이나 const로 두 번 선언하면 에러가 발생합니다.

📙 const

중복 선언 허용 👉 const는 같은 스코프 내에서 같은 이름의 상수를 중복 선언할 수 없습니다. 중복 선언 시 SyntaxError가 발생합니다.
스코프 👉 const로 선언된 변수도 let과 마찬가지로 블록 스코프(block scope)를 가집니다.
호이스팅 👉 const도 호이스팅되지만 TDZ(Temporal Dead Zone)에 의해 초기화 전에는 접근할 수 없습니다. 또한 const로 선언된 변수는 반드시 초기값을 할당해야 합니다.

console.log(x); // ReferenceError: Cannot access 'x' before initialization
const x = 5;
console.log(x); // 5

function example() {
  const y = 10;
  console.log(y); // 10
}
console.log(y); // ReferenceError: y is not defined

✅ 요약

var: 중복 선언 가능, 함수 스코프, 호이스팅 발생.
let: 중복 선언 불가능, 블록 스코프, 호이스팅 발생 (TDZ 적용).
const: 중복 선언 불가능, 블록 스코프, 호이스팅 발생 (TDZ 적용), 초기값 필수.

JavaScript에서는 var 보다는 let과 const를 사용하여 변수를 선언하는 것이 권장됩니다.

이로 인해 코드의 가독성과 안정성을 높일 수 있습니다.

선택할 때 각 변수의 특성과 사용하는 상황을 고려하여 적절한 선언 방식을 선택하면 됩니다.