함수 표현식

켄·2022년 12월 29일

함수 표현식이란?

함수를 값처럼 전달하는
함수 표현식은 정의한 function을 별도의 변수에 할당하는 것이다.
함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하는 반면, 함수 표현식은 없어도 되기에 일반적으로 함수 표현식은 함수명을 정의하지 않는다.
자바스크립트에서는 함수를 특별한 종류의 값(value)으로 취급한다.

즉, 함수를 다른 변수에 값으로써 '할당'한 것이 곧 함수 표현식이다.

함수 선언(Function Declaration)

<script>
function sayHyi(){
	alert( "Hello" );
}
</script>

sayHi라는 이름을 가진 함수 선언

함수 선언 방식 외에

함수 표현식(Function Expression)

을 사용해서 함수를 만들 수 있습니다.

<script>
let sayHi = function() {
  alert( "Hello" );
};
</script>

함수가 변수에 할당되었습니다.
변수 sayHi에 익명의 함수를 할당

자바스크립트에서 함수는 값입니다.
변수를 복사해 다른 변수에 할당하는 것처럼
함수를 복사해 다른 변수에 할당할 수도 있습니다!

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

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

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

세미콜론?

함수 표현식의 끝에 왜 세미 콜론 ;이 붙는지 의문이 들 수 있습니다. 함수 선언문에는 세미 콜론이 없는데 말이죠.

<script>
function sayHi() { // 함수 선언문
  // ...
}

let sayHi = function() { // 함수 표현식
  // ...
};
</script>

이유는

구문의 끝이기 때문에 붙여졌습니다. 모든 구문의 끝엔 세미콜른을 붙이는 게 좋습니다.
if { ... }, for { }, function f { } 같이 중괄호로 만든 코드 블록 끝엔 ;이 없어도 됩니다.
함수 표현식은 let sayHi 구문 안에서 값의 역할을 합니다.

콜백 함수

예시

함수는 반드시 question(질문)을 해야 하고, 사용자의 답변에 따라 yes() 나 no()를 호출합니다.

<script>
function ask(question, yes, no) { // 함수의 인수로 전달
  if (confirm(question)) yes()
  else no();
}

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

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

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

함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불립니다.
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념입니다.
위 예시에선 사용자가 "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백이 됩니다.

아래와 같이 함수 표현식을 사용하면 코드 길이가 짧아집니다.

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

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); }, // ask 안에 함수가 선언됨
  function() { alert("취소 버튼을 누르셨습니다."); }
);

</script>