호이스팅

아래의 코드를 실행하면, onclick 안의 i는 6이 되기 때문에 onclick이벤트 시, i를 활용하지 못한다.

window.onload = function() {
    var $wrap = document.getElementById('wrap');
    var $nav = document.getElementsByTagName('nav')[0];
    var $nav_li = $nav.getElementsByTagName('li');
    var len = $nav_li.length;
    console.log(len);

    for (var i = 0; i < len; i++) {
            $nav_li[index].onclick = function() {
                $wrap.className = 'box' + index;

                for (var k = 0; k < len; k++) {
                    $nav_li[k].className = '';
                }
                this.className = 'on';

                // a 태그 동작 제거 === e.preventDefault();
                return false;
            }
    }
}

아래와 같이 익명함수로 감싸주면 된다.

window.onload = function() {
    var $wrap = document.getElementById('wrap');
    var $nav = document.getElementsByTagName('nav')[0];
    var $nav_li = $nav.getElementsByTagName('li');
    var len = $nav_li.length;
    console.log(len);

    for (var i = 0; i < len; i++) {
        (function(index) {
            // 클릭 시점에 i는 6이 되버려서 익명함수로 감싸줘야 한다.
            $nav_li[index].onclick = function() {
                $wrap.className = 'box' + index;

                for (var k = 0; k < len; k++) {
                    $nav_li[k].className = '';
                }
                this.className = 'on';

                // a 태그 동작 제거
                return false;
            }
        })(i);
    }
}

* 즉시실행

• 함수를 정의함과 동시에 실행
• 함수내부에 있는 특정 값을 동시에 바꾸고 싶을 때
• 특정 블록안에 있는 지역변수의 호이스팅을 막고 싶을 때

* 제이쿼리 예제

$('.box').animation();
(function($){})(jQuery);