<자바스크립트> 화살표 함수와 콜백 함수

* 함수 표현식

- 함수를 표현하는 방식에 대해서는 이미 예전에 다뤘다. 다시 살펴보자면 다음과 같다.

 

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

  - 위는 함수 선언문 방식이다.

 

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

 

 - 위는 함수 표현식 방법이다. 변수에 함수를 할당하는 것처럼 사용하였다.

 

 - 함수 선언문 방식은 if {...}, for {...} 과 같이 중괄호로 만든 방식이므로 ;(세미콜론)이 없더라도 구문의 끝임이 내장되어 있다. 이와 달리 함수 표현식 방식은 변수를 사용했으므로 구문의 끝을 나타내야한다. 따라서 ; 를 사용하였다.

 

 - 함수 선언문과 함수 표현식의 가장 큰 차이는 호출이다. 선언문은 어디에 작성하더라도, 심지어 호출보다 아래에 작성하더라도 동작한다. 그러나 표현식은 반드시 위에서 아래로라는 순서를 따르므로 호출 전에 반드시 작성되어 있어야 작동한다.

 

 - 함수 선언문이 가독성도 좋고 위치도 어디에라도 작성해도 된다면 선언문이 당연히 권장된다. 그러나 특수한 케이스에서는 표현식을 써야할 경우도 있다. 예를 들면 함수 선언문은 코드 블록안에서만 유효한데, if문안에 작성하면 그 블록 안에서만 유효한 것이다. 그러나 표현식으로 작성하면 외부에서도 동작을 하게 된다. 

 

* 화살표 함수

 - 위의 표현방식보다 함수를 더 간결하게 만들 수 있다.

 

let showHi = () => alert("Hello");

 

 - 위에서 봤었던 코드를 이렇게 줄일 수 있다. 화살표 함수라는 명칭은 문법의 생김새 때문에 붙여진 이름이다.

 

 - 현재 괄호 안은 비어져 있지만, 인자를 받는 곳이다. 인자가 하나일 경우에는 괄호를 표시하지 않아도 된다.

 

 - 함수 식이 두 줄 이상일 경우에는 {} (중괄호)를 사용한다.

 

 - 화살표 함수는 비교적 최신 문법이므로 오래된 브라우저에서는 작동하지 않으니 확인하고 사용하자.

 

* 콜백 함수

 - 함수를 함수의 인자로 전달하는 예시를 살펴보자.

 

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

function showOk() {
    alert("동의 완료");
}

function showCancel() {
    alert("취소");
}

ask("동의하십니까?", showOk, showCancel);

 

 - 가장 아래에 ask함수를 보면 showOk와 showCancel을 인자로 주었음을 볼 수 있다. 이 때 ()는 없으므로 함수실행을 시키는 것도 아니고 마치 변수를 준 것처럼 했음을 알 수 있다.

 

 - 위의 함수 선언문으로 올라가보면 ask의 인자로 yes와 no라는 두번째, 세번째 변수를 받고있다. 여기서 if문 안이 true이면 yes에 ()를 붙여서 실행되도록하였다. confirm으로 question내용을 내보내서 사용자에게 true 또는 false값을 받게 될 것이므로 yes또는 no에 반드시 ()가 붙어서 실행될 것이다.

 

 - showOk와 showCancel에 대한 함수는 그 아래에 정의되어있다.

 

 - 함수를 함수의 인수로 전달하고, 필요에따라 인수로 전달한 함수를 "나중에 호출(called back)" 하는 것이 콜백 함수이다. 위에서 ask의 인수, showOk와 showCancel을 콜백 함수 또는 콜백이라고 부른다.

 

 

 

---

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼