(JS) Hoisting

Hoisting
자바스크립트에서 우리가 사용하는 모든 변수 선언문은 스코프 내에서 최상위로 Hoisitng 된다
(사전적의미) 들어올리다, 승강장치

let a = 1;
console.log(a); // 1

당연히 콘솔의 출력값은 1

console.log(a);
let a = 1; //  ??

위의 코드를 실행했을때 에러가 아니라 콘솔에 나타나는 출력 결과는 undefined이 나타나게 된다. 이유는 Hoistiong 현상으로 인해 함수의 구동 흐름이 바뀌었기 때문이다.

let a;
console.log(a);
a = 1;

위와 같이 "변수 선언" 부분이 최상위로 이동하게 되면서 실행되게 된다. 중요한 것은 "변수 선언문"만 끌어 올려졌다는것이다.

Function Declaration(함수 선언식)

함수 선언식으로 작성된 함수는 항상 최상위로 Hoisiting 됨으로서 실행문의 순서가 중요하지 않아 편리하게 이용할 수 있다.

j();

function j () {
  console.log('j');
}

j();

Function Expression(함수 표현식)

호이스팅은 모든 변수 선언문에 대해 해당하는 흐름에 적용되기 때문에 함수를 대입하는 경우에도 동일하게 적용된다. 함수 표현식으로 함수를 작성하는 경우에는 항상 실행문의 위치와 함수를 대입하는 구문의 위치가 중요하다.

d();

var d = function() {
  console.log('I am inside function d')
};

d();