함수 표현식

함수 표현식

- JS는 함수도 '값'으로 취급하므로, 함수 표현식이란걸 통해서 함수를 만들 수 있다.

- 함수 표현식의 끝에 세미콜론은 구문의 끝이므로 붙은 것.

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

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

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

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

- 함수는 '값' 이므로, 위처럼 함수를 복사해 다른 변수에 할당할 수 있다.

- 함수 복사 시, sayHi(); 가 아니라 함수 이름만 넘겨준 것을 주목하라. 괄호가 있었다면 함수가 아니라 함수 반환 값이 func 에 저장된다.

 

콜백 함수

- 함수를 함수의 인수로 전달하고, 필요시 인수로 전달한 그 함수를 나중에 호출하는 것.

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

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

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

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

- 위 예시에선, 사용자가 yes라고 하면 showOk가 콜백함수가 되고, no는 showCancel이 콜백이 된다.

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

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

- ask 함수 처럼, 이름 없이 선언된 함수는 익명함수라고 부름.

- 익명 함수는 외부에서 접근 안됨.

 

함수 표현식 vs 함수 선언문

차이

- 1. 자바스크립트 엔진의 함수 생성 시점

• 함수 표현식: 실제 실행 흐름이 해당 함수에 도달 했을 때 함수 생성.
• 함수 선언문: 선언문이 정의 되기도 전에 호출 가능.
• JS는 스크립트 실행 전, 전역에 선언된 함수 선언문을 찾고 -> 해당 함수를 생성하기 때문.

- 2. 스코프

• 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면, 해당 함수는 블록 내 어디서든 접근 가능.
  • 블록 밖에서는 함수에 접근 불가.

let age = prompt("나이를 알려주세요.", 18);

// 조건에 따라 함수를 선언함
if (age < 18) {

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

} else {

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

}

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

- 함수 선언문은 코드 블록 안에서만 유효하기 때문에 발생한 에러.

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

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

} else {

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

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

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

 

if 문 밖에서 함수를 호출하려면 함수 표현식을 사용하면 된다.

let age = prompt("나이를 알려주세요.", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("안녕!");
  };

} else {

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

}

welcome(); // 제대로 동작합니다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  function() { alert("안녕!"); } :
  function() { alert("안녕하세요!"); };

welcome(); // 제대로 동작합니다.