[JS] `var` 과 `let`의 차이점? + 호이스팅(Hoisting)이란?

`var` 과 `let`  은 자바스크립트에서 변수를 선언하는 데 사용되는 키워드이다.

이 두 키워드는 몇 가지 중요한 차이점이 있다.

 

1. 변수의 스코프 : 

  - `var` : 함수 스코프를 가진다. 즉, 변수는 함수 내에서 선언되면 함수 내에서만 유효하다.

  - `let` : 블록 스코프를 가진다. 즉, 변수는 해당 블록 내에서 선언되면 블록 내에서만 유효하다.

 

2. 변수의 호이스팅 : 

- `var` : 변수 선언은 호이스팅되어 현재 스코프의 맨 위로 이동한다. 그러므로 선언하기 전에 변수를 참조해도 에러가 발생하지 않는다. 단, 값이 할당되기 전에 변수를 사용하면 `undefined` 가 된다.

  - `let` : 변수 선언도 호이스팅된다. 하지만 블록 내에서 실제 변수 선언문에 도달하기 전까지는 변수를 사용할 수 없다. 변수 선언 이전에 변수를 참조하면 에러가 발생한다.

 

3. 중복 선언 : 

- `var` : 같은 스코프 내에서 중복된 이름의 변수를 여러 번 선언할 수 있다. 이 경우 나중에 선언된 변수가 이전 변수를 덮어쓴다.

  - `let` : 같은 스코프 내에서 중복된 이름의 변수를 재선언할 수 없다. 중복 선언 시 문법 에러가 발생한다.

 

4. 전역 객체와의 연결 : 

- `var` : `var` 로 선언된 변수는 전역 객체(window 객체)의 프로퍼티로 등록된다. 전역 변수는 전역 스코프에서 사용할 수 있으며, `window` 객체의 프로퍼티로도 접근할 수 있다.

  - `let` :  `let` 으로 선언된 변수를 전역 객체의 프로퍼티로 등록되지 않는다. 따라서 전역 스코프에서 선언된 `let` 변수는 전역 객체의 일부가 아니며, `window` 객체를 통해 접근할 수 없다.

 

일반적으로 `let` 을 사용하여 변수를 선언하고 블록 스코프를 유지하는 것이 권장된다. `let`은 변수의 범위를 명확히 정의하고, 호이스팅으로 인한 오류를 줄이고, 중복 선언을 방지할 수 있기 때문입니다. 그러나 특별한 경우에는 `var`의 함수 스코프가 필요한 상황이 있을 수 있다.

 

 

---

 

호이스팅(Hoisting)이란?

 

호이스팅(Hoisting)은 자바스크립트에서 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 동작 을 말한다. 즉, 코드 내에서 변수 또는 함수를 선언하기 전에도 해당 식별자를 사용할 수 있는 것처럼 동작하는 것을 의미한다.

 

자바스크립트 엔진은 코드를 실행하기 전에 변수와 함수 선언을 메모리에 등록한다. 이때 변수 선언은 해당 스코프의 맨 위로, 함수 선언은 전체 스코프의 맨 위로 끌어올려진다. 이러한 동작으로 인해 선언이 실제 코드 위치와 상관없이 변수와 함수를 사용할 수 있게 된다.

 

예를 들어, 아래의 코드를 살펴보면

console.log(x);
var x = 10;

실제로는 변수 x 가 선언되기 전에 console.log(x) 가 호출되었으므로  undefined 가 출력되어야 할 것 같지만, 호이스팅으로 인해 x 는 스코프 맨 위로 끌어올려지고 변수 선언은 실행된다. 따라서 위의 코드는 아래와 같이 동작한다.

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

 

.

.

 

함수 선언도 호이스팅의 영향을 받는다. 함수 선언문은 전체 스코프에서 최상단으로 끌어올려지므로 함수를 선언하기 전에 호출할 수 있다.

sayHello(); // "Hello"

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

위의 코드에서도 sayHello( ) 함수가 선언되기 전에 호출되었지만, 함수 선언문은 호이스팅에 의해 스코프 맨 위로 끌어올려지므로 정상적으로 Hello 가 출력된다.

 

하지만 변수나 함수의 할당 또는 초기화는 호이스팅되지 않으며, 실제 코드의 위치에서 순차적으로 실행된다. 호이스팅은 선언부만 해당 스코프의 최상단으로 끌어올리는 역할을 수행 한다.