[Javascript] 함수 선언식, 표현식

이전에 대충 정리한 함수 선언식, 표현식 글을 보니 너무 대충 공부한 티가 나서 다시 정리한다.

 

 이전글

 

우선 호이스팅  을 알아야한다.

 

함수 선언식과 표현식의 차이점은 호이스팅에 영향을 받는가?이다.

 

함수선언식은 호이스팅에 영향을 받지만, 표현식은 받지 않는다.

 

// 실행 전
logMessage();
sumNumbers();

function logMessage() {
  return 'worked';
}

var sumNumbers = function () {
  return 10 + 20;
};

호이스팅 되면 아래와 같이 인식된다.

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

 

function logMessage (함수 선언식)은 호이스팅되어 위로 올라갔다.

sumNumbers 변수도 호이스팅 되었지만, function ()~ 부분의 대입은 원래 위치에 남아있다.

 

이 결과 sumNumvers에 함수가 대입되기 전에 함수 사용을 하게 되고, 에러가 발생하게 된다.

  -> 변수로 인식하는데 함수로 사용했기 때문

 

함수 표현식의 장점

• 호이스팅에 영향을 받지 않지만,

• 클로져로 사용할 수 있고,

• 콜백으로 사용할 수 있다.(다른 함수의 인자로 넘기는 것)

function tabsHandler(index) {
    return function tabEvent(event) {
        // 바깥 함수인 tabsHandler() 의 index 인자를 여기서 접근할 수 있다.
        console.log(index); // index 값을 표시
    };
}

var tabs = [1,2,3,4,5];
var i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i] = tabsHandler(i);
    tabs[i]();
}

코드를 보면,  var  i의 값을 이벤트에 연결해 출력해준다.

 

tabClickEvent에서 index를 사용할 땐, 바깥 범위의 변수인 index를 캡처한 값을 사용하기 때문에 

각각의 index를 출력해 준다.

 

만약 클로저를 쓰지 않는다면,

var tabs = [1,2,3,4,5];
var i,j;
    
for (i = 0; i < tabs.length; i += 1) {
    tabs[i] = function (event) {
        console.log(i);
    }
}
for (j = 0; j < tabs.length; j += 1) {
    tabs[j]();
}

코드 아래에서 tabs[j]에 접근하게되면, 함수 선언부의 console.log(i)를 실행하며 i를 참조하는데, i의 값은 5이기 때문에

5로만 출력된다.

 

이를 해결하는 방법에는 클로져, var i 대신 let을 쓰는 법도 있다. 이전 클로져 글 참조.

 

 

결론.

 

함수 선언식, 함수 표현식 중 뭐를 쓰던지, 잘 알고 효율적으로 써야 할 것 같다.