Hoisting

- Hoisting : 자바스크립트에서 아직 선언되지 않은 함수, 변수를 끌어올려서 사용할 수 있는 자바스크립트의 작동 방식

 

myFunction();

function myFunction() {
  console.log("hello world");
}

함수 선언 순서가 뒤바뀌었는데도, 위와 같이 잘 로그가 찍히는 것을 볼 수 있는데 이는 자바스크립트 엔진이

function myFunction() {
  console.log("hello world");
}

myFunction();

이 순서로 받아들이기 때문.

 

함수가 아래에 있어도 호출 가능.

=> 하지만 위와 같은 호이스팅 기능은 피해야함. 순서가 이상하게 배치되어있으면 유지보수하기 힘들기 때문.

 

console.log(number);
var number = 2;

var로 선언된 변수의 경우 이렇게 undefined가 뜨는데, 이는 

자바스크립트 엔진이

var number;
console.log(number);
number = 2;

이런 식으로 받아들이기 때문.

 

function fn() {
  console.log(a);
  let a = 2;
}

fn();

다만 const와 let은 호이스팅이 발생되지 않는다.

 

즉 const와 let을 사용하고, 함수를 미리 정의하는 등 호이스팅을 방지하면 값이 제대로 들어가지 않는 등의 실수를 예방할 수 있다.

+) eslint를 사용하면 경고문을 띄워주기 때문에 호이스팅을 방지할 수 있다고 한다.