[JS] 함수 표현식과 함수 선언식은 무슨 차이가 있을까??

[JS] 함수 표현식과 함수 선언식은 무슨 차이가 있을까??

 

우리가 JS에서 함수를 선언할 때에는 보통 두 가지 방법을 사용한다.

바로 함수 표현식과 함수 선언식이다. 함수 표현식과 함수 선언식은 뭘까? 그리고 둘은 뭐가 다를까?

오늘은 이 내용에 대해 알아보도록 하겠다.

 

함수 선언식

먼저 함수 선언식은 무엇일까?

 

함수 선언식은 아래와 같이 함수를 선언하는 방법이다. 맞다. 일반적인 함수 선언 방식이다.

function plusNumber (a,b) {
    return a + b;
}

plusNumber(1,2); // 3

 

함수 표현식

함수 표현식도 함수 선언식과 크게 다르지 않다.

 

함수 표현식은 아래와 같이 변수에 이름이 없는 함수를 할당하여 사용하는 방식이다.

왜 이름이 없는 익명 함수를 변수에 담아서 사용할까?

그 이유는 익명 함수는 메모리를 차지하지 않고 일회용으로 사용되기 때문에 변수에 할당하여 다회 사용할 수 있도록 하는 것이다. 이러한 방식을 함수 리터럴 방식이라고 한다.

const plusNumber = function (a,b) {
    return a + b;
}

plusNumber(1,2); // 3

 

 

함수 선언식과 표현식 모두 선언하는 방법만 다를 뿐, 사용하는 방법은 같다. 그럼 이 둘은 정확히 어떤 게 다른 것일까?

 

함수 선언식과 표현식의 차이

함수 선언식과 표현식의 가장 큰 차이는 호이스팅이다.

함수 선언식은 호이스팅의 영향을 받지만, 함수 표현식은 호이스팅의 영향을 받지 않는다. 그럼 호이스팅은 무엇일까?

 

호이스팅

호이스팅은 어떠한 변수나 함수가 선언되기 전에 해당 변수나 함수를 스코프의 최상위로 끌어올리는 것이다. 실제로 코드의 위치가 올라가는 것은 아니다.

 

함수 선언식은 호이스팅의 영향을 받기 때문에 아래 코드를 실행하였을 때 정상적으로 실행된다.

plusNumber(1,2); // 3

function plusNumber (a,b) {
    return a + b;
}

 

 

하지만 함수 표현식은 호이스팅의 영향을 받지 않는다. 아래 코드 실행 시 오류가 나타나는 모습을 볼 수 있다.

때문에 함수 표현식을 사용한다면 함수의 선언문을 호출문보다 위쪽에 위치하도록 해야한다.

plusNumber(1,2); // Uncaught ReferenceError: plusNumber is not defined

const plusNumber = function (a,b) {
    return a + b;
}

 

 

람다 함수

변수에 함수를 할당하여 사용하는 함수 표현식을 어떻게 더 간결하게 사용할 수 있을까?

그 해결책은 바로 람다이다.

const plusNumber = (a,b) => a + b;

plusNumber(1,2);

 

위 코드와 같이 람다를 사용하면 다양한 것들을 생략할 수 있다.

 

1. function 키워드 생략이 가능하다.

const plusNumber = (a,b) => {
    return a + b;
};

 

2. return문만 있는 함수의 경우, return문 대신 소괄호를 사용할 수 있다.

const plusNumber = (a,b) => (
    a + b;
);

 

3. 소괄호도 생략 가능하다.

const plusNumber = (a,b) => a + b;

 

4. 인자가 하나일 경우, 또 소괄호 생략이 가능하다.

const plusNumber = a => a + 1;

 

 

마치며

함수 선언식은 함수 선언 위치를 깊게 생각하지 않아도 되고, 함수 표현식은 가독성 면에서 유리하다. 일관성 있는 코드 작성을 위해 각 팀의 컨벤션에 맞춰서 상황에 따라 사용하는 것이 중요할 것 같다.