[JavaScript] 함수 선언식 & 함수 표현식

1. 함수란?

함수(Function)는 영어로 “기능” 이라는 뜻을 가지고 있다. 이와 같이 자바스크립트에서 함수는 특정한 기능을 가진 코드블럭을 뜻한다.

함수는 필요에 따라 호출이 가능하고 여러 번 반복하여 사용할 수 있다. 이로써 함수는 중복된 코드를 피할 수 있고 코드의 재사용성을 높인다.

위와 같은 함수의 장점을 최대화시키기 위해서는 함수 하나 당 하나의 기능(목적)을 가지고 있는 것이 좋다.

함수를 작성하는 방법은 크게 두 가지로 나뉘는데 ‘함수 선언식’과 ‘함수 표현식’이 있다.

아래의 설명을 참고하자.

2. 함수 선언식 & 함수 표현식

함수 선언식과 함수 표현식은 아래와 같이 작성할 수 있다.

// 함수 선언식
function name(parameter1, parameter2..){
  // code to be executed
  // return result;
}

// 함수 표현식
var func = function(parameter1, parameter2..){
  // code to be executed
  // return result;
};

위의 parameter(매개변수)와 return(반환)문은 필요에 따라 포함할 수 있다.

함수 선언식과 함수 표현식의 가장 큰 차이는 Hoisting되느냐 안되느냐이다.

아래의 예시를 통해 그 차이를 파악하자.

• 함수 선언식

printer(); // call function 'printer'

function printer(){
  console.log("this is function declaration");
}

printer(); // call function 'printer'


// Expected Output:
// "this is function declaration"
// "this is function declaration"

함수 선언식은 Hoisting 개념에 의해 해당 스크립트의 최상단으로 끌여올려진다. 따라서 함수 실행문의 위치를 고려하지 않아도 된다.

• 함수 표현식

printer(); // call function 'printer'

var printer = function(){
  console.log("this is function declaration");
};

printer(); // call function 'printer'


// Expected Output:
// "error"
// "TypeError: printer is not a function

함수 표현식은 Hoisting 개념의 영향을 받지 않는다. 즉 [var printer;]구문이 최상단으로 끌여올려지더라도 변수 printer에 함수를 대입하는 [printer = function(){…};]구문은 코드를 작성한 순서대로 실행된다.

따라서 함수 실행문의 위치를 중요하게 생각해야한다.

종종 함수 선언식과 함수 표현식의 차이를 함수 이름의 유무로 따지는 경우가 있는데 이것은 잘못된 논리이다. 그 이유는 함수 표현식에도 이름을 붙일 수 있기 때문이다.

어떤 작성법이든 이름이 있는 함수(유명 함수)는 에러를 마주했을 때 가독성이 좋아 디버깅과정이 편해진다.

이외에도 함수 선언식과 함수 표현식사이에 여러 기능적 차이가 있다. 이는 추후 포스팅에서 다룰 예정이다.