함수 선언식과 함수 표현식

설정·2020년 12월 16일
0

JavaScript는 함수 선언식과 함수 표현식으로 함수를 정의할 수 있다.


1. 함수 선언식

함수 선언식은 가장 일반적인 방법이다.

# 함수 선언식 기본구조

function 함수명(인자1, 인자2, ...) {
  // 코드
  return 반환값
}


# 함수 선언식

alertFn(); // 호이스팅

function alertFn() {
  alert('Hello!');
}
  • 인자는 생략이 가능하다.
  • 함수 선언 끌어올림(호이스팅 Hoisting)이 가능하다.
  • 호이스팅이 가능하기 때문에 함수 선언 전에 함수를 호출해도 정상적으로 동작을 한다.

2. 함수 표현식

일반적인 변수할당과 비슷하다.
변수를 선언하고 그 변수에 함수를 할당하는 형태이다.

# 함수 표현식 기본구조
var 변수명 = function (인자1, 인자2, ...) {
  // 코드
  return 반환값
}

# 함수 표현식

var alertFn = function() {
  alert('Hello!')
}

alertFn();
  • 함수 표현식에서는 호이스팅 불가능하다.
  • 함수 표현식을 사용하면 다른 함수의 결과로 리턴을 할 수 있다.
# 함수를 리턴하는 경우

function add(adder) {
  retrun function (num) {
    return num+adder;
  };
}
  • 이런 표현은 자바스크립트에서 함수가 일급객체이기 때문에 가능하다.

2-1. 함수 표현식을 권고하는 이유

함수 표현식은 위의 설명처럼 호이스팅이 불가능하다.
하지만, 함수 선언식은 호이스팅이 가능하기 때문에 함수의 위치와는 상관없이 함수가 실행이 되는데 이 때문에 코드의 구조를 엉망으로 만들 수 있기 때문에 함수 표현식을 권고한다.

add(1,3); // error

var add = function(a,b) {
  return a+b;
}

add(1, 3); // 4

0개의 댓글