JS 호이스팅과 var, let, const 차이점

호이스팅

호이스팅(hoisting) JavaScript의 인터프리터가 함수나 변수 선언을 선언들이 속해 있는 스코프의 최상단으로 끌어올리는 동작을 의미합니다. 즉, 함수나 변수를 선언하기 전에도 사용할 수 있다는 것을 의미합니다.

 

코드 실행 전, 자바스크립트 엔진이 해당 스코프에서 선언된 함수와 변수를 모두 찾고, 함수 선언문을 가장 최상단에 끌어올리고 그 다음으로 변수 선언을 올립니다. 아래 예제들을 보면서 설명하도록 하겠습니다.

 

console.log(value);
var value = "hello";  // undefined

여기서 변수 value 선언이 끌어 올려지기 때문에 다음과 같이 해석됩니다.

 

var value;            // 변수 value 호이스팅
console.log(value);   // value 초기화되지 않았기 때문에 undefined
value = "hello";      // value에 값 할당

 

 

다음은 함수와 변수 선언이 같이 있을 때 예시입니다.

value = "Hello";
var value;
console.log(value);             // Hello 

function value() {
	console.log("Hello World");
}
value();                        // Uncaught TypeError

함수 선언문은 변수 선언보다도 위로 끌어올려집니다.

 

function value() {                // 함수 선언 호이스팅
	console.log("Hello World");
}

var value;           // 변수 선언 호이스팅 (함수 선언 밑)
value = "Hello";
console.log(value);  // Hello

value();             // Uncaught TypeError: value is not a function

 

변수나 함수를 선언하기 전에 사용할 수 있으며, 이로 인해 예상치 못한 오류가 발생할 수 있습니다.

 

---

var / let / const 차이점

자바스크립트 변수를 선언하는 3가지 방법이 있습니다. var, let, const 입니다. var는 ES6 이전 버전에서 사용되던 변수 선언 키워드입니다. let 키워드와 const 키워드는 2015년에 ES6에서 추가되었습니다.

 

var

• 변수 중복 선언이 가능
  var를 통해 중복 선언할 경우 일반적인 재할당(재정의)과 다르지 않지만 보통 작성자는 변수가 이미 정의되어 있다는 사실을 모른 상태로 사용하기 때문에 이는 오류 발생을 유발시킵니다.
• 함수 스코프이기 때문에 함수 외부에서 선언한 변수는 모두 전역 변수로 됩니다.
• var 키워드로 선언시 호이스팅됩니다. 이때 var는 선언과 초기화(undefined)가 동시에 진행되기 때문에, 변수 선언문 이전에 변수를 참조하면 undefined를 반환합니다.

    console.log(a);

    var a = "호이스팅";

var로 선언한 변수는 스코프 내에서 맨 위로 올라가 선언부터 되기 때문에 undefined로 초기화되고 위 예제는 undefined를 출력합니다.

 

---

let

• 변수 중복 선언이 불가능합니다. 이미 선언되어 있는 변수에 재할당(재정의)가능합니다.
• 블록 스코프이기 때문에, 선언된 변수는 모두 블록 범위(if, for, while, ...)입니다.\
• let 키워드로 선언시 호이스팅됩니다. let은 var과 다르게 초기화 되지 않기 때문에 선언 이전에 let을 사용하려고 시도하면 참조 오류가 발생합니다.

 

---

const

• 변수 중복 선언이 불가능합니다. 이미 선언되어 있는 변수에 재할당(재정의)이 불가능합니다.
  • 이러한 특성 때문에 상수인 경우 let보다는 const 사용하는 것을 권장합니다.
  • 변수가 아닌 객체를 선언하는데 사용했을 경우 object.age = 25 이러한 형식으로 업데이트 가능합니다.
• 블록 스코프이기 때문에, 선언된 변수는 모두 블록 범위(if, for, while, 함수, ...)입니다.
• const키워로 선언시 호이스팅 됩니다. const는 반드시 선언할 때 초기화도 해주어야 합니다.

 

 

 

일반적으로 변수의 값이 변경되지 않는 경우에는 const를 사용하여 상수 선언을 해주고, 변수의 값이 변경될 수 있는 경우 let을 사용합니다. var는 ES6 이전 버전의 코드 호환성을 위해 사용되기도 하지만, let과 const를 사용하도록 권장하고 있습니다.