[JavaScript] 함수 표현식(함수 선언문, 함수 표현식, 콜백 함수, 익명 함수)

자바스크립트에서 함수는 “특별한 동작을 하는 구조(magical language structure)”가 아닌 특별한 종류의 “값(value)”이다.

데이터를 나타내는 일반적인 값들과 달리 함수는 하나의 동작을 나타낸다.

따라서 필요할 때 동작을 시킬 수 있다.

함수 표현식 vs 함수 선언문

함수를 만드는 방식은 크게 두 가지다.

• 함수 선언문 방식(Function Declaration)

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

• 함수 표현식 방식(Function Expression) - 변수에 값 할당하는 것처럼 함수를 변수에 할당

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

더 간단한 방법으로는 화살표 함수도 있다.

만든 방식과 무관하게 함수라면 값이기 때문에 변수에 할당 가능하다.

다만 호출할 수 있다는 점이 일반적인 값과는 다른 특별한 종류의 값(special kind of value)인 것.

함수 이름 다음에 괄호 붙이면 함수 호출 결과(함수의 반환 값)을 가져오게 됨.

괄호를 떼고 쓰면 함수 자체를 가져올 수 있음.

⬇️ 예시

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // (2) 함수 복사

func(); // Hello     // (3) 복사한 함수를 실행(정상적으로 실행됩니다)!
sayHi(); // Hello    //     본래 함수도 정상적으로 실행됩니다.

❓함수 표현식에서만 세미 콜론이 끝에 붙는 이유

• 중괄호로 만든 코드 블록 끝에는 세미 콜론 없어도 되지만 함수 표현식에서는 let sayHi = …; 같은 구문 안에서의 값! 역할이기 때문. 즉, 코드 블록이 아닌 값으로 다뤄지면서 변수에 할당되는 상황이기 때문에 구문의 끝이라서 붙여준 것이다.

함수 표현식과 함수 선언문의 차이 정리

1. 문법

• 함수 선언문 : 주요 코드 흐름 중간에 독자적 구문 형태로 함수 존재.
• 함수 표현식: 표현식이나 구문 구성(syntax construc) 내부에 함수 생성.

2. 자바스크립트 엔진이 언제 생성하는 타이밍(when의 차이)

• 함수 선언문: 함수 선언문 정의 이전에도 함수 호출 가능. 스크립트 어디서든 접근 가능.
• 함수 표현식: 함수에 실제 실행 흐름이 도달했을 때 함수 생성. 그 전에는 함수 사용 불가.
• 이유: 자바스크립트 내부 알고리즘이 스크립트 실행 전에 초기화 단계에서 전역 선언된 선언문을 찾아서 먼저 생성하기 때문.

3. 스코프

• 함수 선언문: 엄격 모드에서는 코드 블록 내에서만 접근 가능.
• 함수 표현식: 코드 블록 밖에서 선언한 변수에 함수를 할당해주면 블록 밖에서도 함수 호출 가능. ⬇️  예시

  let age = prompt("나이를 알려주세요.", 18);
  
  let welcome;
  
  if (age < 18) {
  
    welcome = function() {
      alert("안녕!");
    };
  
  } else {
  
    welcome = function() {
      alert("안녕하세요!");
    };
  
  }
  
  welcome(); // 제대로 동작합니다.
  
  //물음표 연산자 사용한 버전
  /*
  	let welcome = (age < 18) ?
    function() { alert("안녕!"); } :
    function() { alert("안녕하세요!"); };
  */

🌱 유연성과 가독성을 고려해서 처음에는 함수 선언문 방식을 따르고, 선언문 방식이 부적절하거나 조건에 따라 함수를 선언해야 할 때 함수 표현식을 사용해주는 것이 좋다.

콜백 함수

: 함수의 인수로 함수를 전달, 필요시 인수에 전달한 그 함수를 나중에 호출(called back)

⬇️ 예시 (showOk, showCancel이 콜백 함수 또는 콜백이라고 불리는 애들)

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

⬇️ 익명 함수 버전

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

• 익명 함수(anonymous function) : 이름 없이 선언한 함수
  • 변수에 할당된 게 아니라서 바깥에서 접근 불가