기초인 만큼 꼼꼼히 정리해 둡니다.

---

함수 선언 방식

함수 선언식 vs 함수 표현식

function 함수선언식(param1, param2){
    // ...code here
    return 결과값
}

• 함수 선언식 함수 이름이 정의되어 있고, 별도의 할당이 없는 방식입니다.

const 함수표현식 = function(param1, param2){
	// ...code here
	return 결과값;
};

• 함수 표현식 정의한 함수를 별도의 변수에 할당하는 방식입니다.

---

주요 차이점은 호이스팅입니다.

함수 선언식은 정의된 범위의 맨 위로 호이스팅*되기 때문에, 함수를 선언하기 전에도 사용할 수 있습니다.

함수 표현식은 변수에 할당되기 때문에 할당 전에는 호출할 수 없습니다.

*호이스팅: 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

예시 1)

sum(10 , 10); // 20
minus(30 , 10) // Uncaught ReferenceError: minus is not defined

function sum (num1 , num2){
    return num1 + num2;
};

const minus = function(num1 , num2) {
    return num1 - num2;
};

sum(10 , 20) // 30
minus(30 , 10) // 20

예시 2)

sum(10 , 10); // 0

function sum (num1 , num2){
    return num1 + num2;
};

const minus = function(num1 , num2) {
    return num1 - num2;
};

sum(10 , 20) // -10
minus(30 , 10) // 20

function sum (num1 , num2){
    return num1 - num2;
};

const minus = function(num1 , num2) { // Uncaught SyntaxError: Identifier 'minus' has already been declared
    return num1 * num2;
};

선언식은 같은 이름으로 다시 선언할 수 있어서, 마지막에 선언된 함수가 사용됩니다. 표현식을 const로 선언하면 재선언이 불가능해 예상치 못한 결과를 막을 수 있습니다.

화살표 함수

const 함수표현식 = (param1, param2) => {
	// ...code here
	return 결과값;
};

• 화살표 함수 함수 표현식과 거의 동일하게 사용할 수 있습니다.