[JS] 자바스크립트에서 함수 정의 - 함수 정의 이전에 함수 호출하기

자바스크립트에서 함수를 선언하는 방법으로 함수 선언문과 화살표 함수만 있다고 생각했는데 공부를 해보니 총 4가지 방법이 있다.

 

1. 함수 선언문 

function sayHello() {
    console.log("Hello!");
}

2. 화살표 함수 

const hello = () => {console.log("Hello!")}

 

3. Funciton 생성자 - 다른 대안이 없이 꼭 써야 할 때만 쓰자.. 

const hello = new Function('console.log("Hello!")')

 

4. 함수 리터럴

const hello = function() {
    console.log("Hello!")
}

 

처음 자바스크립트를 공부했을 때, 자바스크립트에서는 함수 호이스팅이 가능하므로 함수 정의 이전에 함수 호출이 가능하다! 라고 공부한 기억이 있었는데 아래의 소스 코드를 실행하면 Cannot access 'hello' before initialization 에러가 발생한다. 함수 정의 이전에 호출이 불가한 것이다.

 

화살표 함수로 함수를 정의하기 이전에 함수를 호출하니 에러가 발생한다!

함수 정의 이후에 호출하는 것은 아무런 문제가 없다!

 

 

 

아니, 자바스크립트에서 분명 함수 호이스팅이 가능하다고 했는데?????

 

 

함수 호이스팅은 가능하다.

단, 함수 선언문으로 정의한 함수만 함수 정의 이전에 호출할 수 있다! 

 

 

위에 말한 함수 선언 방법 네 가지 방법 중 함수 선언문을 제외한 나머지 세 방법은 함수 정의의 참조를 변수에 할당한다.

따라서 변수에 함수의 참조를 할당해야 비로소 사용할 수 있는 상태가 되기 때문에, 함수 정의 이전에는 함수를 호출 할 수 없는 것이다! 

 

함수 선언문으로 정의한 경우에는 함수 정의 이전에 호출해도 아무런 문제가 없다!

 

 

 

결론

자바스크립트에서 함수를 정의하는 방법은 4가지가 있고, 이 중 함수 선언문으로 함수를 정의하는 경우에만 호이스팅이 가능하다 !  끝!