JavaScript Closures MDN 예제 해석

클로저 개념은 여기를 참고해주세요

https://wouldyou.tistory.com/15

JavaScript closure 개념

 

MDN예제를 보다가 막히는 부분을 적어봅니다

 

function countSeconds(howMany) {
        for (var i = 1; i <= howMany; i++) {
            console.log("for :", i);
            setTimeout(function () {
                console.log(i);
            }, i * 1000);
        }
    };
    countSeconds(3);

이 코드는 인사이드 자바스크립트 책에 나오는 코드입니다.

의도는 1초후 1, 2초후2, 3초후 3이 찍히는 것입니다. 

그러나 결과는 4가 1초에 한번씩 3번 찍힙니다.

 

왜 이런일이 일어날까요?

 

이미 for함수가 끝난 후에 setTimeout이 i를 참조하기 때문입니다. for 문이 끝나면 i는 이미 4로 변했기 때문에 4만 출력되는 것입니다.

 

JS는 single thread입니다. 그래서 하나의 thread에 큐를 보관합니다.

setTimeout은 이 큐가 아닌 별도의 stack에 들어있습니다. 그래서 for문을 다 돌린다음에 별도의 stack에 있는 setTimeout에 접근하여 이런 결과가 나온것입니다. 

 

onfocus등의 event함수도 마찬가지입니다.

 

    function showHelp(help) {
      document.getElementById('help').innerHTML = help;
    }

    function makeHelpCallback(help) {
      return function() {
        showHelp(help);
      };
    }

    function setupHelp() {
      var helpText = [
          {'id': 'email', 'help': 'Your e-mail address'},
          {'id': 'name', 'help': 'Your full name'},
          {'id': 'age', 'help': 'Your age (you must be over 16)'}
        ];

      for (var i = 0; i < helpText.length; i++) {
        var item = helpText[i];
        document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
      }
    }

    setupHelp();

MDN예제에서 onfocus함수도 별도의 stack에 있어 나중에 접근하기 때문에 예상과는 다른 결과가 나옵니다.

이를 해결하기 위해서는 즉시실행함수를 사용해주면 됩니다.