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

🌎 Web/JavaScript

오늘 ONEUL 2022. 4. 4. 03:21

자바스크립트의 함수 정의

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

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

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

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

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

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

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

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

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

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

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

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

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

※ 참고 자료