호이스팅에 대해서

 

호이스팅 

코드를 실행시키는 런타임 이전단계에서 변수의 선언이 일어난다.

그러다보니, 변수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는데 이를 호이스팅이라고 한다.

 

이는 자바스크립트 고유의 특징이다.

 

var,let,const를 포함한 모든 선언문은 런타임 이전 단계에서 실행된다.

 

하지만 undefined로 초기화가 진행되는 것은 var 뿐이다.

let,const는 undefined로 초기화가 진행되지 않는다.

 

초기화는 메모리에 변수를 위한 공간을 확보하는 것이다.

var로 선언한 변수 호이스팅

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

console.log(a)

var a = 7

/*

  undefined

*/

 

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

• let과 const로 선언한 변수는 호이스팅시 변수를 초기화 하지 않는다. (메모리에 변수를 위한 공간을 확보하지 않는다)
• 초기화되지 않으면 변수를 참조할 수 없다. 때문에 참조에러가 나타난다.
• 위의 var로 선언한 변수는 선언과 함께 undefined로 초기화되어 메모리에 저장되기 때문에, 참조에러가 일어나지 않는다.
• let,const는 선언이 먼저 메모리에 저장되지만 공간을 확보하진 않아서, 변수 선언문이 실행될 때 초기화가 일어난다.
  • 스코프의 시작지점부터 초기화까지 변수를 사용할 수 없는 일시적 사각지대가 생기는데 이를 TDZ(Temporal Dead Zone)라고 한다.

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

 

---

참고자료 : https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN