호이스팅 이란?

호이스팅 

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.

var로 선언한 변수의 경우 호이스팅시 undefined로 변수를 초기화 한다.

반면 let과 const로 선언한 변수의 경우 호이스팅시 변수를 초기화하지 않는다.

 

쉽게 이야기하면 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다는 것을 의미한다.

 

바로 코드를 살펴보자!

 

var로 선언한 변수 호이스팅

• var로 선언한 변수는 호이스팅시 undefined로 변수를 초기화 한다.

console.log(a)

var a = 7

/*

  undefined

*/

 

let, const 로 선언한 변수 호이스팅

• let과 const로 선언한 변수는 호이스팅시 변수를 초기화 하지 않는다.
• 호이스팅이 되지 않은것처럼 보이지만, 사실은 초기화 되지 않은 상태로 선언만 메모리에 저장되기 때문이다.
• 초기화되지 않으면 변수를 참조할 수 없다. 때문에 참조에러가 나타난다.
• 위의 var로 선언한 변수는 선언과 함께 undefined로 초기화되어 메모리에 저장되기 때문에, 참조에러가 일어나지 않는다.

console.log(b)

 const b = 7

/*

  VM683:1 Uncaught ReferenceError: b is not defined
      at <anonymous>:1:13
      
*/

console.log(j)

let j = 7

/*

  VM683:1 Uncaught ReferenceError: j is not defined
      at <anonymous>:1:13
      
*/

 

함수 선언문과 함수 표현식

함수 선언문 

• 자바스크립트는 함수의 코드를 실행하기 전, 함수 선언에 대한 메모리부터 할당한다.

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

 

함수 표현식

• var로 선언한 catName3은 undefined로 초기화 되어 함수를 호출하면 타입에러가 발생한다.
• 함수표현식으로 정의한 함수는 반드시 함수표현식 이후에 호출해야한다.
• 이러한 이유로 호이스팅을 의도하는 상황이 아니라면, 함수표현식 사용을 권장한다.

catName3("야옹이");

var catName3= function(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}
//VM562:1 Uncaught TypeError: catName3 is not a function
//  at <anonymous>:1:1

---

요약:

호이스팅에 대해 설명하시오  

인터프리터가 변수와 함수의 메모리공간을 선언전에 미리 할당하는 것을 의미한다.

 

이러한 자바스크립트 동작방식에 의해 사용자에게는 var로 선언한 변수, 함수 선언문은 호이스팅에 의해 가장 상단에 끌어올려지고 const나 let으로 선언한 변수 그리고 함수표현식은 호이스팅이 적용되지 않는것으로 보인다. 하지만 사실은 선언 코드가 끌어올려지는것이 아니라,  자바스크립트 Parser가 내부적으로 끌어올려서 처리하는 것이다.

 

또한 함수선언과 모든 변수선언에는 호이스팅이 적용된다.  var로 선언한 변수는 호이스팅시 undefined로 초기화 되지만, let과 const로 선언한 변수의 경우 호이스팅시에도 변수를 초기화하지 않기때문에 let과 const로 선언한 변수는 호이스팅이 적용되지 않는것 처럼 보인다.

 

추가로 함수선언문과 달리 var로 선언한 함수표현식은 호출이후에 작성하면 TypeError가 발생하는데, 그 이유는 var로 선언한 변수가 undefined로 초기화되기 때문이다.

출처 - https://wnsdufdl.tistory.com/258