[자바스크립트] 함수 표현식

 

함수 표현식

기본 함수의 구조

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

함수 선언문 방식

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

• 함수를 생성하고 변수에 값을 할당하는 것처럼 함수가 변수에 할당되었다.
• 간단하게 풀면 “함수를 만들고 그 함수를 변수 sayHi에 할당하기”
• 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수 있다.

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

alert( sayHi ); // 함수 코드가 보임

• 자바스크립트는 괄호가 있어야지만 함수가 호출된다.
• 자바스크립트에서 함수는 값이다. 따라서 함수를 값처럼 취급할 수 있다.
• 위 코드는 함수 코드 소스가 문자형으로 바뀌어서 출력되었다.
• 함수는 sayHi()처럼 호출할 수 있다는 점 때문에 일반적인 값과는 조금 다르다.

 

변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수 있다.

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

let func = sayHi;    // (2) 함수 복사, 괄호가 없다는 점을 유의, sayHi()를 해줬다면 함수 그 자체가 아니라 함수 호출 결과(반환값)이 func에 저장되었을 것이다.

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

 

함수 sayHi는 아래와 같이 함수 표현식을 사용해 정의할 수 있다.

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

let func = sayHi;
// ..

⚠️ 끝에 세미 콜론이 있는 이유

• if { ... }, for { }, function f { } 같이 중괄호로 만든 코드 블록 끝엔 ;이 없어도 된다.
• 함수 표현식은 let sayHi = ...;과 같은 구문 안에서 값의 역할을 한다. 코드 블록이 아니고 값처럼 취급되어 변수에 할당되기 때문에 세미콜론을 붙이는 게 좋다.

 

 

콜백 함수

• question
  • 질문
• yes
  • "Yes"라고 답한 경우 실행되는 함수
• no
  • "No"라고 답한 경우 실행되는 함수

 

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

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

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

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

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

 

 

함수 ask의 인수, showOk와 showCancel은 콜백 함수 또는 콜백이라고 불린다.

• 함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념
• 위 예시에서 "yes"라고 대답한 경우 showOk가 콜백이 되고, "no"라고 대답한 경우 showCancel가 콜백이 된다.

 

함수 표현식을 사용하여 코드 줄이기

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

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

• ask안에 이름 없이 선언한 함수는 익명 함수라고 부른다.
• 익명 함수는 ask 바깥에서 접근할 수 없다.

 

 

함수 표현식 vs 함수 선언문

• 함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재합니다.

// 함수 선언문
function sum(a, b) {
  return a + b;
}

• 함수 표현식: 함수는 표현식이나 구문 구성(syntax construct) 내부에 생성된다 아래 예시에선 함수가 할당 연산자 =를 이용해 만든 “할당 표현식” 우측에 생성되었다.

// 함수 표현식
let sum = function(a, b) {
  return a + b;
};

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성합니다. 따라서 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
• 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.

 

엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 내 어디서든 접근할 수 있다. 하지만 블록 밖에서는 함수에 접근하지 못한다.

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

if (age < 18) {
  welcome();               // \   (실행)
                           //  |
  function welcome() {     //  |
    alert("안녕!");        //  |  함수 선언문은 함수가 선언된 블록 내
  }                        //  |  어디에서든 유효합니다
                           //  |
  welcome();               // /   (실행)

} else {

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

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

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

 

 

함수 선언문과 함수 표현식 중 무엇을 선택해야 하나요?

• 함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋다.
• 코드 구성을 좀 더 자유롭게 할 수 있다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼