갑자기 호이스팅이라고 들었을 때 무엇인지 궁금했다.
찾아보니 스크립트 작성할 때 이미 쓰고 있는? 혹은 자연스럽고 당연스럽게 쓰여지고 있었다.
독학의 단점은 이렇게 명칭이 뭔지 모를 때가 있고 가끔 개념 정리중에 누락된게 있다.

먼저 호이스팅 간단하게 정리하기 전에 함수 쓰는거에도 명칭이 있었더라 (난 필요에 따라 편한대로 썼었는데 얘들도 이름이 있었다는거에 너무 미안했다 ㅠ)

• 함수 선언문 : function test(){};
• 함수 표현식 : var test = function(){};
  요걸 설명할 때 'test' 변수에 익명함수를 할당한다. 라고 하더라..(난 왜 이런 표현이 무겁게 느껴지지? )
• Function 생성자 : var test = new Function("","return console.log('함수다');");
  (부끄럽게도 난 이걸 써본 적이 없다...)

호이스팅(hoisting)

호이스팅은 번역하면 끌어올리다. 라는 뜻이다.
뭘 끌어올리느냐 ? 변수든 함수든 스크립트 작성시 먼저 무엇인지 선언하고 사용(호출)해야 오류가 안나는데 자바스크립트는 이걸 안보이지만 끌어올려 버려서 알아서 선언한 것이다.
그렇다 안보인다 스크립트 파일이 바뀌거나 한 것은 없다. 그냥 자바스크립트 렌더링 될 때 알아서 아래에 지금 호출하는 녀석이 이 작성된 스크립트 아래에도 있는지 찾아본 뒤에 이 녀석을 가져다가 알아서 선언한것이다.
코드를 봐야 이해하겠음.

egg();
function egg(){
    console.log('chicken');
}
console.log('end');

egg() 호출이 아래 선언된 함수보다 먼저 있어도 실행되서 chicken 이 출력되고 바로 end 가 출력될 것이다.

즉, 자바스크립트 입장에서 이걸 아래처럼 알아서 가시적으로는 안보이지만 바꿔서 처리한 것이라고 보면 된다.

function egg(){
    console.log('chicken');
}
egg();
console.log('end');

난 이게 당연히 함수 선언문으로 쌓여있기 때문에 어디서든 실행이 된다고 단순히 정의를 내렸었는데 이게 호이스팅이였다.
그런데 이건 위에 함수 만드는 방법 중에 함수 선언문 만 가능하다.  함수 표현식은 안됨.
예를 들어 아래처럼

egg();
var egg = function (){
    console.log('chicken');
}
//egg is not a function 출력

이런 경우 호이스팅이 되어서 올라가도 egg라는 변수에 함수가 선언된 함수변수이기 때문에 함수로 호출하는게 아니라 변수로 호출한다.
여태껏 그냥 변수로 정의 내려서 아래에 있으면 안되는 거고 함수 변수는 최상단에 불러놓고 써지는구나 라고만 생각했다.

아무튼 왜 이렇게 썼었는지 명확한 이유는 알게된거 같다.