[JAVA SCRIPT]함수 표현식

1. 함수 표현식을 이용해 함수 작성하기

문법

let sayHi = function() {

  alert("Hello");

};

 

//함수가 변수에 할당되었다.

JAVA SCRIPT에서는 함수는 값이고, 변수에 할당 가능하다.

 

주의사항

alert(sayHi);

이 코드는 sayHi 옆에 ()가 빠졌으므로 "함수의 코드"가 출력된다.

즉

let sayHi() = function() {

  alert("Hello");

};

전체가 출력된다.

 

 

 

 

2. 함수 복사하기

(1) 함수 선언문

functin sayHi() {

  alert("Hello");

}

 

let func = sayHi;    //sayHi()가 아닌 것을 주의하자

 

func();    //Hello

sayHi();    //Hello

 

 

(2) 함수 표현식

let sayHi = function() {

  alert("Hello");

};

 

let func = sayHi;    //sayHi()가 아닌 것을 주의하자

 

func();    //Hello

sayHi();    //Hello

 

 

 

 

3. 콜백 함수

예시를 들어 살펴보자

 

인수 3개를 받는 ask 함수를 만들어보자

 

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

 

콜백 함수의 개념

함수를 함수의 인수로 전달한다.

필요하다면 인수로 전달한 그 함수를 "나중에 호출"하는 것이 콜백 함수이다.

위의 예시에서는 사용자가 얼럿 창의 "확인" 버튼을 누르면 showOk가 콜백된다.

또한 "취소" 버튼을 누르면 showCancel이 콜백된다.

 

 

 

 

4. 익명 함수

함수 안에 선언된 함수를 "익명 함수"라고 한다.

 

위의 예시를 조금 변형해 보자

 

ask(

  "동의하십니까?"

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

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

);

 

 

주의사항

위 예시의 익명 함수는 ask 밖에서는 접근이 불가능하다.

 

 

 

 

5. 함수 선언문과 함수 표현식의 차이

(1) 구조의 차이

위에서 살펴봤듯이 함수 선언문과 함수 표현식을 작성하는 코드에는 차이가 존재하는 것을 알 수 있다.

 

 

(2) 함수 생성 시기

함수 선언문은 코드의 어느 위치에 선언되던 상관없이 함수를 호출할 수 있다.

이는 자바 스크립트가 실행되기 전에 함수 선언문을 모두 처리한 후에 작동하기 때문이다.

 

 

하지만 함수 표현식은 실행 흐름이 해당 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.

즉 함수 표현식이 나오기 전의 코드 부분에서는 함수 표현식으로 선언된 함수를 호출할 수 없다.

 

(3) 코드 블록

함수 선언문은 해당 함수가 정의된 "코드 블록" 내에서만 호출이 가능하다.

예시

if (age > 18) {

  function welcome() {

    alert("안녕!");

  }

}

 

wlecome();    //에러, 코드 블록 밖에서는 호출이 불가능하다.

 

 

하지만 함수 표현식을 사용하면 이 문제가 해결된다.

예시

if (age > 18) {

  welcome = function() {

    alert("안녕!");

  }

}

 

wlecome();    //제대로 동작한다.