[JS] 함수 선언문과 함수 표현식

 

 

▷ 함수 선언문(function declaration) 

- 함수의 정의부만 존재하고 별도의 할당 명령이 없는 것

- 반드시 함수명이 정의되어야 함

function a () {      }
a();

 

 

▷ 함수 표현식(function expression)

- 정의한 함수를 별도의 변수에 할당하는 것

- 함수명이 반드시 정의될 필요는 없음 (기명 함수 표현식 / 익명 함수 표현식)

// 익명함수 표현식
let b = function () {      }
b();

// 기명함수 표현식
let c = function d () {      }
c();
d(); // 에러 발생

 

 

▷ 호이스팅에 따른 차이

- 함수 선언문 : 함수 전체를 호이스팅함, 함수 선언문이 정의되기 전에도 호출할 수 있음

- 함수 표현식 : 함수 선언부만 호이스팅함, 실제 실행 흐름이 (변수에 할당되는) 함수에 도달했을 때 함수를 생성하고 이때부터 사용가능

함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다. 자바스크립트는 스크립트를 실행하기 전, 준비단계에서 전역에 선언된 함수 선언문을 찾고 해당 함수를 생성하기 때문에 스크립트가 진짜 실행되기 이전 "초기화 단계"에서 정의한 함수가 생성된다.
반면, 함수 표현식은 스크립트가 실행되고, 실행흐름이 함수 표현식(변수에 할당된 함수)에 도달 했을 때 함수가 생성된다. 이때부터 해당 함수를 사용할 수 있다. 

 

 

 

▷ var, let, const

- let과 const로 선언한 변수도 호이스팅 대상이지만, var과 달리 호이스팅시 undefined로 초기화하지는 않음

- 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생

 

 

 

 

 

 

 

 

[Reference]

1. 코어 자바스크립트, 정재남, 위키북스

2. https://developer.mozilla.org/ko/docs/Glossary/Hoisting

3. https://ko.javascript.info/function-expressions