함수 표현식과 함수 선언문의 차이

- 가장 큰 차이는 호이스팅(hoisting) 여부.

- 호이스팅(hositing)이란 함수 선언문이 코드 맨 앞단에 작성된 것처럼 작동하는 자바스크립트(Javascript)의 특징을 의미.

 

/* 함수 표현식과 함수 선언문의 예제1 */

world() // hello world

function world() {
	console.log('hello world')
}

world() // hello world

- 함수를 선언한 world가 코드 중간에 있음에도 맨 앞에서 호출한 world()는 에러 없어 정상적인 함수의 작동을 수행한다.

- 함수의 호이스팅은 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업을 의미.

- 호이스팅으로 인해 코드의 순서에 상관없이 정상적으로 함수를 호출할 수 있음.

 

/* 함수 표현식과 함수 선언문의 예제2 */

console.log(typeof world === 'undefined') // true

world() // unCaught TypeError: world is not a function

var world = function() {
	console.log('hello world')
}

world() // hello world

- 함수 선언문과 다르게 정상적으로 호출되지 않음.

- 함수와 달리 변수는 런타임 이전에 undefined로 초기화되고 할당문이 실행되는(런타임) 시점에 함수가 할당되어 작동.

 

- 따라서, 함수를 자유롭게 선언하고 어디서든 자유롭게 호출, 명시적으로 구별하고 싶을때는 함수 선언문 장점.

- 함수 호출은 제일먼저 보이고, 실제 함수를 어디서 어떻게 선언했는지는 해당 스코프를 끝까지 확인하지 않으면 찾기 어렵다는 함수 선언문의 단점.

- 함수 선언문과 함수 표현식 중 더 낫다거나 기능적으로 우위에 있다고 명확하게 구별지을 만한 점은 없다. 현재 자바스크립트 코드를 작성하는 환경과 본인, 프로젝트 상황에 맞게 작성법을 일관되게 사용하면 된다.