[JavaScript] 함수 선언문 vs 함수 표현식

자바스크립트의 함수 정의

자바스크립트의 함수를 정의하는 방식은 크게 3가지가 있다.

1. 함수 선언문
2. 함수 표현식
3. 화살표 함수(arrow function)

이 중 함수 선언문과 함수 표현식에 대해 알아보자.

 

 

 

 

함수 선언문

일반적으로 function 키워드, 함수 이름, 괄호로 둘러싼 매개변수, 중괄호로 둘러싼 실행문을 통해 선언하는 함수를 의미한다.

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

위와 같은 방식으로 아래의 함수를 만들 수 있다.

function sayHi() {
  alert( "Hello" );
}

 

 

 

 

함수 표현식

함수 선언문으로 정의했던 sayHi() 함수를 함수 표현식으로 생성해보자.

const sayHi = function() {
  alert( "Hello" );
};

함수를 생성하고 변수에 할당하였다. 함수는 구문 안에서 값으로 취급되어 변수에 할당되었기 때문에 구문 끝에 세미콜론(;)이 붙는다.

 

 

 

 

함수 선언문 vs 함수 표현식

그렇다면 두 방식에는 어떤 차이점이 있을까?

1. 문법의 차이
   • 함수 선언문은 독자적인 구문 형태로 존재한다.
   • 함수 표현식은 함수가 표현식의 일부로 존재한다.
2. 함수를 생성하는 시점
   • 함수 선언문은 코드 블록이 실행되기도 전에 처리되므로 블록 내 어디서든 활용할 수 있다.
   • 함수 표현식은 실행 흐름에 다다랐을 때 생성된다.
3. 스코프
   • 함수 선언문은 코드 블록 내에 위치하면 블록 밖에서 함수에 접근할 수 없다.
   • 함수 표현식을 이용하여 코드 블록 밖에서 선언한 변수에 함수를 할당하면 외부에서도 접근 가능하다.

 

 

 

 

더 나은 선택은?

👉 함수 선언문을 먼저 고려하자! (가독성, 활용성👍)

👉 함수 선언문을 사용하기 어려울 때에 함수 표현식을 사용하자!

 

 

 

 

※ 참고 자료

https://ko.javascript.info/function-expressions#ref-77