자바스크립트 함수 선언문과 함수 표현식의 차이점은 무엇인가?

자바스크립트 함수 선언문과 함수 표현식의 차이점

선언문(statement) vs 표현식(expression)

먼저 표현식이란 어떤 변수에 할당 할 수 있는 식이다.

let a = 10; // 숫자 리터럴
let fn = function (x,y) {
    return x + y 
    };
let obj = {x : 1};

위와같이 변수에 할당 할 수 있는 모든것은 표현식이라고 볼 수 있다.

반면 선언문은 표현식과는 반대로 변수에 할당 할 수 없다.

if (x > 10) {
    count += 1;
    };

대표적인 예로 if 문은 변수에 할당 할 수 없으므로 선언문이라고 할 수 있다.

함수 선언문과 함수 표현식

//함수 선언문
function add(x,y) {
    return x + y;
    }

// 함수 표현식
// case1)
const add = function (x,y) {
    return x + y;
    };

// case2)
const add = (x,y) => x+y

함수 선언문과 표현식은 위와같은 차이점이 있다.

눈썰미가 좋은 사람이면 눈치챘을것이다.
자바스크립트에서 함수 선언문을 변수에 할당 할 수 있는데 그럼 선언문이 아니라 표현식이 아닌가요? 라고.

// 예를들어
const fn = function add (x,y) {
    return x + y;
    };

이 경우에는 함수 선언문을 표현식처럼 사용할 수 있다. 이게 어떻게 된 일인가?

이건 자바스크립트 엔진에서 변수에 함수 선언문을 할당할 때, 함수 선언문을 함수 리터럴로 해석해서 발생하는 문제이다.
어쨋거나, 함수 선언문과 함수 표현식은 약간의 차이점이 있다.

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

stateFn(); // 10
expressFn(); // reference error.
function stateFn () {
    return 10;
    }
const expressFn = function () {
    return 15;
    }

함수 선언문은 호이스팅될때 초기값을 함수값으로 할당된다.
하지만, 함수 표현식은 호이스팅될때 함수값에 변수와같이 undefined 가 할당이 된다.

따라서 함수 표현식은 함수가 정의되기 전에는 사용 할 수 없다.