[JavaScript] var와 let의 차이 (호이스팅)

JavaScript에서 var와 let의 주요 차이점 중 하나는 변수의 스코프(scope, 범위)이다.

var을 사용한 예시

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 출력: 10
}

exampleVar();
console.log(x); // 출력: 10

• var로 선언한 변수 x는 함수 스코프를 가지며 블록 스코프를 무시한다. 따라서 if 블록 내에서 변수 x를 선언하고 외부에서도 접근할 수 있다.

let을 사용한 예시

function exampleLet() {
  if (true) {
    let y = 10;
  }
  console.log(y); // 에러: y is not defined
}

exampleLet();
console.log(y); // 에러: y is not defined

• let으로 선언한 변수 y는 블록 스코프를 가지므로 if 블록 외부에서는 변수 y에 접근할 수 없다. 함수 내부에서 선언한 변수도 함수 스코프 내에서만 유효하다.

따라서

let은 변수의 스코프를 블록 스코프로 제한하므로 더 나은 캡슐화를 제공하고 예상치 못한 변수 호이스팅과 관련된 문제를 방지한다. 일반적으로 let을 사용하여 변수를 선언하는 것이 권장된다.

호이스팅이란?

호이스팅이란 변수를 선언하고 초기화했을 때 선언 부분이 최상단으로 끌어올려지는 현상을 의미한다. (초기화 또는 대입 부분은 그대로 남아있다.)

변수 호이스팅 예시

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

• 위의 코드에서 x 변수를 선언하기 전에 console.log(x)를 호출했지만 오류가 발생하지 않는다. 이는 변수 선언이 호이스팅되어 스코프 맨 위로 올라가기 때문이다.
  따라서 변수 x는 선언되었지만 초기값이 할당되지 않았으므로 undefined로 초기화됩니다.

함수 호이스팅 예시

foo(); // 출력: "Hello, World!"

function foo() {
  console.log("Hello, World!");
}

• 위의 코드에서도 함수 foo를 선언하기 전에 호출했지만 오류가 발생하지 않는다.
  함수 선언도 호이스팅되고 함수 선언문은 스코프 맨 위로 끌어올려지며 어디서든 호출할 수 있다.