자바 스크립트 함수 선언문, 함수 표현식에서 호이스팅 방식의 차이

function getName() {
    console.log('name');
}

var name = function() {
   console.log('name');
};

javascript 에서 함수를 변수에 담을 수 있습니다.
이렇게 사용하는 것을 함수 표현식 이라고 합니다.
그리고 function getName() 과 같이 함수를 선언하는 것을 함수 선언문이라고 합니다.

그렇다면 함수 표현식과 함수 선언문 둘다 함수인데 어떻게 다르며, 어떻게 사용되는지 알아보겠습니다.
먼저 둘의 차이는 호이스팅을 빼놓고 설명할 수 없습니다.

호이스팅

호이스팅(Hoisting)의 사전적 의미는 끌어 올리다 라는 뜻을 가지고 있습니다. 함수 안에 있는 변수나 함수 맨 위로 끌어올린다는 것입니다.

실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser가 내부적으로 끌어올려서 처리한다.
(JSON.parse()란?
parse 메소드는 string 객체를 json 객체로 변환시켜줌)

호이스팅 대상

var 와 함수 선언문 이 호이스팅 대상이고
let 또는 const 그리고 함수 표현식은 해당되지 않는다.

함수 표현식의 호이스팅

다음 예제들의 결과로 생각해보겠습니다.

count();

var count = function() {
    console.log('count는 1이다.');
}

var count = function() {
    console.log('count는 1이다.');
}

count();

count();

let count = function() {
    console.log('count는 1이다.');
}

첫번째 결과는 TypeError입니다.

error : count is not function

count() 호출 후, var count를 선언하며 함수를 담았다.
var 는 호이스팅의 영향을 받으므로 위로 끌어올려진다.
그러므로 아래와 같이 var count; 가 가장 먼저 실행된다. 변수에 아무 값도 담지 않았으므로 undefined 상태이다.
그 후로 count()가 호출되면 위에 선언한 count가 호출되므로 변수를 호출하는 격이된다.
그러므로 not function 이라는 에러 메시지가 나타난다.

var count;    // undefined

count();      // count()호출되면 위에 선언한 count가 호출되므로 변수를 호출하는 격이된다.
그러므로 not function이라는 에러 메세지가 나옴

var count = function() {
    console.log('count는 1이다.');
}

두번째 결과는 정상적으로 console.log가 동작함

var count가 호이스팅으로 인해 위로 끌어올려지지만,count() 호출 전 count에 함수를 담으므로 count()를 호출 하였을 때 정상 작동함.

var count;    //undefined

var count = function() {
    console.log('count는 1이다.');
}

count();

세번째 결과는 ReferenceError 이다.
세번째 예시는 첫번째 예시에서 var를 let으로 바꾼 것이다 세번쨰도 역시 에러를 발생하지만,첫번째와 다른 Reference Error가 발생합니다.

count();

let count = function() {
    console.log('count는 1이다.');
}

let ####은 호이스팅의 영향을 받지 않기 때문에,예시 작성한 코드 순서대로 실행됩니다.