함수 선언문 / 함수 리터럴 차이점

함수 선언문 (기명 함수)

함수 선언문은 함수리터럴과 function키워드, 함수명, 매개변수, 함수 몸체로 동일하게 이루어져 있다.

// 함수 선언문과 함수 리터럴의 구성 요소 
function 함수명(매개변수) {
	함수 몸체
}

<javascript>
// 함수 선언문(기명함수) 
function speak(name) {
	console.log(`hello ${name}`);	
}

// 함수 선언문에 함수명을 없애면 
function(name) {
	console.log(`hello ${name}`);	
} //SyntaxError

함수 리터럴

리터럴은 값을 생성하기 위한 표기법이다. 쉽게 말해 값을 생성함과 동시에 변수 선언을 해준다고 생각하면 될 듯 하다. (값은 변수가 있어야만 하니까)

//좌항이 변수, 우항에 위치한 값들이 리터럴이다. 

//일반적인 리터럴
const a = 1;

//함수 리터럴
const b = function funName(parameter) {
	return parameter;	
};

//객체 리터럴
const c = {
	cName1: cValue1,
	cName2: cValue2
};

함수 선언문과 함수 리터럴 구분법

함수 리터럴이 단독으로 사용되었으며, 기명 함수이면 함수 선언문으로 인식된다.
간단히 생각하면 함수에 변수가 선언됐느냐, 안됐느냐로 구분하면 쉬울 것 같다.
변수가 없다면 함수 선언문으로, 변수가 있다면 함수를 값으로 할당 가능한 함수 표현식으로 작동한다.

//함수 선언문 (함수 리터럴 단독, 기명 함수 조건을 충족했다.)
function speak(name) {
	console.log(`hello ${name}`);	
}

speack('yujin'); //hello yujin


//함수 리터럴(변수 선언문이자 함수표현식이다. 즉,익명함수가 가능하다. 함수명을 생략할 수 있다.)
const b = function speak(name) {
	console.log(`hello ${name}`);	    //함수가 변수의 값으로 할당되었다.
};

b('yujin'); //hello yujin

참조: JavaScript | 함수 선언문 vs. 함수 리터럴