[JavaScript] 함수(Function), 함수 호이스팅(Function Hoisting)

내용에 들어가기 앞서

자바스크립트는 점점 더 강력해지고 많은 프레임워크(Vue.js, React.js, Node.js)에 등장으로 자바스크립트 기본기 부터!  라는 생각으로 포스팅을 하게 되었습니다.

 

오늘 포스팅에 주제는 함수(Function) 입니다.

 

함수의 생성 방식에

 

함수 선언문(function statement)

함수 선언문 방식은 반드시 함수명이 정의되어 있어야 합니다.

 

함수 표현식(function expression)

함수를 생성하고 이를 변수에 할당해 함수를 생성하는것을 함수 표현식 이라고 합니다.

 

Function() 생성자 함수

Function() 생성자 함수를 사용하여 함수를 생성하는것을 Function() 생성자 함수 라고 합니다.

 

함수 호이스팅(Function Hoisting)

함수안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위 최상단에 선언하는것을 말합니다.

좀더 정확하게 파악하자면 자바스크립트 에서 소스를 파싱할때 소스가 재정렬이 되는데 함수단위 최상위로 올라 가는것을 말합니다

 

호이스팅의 차이

함수 선언문 으로 정의된 함수는 함수 호이스팅이 발생 합니다.  즉 함수가 정의 되기도 전에 함수 호출이 가능합니다.

하지만 함수 표현식 으로 정의된 함수는 함수 호이스팅이 발생하는것이 아닌 변수 호이스팅이 발생합니다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행되며 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어집니다.

foo 함수는 함수 선언문을 통해서 정의 하였고 foo2 는 함수 표현식으로 정의 했습니다.

두 함수 모두 정의하기 전 호출 하였습니다

위 결과 처럼 함수 선언문을 통해 정의한 함수 foo 는 함수 호이스팅이 발생하여 함수를 정의 하기전에 호출이 된다는걸 알수 있습니다.

하지만 함수 표현식으로 정의한 foo2 함수는 TypeError 가 발생하여 함수 호이스팅이 아닌 변수 호이스팅이 발생한걸 알수 있습니다.