자바스크립트 함수 표현식

함수 표현식

자바스크립트에서 함수는 값이다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있다.

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

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

• sayHi옆에 괄호가 없기 때문에 함수는 실행되지 않는다.
• 함수 소스 코드가 문자형으로 바뀌어 출력된다.

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

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

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

• 일반적인 값과는 조금 다르지만 그 본질은 값이기 때문에 값에 할 수 있는 일을 함수에도 할 수 있다.
• 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수 있다.
• (1)에서 함수 선언 방식을 이용해 함수를 생성한다. 생성한 함수는 sayHi라는 변수에 저장된다.
• (2) sayHi를 새로운 변수 func에 복사한다. sayHi 다음에 괄호가 없다는 점을 유의
  만약 괄호가 있다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(반환값)이 저장된다.
• sayHi()와 func()로 함수를 호출할 수 있다.

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

let func = sayHi;
// ...

• 함수 sayHi는 위와 같은 함수 표현식을 사용해 정의할 수 있다.

 

콜백 함수

함수를 함수의 인수로 전달하고, 필요하면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백함수의 개념

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은 콜백함수 또는 콜백이라고 부른다.

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

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

• 함수 표현식을 사용하면 코드 길이가 짧아진다.
• ask(..)안에 이름 없이 선언한 함수를 익명함수라 부른다.
• 익명함수는 변수에 할당된 게 아니기 때문에 ask 바깥에선 접근할 수 없다.

 

함수는 "동작"을 나타내는 값이다.

문자열이나 숫자 등의 일반적인 값들은 데이터를 나타내는데, 함수는 하나의 *동작(action)*을 나타낸다.

동작을 대변하는 값인 함수를 변수 간 전달하고, 동작이 필요할 때 이 값을 실행할 수 있다.

 

함수 표현식 vs 함수 선언문

함수표현식과 선언문의 차이에 대해 알아보자

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

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

• 함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
• 함수 표현식 : 함수는 표현식이나 구문 구성 내부에 생성된다.
  위의 예시에선 할당 연산자 = 를 이용해 만든 "할당 표현식" 우측에 생성되었다.

 

자바스크립트 엔진이 언제 함수를 생성하는지에 대한 차이

• 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성해서 실행 흐름이 도달했을때부터
  해당 함수를 사용할 수 있다.
• 함수 선언문은 함수 선언문이 정의되기 전에도 호출할 수 있다.
  따라서 전역 함수 선언문은 스크립트 어디에 있느냐 상관없이 어디에서든 사용할 수 있다.

*자바스크립트는 스크립트를 실행하기전, 준비단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다.