ES6 - 함수 표현식, 함수 선언, 익명함수

보통 함수를 선언하면 바디와 해당 식별자가 주어진다. 하지만 익명함수를 쓰면 식별자가 따로 필요 없이 작성할 수 있다. 이 익명 함수를 변수에 할당하고 호출할 수 있는 '함수 표현식'을 알아보도록 한다.

const f = function(){
  //....
}

하나의 변수에 익명함수를 할당하는 구조를 보여주고 있다.

const g = function f(){
   //∙∙∙∙
};

함수 표현식으로 선언되었지만 함수명의 식별자가 'f()'로 설정되어 있다.
만약 f()가 자기 자신을 호출할 때는 똑같이 f를 써서 참조할 수 있지만
함수 외부에서 접근하려면 'f()'가 아닌 변수 g로 접근 해야 한다.

const g = function f(stop){
	if(stop){
    	  console.log('f stopped');
    	}
        
    	f(true);
};
g(false);

차이점을 요약하면,

∙ 함수 표현식: 함수 선언을 하나의 변수에 할당한다. 즉 식별자의 유무(익명함수의 여부)와 상관 없으며 callback 함수로 사용하거나 다른 함수에 파라미터로 넘길 때 사용한다. 호이스팅의 영향을 받지 않는다.

∙ 함수 선언: 필요한 시점에 특정 함수를 호출하기 위해 선언한 형태이며, 따로 호출하지 않는 이상 실행이 안된다. 자바스크립트 브라우저에 의해 호이스팅 타임에 유효 범위 최상단으로 끌어올려진다.

+) 호이스팅

messageFunction1();
messageFunction2();

function messageFunction1(){
  return 'hello world';
};

let messageFunction2 = function(){
  return 'hello world';
};

위 코드가 호이스팅에 의해서 해석되는 순서는 다음과 같다.

function messageFunction1(){
  return 'hello world';
};

let messageFuntion2;

messageFunction1(); // 'hello world'
messageFunction2(); // 'messageFunction2' is not a function

messageFunction2 = function(){
  return 'hello world';
};

함수 표현식은 호이스팅이 작동되지 않기 때문에 messageFunction2는 문자로 인식된다. 호출보다 함수 선언을 먼저 작성하여 에러를 없앨 수 있다.

+) 스코프

let age = prompt("나이를 입력하세요", 18);

// 조건에 따라 함수를 선언
if(age < 18) {
  
  function welcome() {
    alert("안녕!");
  }
  
}else{

  function welcome() {
    alert("안녕하세요!");
  }

}

// 함수를 나중에 호출합니다.
welcome(); // Error: welcome is not defined

위 예시에서 오류가 발생한 이유는 함수 선언식은 해당 유효범위인 if문에서만 호출이 가능하다. if문에서 선언되고 정의되었기 때문이다.

let age = 16; // 16을 저장했다 가정합시다.

if(age < 18) {
  
  welcome();               //    (실행)
                           
  function welcome() {     
    alert("안녕!");        
  }                        
                           
  welcome();               //    (실행)

}else{

  function welcome() {
    alert("안녕하세요!");
  }
  
}

// 여기는 중괄호 밖이기 때문에
// 중괄호 안에서 선언한 함수 선언문은 호출할 수 없습니다.

welcome(); // Error: welcome is not defined

if문 안에서는 유효 코드블록이라서 welcome이 실행된다.

참고
1) Learning JavaScript(한빛미디어)
2) https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/
3) https://ko.javascript.info/function-expressions