[Javascript] Function Expression vs Declaration 함수 표현식 vs 함수 선언식 차이점

What is the difference between Function Expression and Declaration?

 

 

Javascript 일급객체 함수 (First Class Function)

 

Javascript에서 함수를 선언하는 방식은 크게 두가지가 있다. Javascript에서 함수는 일급객체로 크게 3가지 특징을 가지고 있다.

 

① 다른 함수의 인자로 전달 가능

② 다른 함수의 리턴값으로 사용가능

③ 인자로 전달받아 리턴값으로 사용 가능

 

Javascript 함수의 일급객체에 대해서 아래 글에서 더 자세하게 알아볼 수 있다.

 

[Javascript] 일급 객체(First-class Object)란 무엇인가?

 

 

Javascript의 일급객체인 함수는 크게 함수 표현식과 함수 선언식으로 구분된다.

 

Javascript 함수 표현식 Function Expression

 

함수 표현식은 변수에 함수를 할당하는 방식이다. 익명함수(Anonymous Function)를 전달하거나 Arrow Function을 사용할 수 있다.

// Arrow Function
const func = () => {
	console.log("hello world");
}

// Anonymous Function
const func = function(){
	console.log("hello world");
}

 

 

Javascript 함수 선언식 Function Declaration

 

함수 선언식은 일반 프로그래밍 언어에서 함수를 선언하는 방식과 동일하다. 컴파일 언어와는 다르게 리턴값의 타입과 매개변수의 타입을 지정해주지 않는다.

function func() {
	console.log("hello world");
}

 

 

Javascript Function Expression VS Function Declaration

 

Javascript의 함수 선언식과 함수 표현식은 둘다 많이 사용되지만, 차이점이 존재한다.

 

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 적용받지 않는다. 즉 함수 선언식은 어디서 선언하던 간에 바로 사용이 가능하지만 함수 표현식으로 선언된 함수는 호출 위치가 중요한 요소가 된다.

호이스팅(Hoisting)이란?

 

함수 선언식의 경우 함수 호출지점 보다 아래에 함수를 선언했다 하더라도 호이스팅에 걸리기 때문에 정상적으로 코드가 작동한다.

func(); // "hello world" 출력


function func(){
	console.log("hello world");
}

 

 

하지만 함수 표현식의 경우 var 로 변수를 선언하면 호이스팅에 걸리지만 최초 호이스팅 되었을 때는 '변수' 상태이기 때문에 함수로 실행할 수 없다. 이 후 함수 표현식에 코드가 도달하고 나서야 변수->함수로 타입이 변경되어 제대로 호출이 가능한 상태로 변한다.

 

func();

const func = () => {
	console.log("hello world");
}

 

호이스팅이 안된 함수를 실행하면 함수가 아니라는 Reference Error가 발생한다.

 

 

[Javascript] 고차함수 map, reduce, filter 사용방법

 

[Programming] SPA(Single Page Application)이란? 장점과 단점