Link Search Menu Expand Document
saeeng

함수 표현식 VS 함수 선언식

  • js에서 함수를 만드는 방식은 두 가지가 존재한다.

함수 선언식

  • 함수 선언식에서는 function 키워드를 통하여 함수를 선언한다.
     function hello(){
     console.log("hihi");
 }  
 hello() // hihi

함수 표현식

  • 함수 표현식에서는 함수를 만들고 변수에 함수를 할당한다.
      let hello = function(){
      console.log("hihi");
  } 
  hello() // hihi

차이점

  • 두 가지 방식의 가장 큰 차이점은 호이스팅의 여부이다.
  • 함수 선언식으로 함수를 선언하는 경우, 함수자체가 호이스팅 되어서 전역적인 접근이 가능하다.
  • 반면, 함수 표현식으로 함수를 선언하는 경우, 변수에 함수를 할당하기 때문에 실행지점에 이후에 함수의 사용 및 접근이 가능하다.
    hello() // hihi
    function hello(){
        console.log("hihi")
    }

    hello() // error
    let hello = function (){
        console.log("hihi")
    }

함수 표현식을 사용했을 때의 장점

함수 표현식을 다른 함수의 인자 값(콜백함수)로 사용할 수 있다.

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

    ask(
    "동의하십니까?",
    function() { alert("동의하셨습니다."); },
    function() { alert("취소 버튼을 누르셨습니다."); }
    );
  • 위처럼 함수에 이름을 붙이지 않고 사용하는 방식을 익명함수(Anonymous function)라고한다.
  • 변수에 할당하지 않고 사용하기 때문에, 외부에서의 접근을 막을 수 있다는 장점이 있다.

closure 활용


function tabsHandler(index) {
    function tabClickEvent(evt) {
        // Do stuff with tab.
        // The index variable can be accessed from within here.
        console.log("hi");
    };
    return tabClickEvent
}

var tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}
  • 위 코드처럼 각 tabHandler에서 전달된 i값을 closure tabClickEvent에서 접근하여 원하는 결과를 얻을 수 있다.
  • 라고 많은 블로그 글들에서 설명해주고 있었다.

  • 함수표현식이라고하면 let 함수 = function() {} 의 형태가 되어야 함수 표현식 아닌가? 대체 위 코드에 어디에서 위와같은 형태로 정의된 함수가 있는가?

  • 다시 한 번, 이런 저런 자료를 찾아본 결과 함수 표현식은 단순히 함수를 정의하는 방법 자체를 넘어서 함수를 객체로 다루는 자바스크립트의 특성을 활용하여, 함수를 특정 변수값에 할당시키는 광범위한 표현식 자체를 말하는 것 같다.
  • 즉, function tabClickEvent(evt) 자체는 함수 선언식 이지만 tabsHnadler의 리턴값이 기본 undefined 가 아닌 tabClickEvent 라는 함수 를 담고 있다는 점에서 함수 표현식이라고 할 수 있다.

    참고

  • https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/