[Javascript] 함수 표현식의 사용

일반적으로 함수 선언식은 코드가 실행되기 전에 로드되지만, 함수 표현식은 interpreter가 해당 코드에 도달할 때만 로드된다. 이러한 특성으로 인해 함수 표현식은 호이스팅에 영향을 받지 않고, 정의된 범위에서 로컬 변수의 복사본을 유지할 수 있다.

함수 표현식이 유용하게 쓰이는 두 가지 경우를 살펴보자.

1. 클로저로써의 사용

첫 번째는 클로저로 사용될 때다.
(클로저란? 내부함수가 외부함수의 내부변수에 접근하는 것이다. 즉, 내부함수가 선언된 순간에 저장된 외부함수의 참조 정보를 이용하는 것이다.)
클로저는 함수를 실행하기 전에 해당 함수에 변수를 넘기고 싶을 때 사용할 수 있다. 아래 코드는 클로저 예시를 들 때 가장 많이 사용되는 탭 실행 이벤트 함수인데, tapsHandler 함수에 인덱스를 넘기면 내부의 tapClickEvent에서 인덱스에 접근해 이벤트 처리를 할 수 있다.

function tapsHandler(index) {
    return function tapClickEvent(evt) {
        // 이벤트 코드
    }
}

var taps = document.querySelectorAll('.tap')
var i

for (i = 0; i < taps.length; i += 1) {
    taps[i].onclick = tapsHandler(i)
}

2. 콜백 함수로써의 사용

두 번째는 콜백 함수로 사용될 때다. 콜백 함수는 함수를 함수의 인자로 전달하고, 필요하다면 인자로 전달한 그 함수를 "나중에 호출(called back)"하는 것이다. 아래 예시에서는 함수 표현식의 형태로 ask함수에 yes, no가 전달된 것을 확인할 수 있다.

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

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

함수 표현식과 함수 선언식을 상황에 맞게 잘 쓰는 것이 중요할 것 같다.

References
https://velog.io/@bisu8018/%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D-VS-%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D
https://velog.io/@sparkbosing/%ED%95%A8%EC%88%98-%ED%91%9C%ED%98%84%EC%8B%9D%EA%B3%BC-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98