출처 : 코팅앙마 자바스크립트 기초강좌 내용을 정리한 글입니다.
https://www.youtube.com/watch?v=KF6t61yuPCY

🍋함수 선언문

기본 방식입니다.

function sayHello(){
	console.log('Hello');
}

sayHello()

🍋함수 표현식

이름이 없는 함수에 변수 선언해서 함수를 할당하는 것입니다.

let sayHello = function(){
	console.log('Hello');
}

sayHello()

🤔 함수 선언문과 함수 표현식은 어떤 차이가 있을까요?

바로 호출 타이밍입니다.

함수 선언문 : 어디서든 호출 가능

sayHello()

function sayHello(){
	console.log('Hello');
}

이렇게 바꿔도 동작합니다.
위에서 아래로 읽으면서 동작하는 인터프리터 언어인 자바스크립트에서 어떻게 저런게 가능할까요?

console.log를 사용하면 아래와 같이 에러가 출력됩니다.

그렇다면 sayHello는 어떻게 동작된걸까요?
이것은 자바스크립트 내부 알고리즘 때문입니다.
자바스크립트는 실행 전 초기화단계에서 코드의 모든 함수 선언문을 찾아서 생성해둡니다. 즉, 눈으로 볼 땐 생성 전이지만 함수를 사용할 수 있는 범위는 코드 위치보다 위로 올라갑니다. 이를 호이스팅이라고 합니다.

함수 표현식 : 코드에 도달하면 생성

let sayHello = function(){
	console.log('Hello');
}

sayHello()

코드에 도달해야만 생성되기 때문에 생성 이후에만 사용할 수 있습니다.

🤔그래서 뭐가 더 좋은가요?

함수 선언문이 더 자유롭게 코딩할 수 있지만, 어느것은 사용하든 딱히 상관없습니다.

🍋화살표 함수(arrow function)

• 보다 간결하게 작성 가능합니다.

let add = function(num1, num2){
	return num1 + num2;
}

👇

let add = (num1, num2) => {
	return num1 + num2;
}

• return문이 한줄일경우 { }중괄호를 => ()일반괄호로 바꾸고 return 생략가능합니다.

let add = (num1, num2) => (
	num1 + num2;
)

• return문이 한줄이라면 괄호 생략 가능합니다.

let add = (num1, num2) =>num1+num2;

• 인수가 하나라면 괄호 생략 가능합니다.

let add = name =>`Hello, ${name}`;

• 만약 인수가 없는 합수라면 괄호는 생략할 수 없습니다.

let showError = () => {
	alert('error!');
}

• return문이 한줄이라고 해도 여러줄의 코드가 있다면 ()일반 괄호는 사용할 수 없습니다.

let add = (num1,num2) => {
	const result = num1 + num2;
	return result;
}

선언문이 좀 더 자유롭습니다.
화살표 함수는 ES6 이후에 추가된 기능입니다. ES6 이후 굉장히 활발히 쓰이고 있기 때문에 필수로 알아두어야합니다.