[함수] 자바스크립트 실행 순서 & 반복문에서의 문제 및 해결

    <script>

        // 자바스크립트 실행 순서

        alert('A');

        setTimeout(function(){

            alert('B');

        });

        alert('C');

        // 이 코드에서 setTimeout은 예약을 거는 코드이므로,

        // setTimeout은 예약에 걸려있다가 마지막에 실행된다.

        // 즉, 이 코드에서의 실행순서 :  A > C > B

        // let const var

 

        // var : 전역 변수를 선언하는 키워드

 

        // 아래 코드는 언뜻 보면, "0", "1", "2"를 차례로 출력할 것 같지만,

        for (var i = 0; i < 3; i++) {

            setTimeout(function(){

                alert(i);

            });

            // 이 코드에서도 setTiemout이 예약에 걸리고,

            // i = 0

            // 예약을 걸고!

            // i = 1

            // 예약을 걸고!

            // i = 2

            // 예약을 걸고!

            // i = 3

        }

        // var는 전역 변수를 선언하기 때문에,

        // i = 3일때까지 반복한 후에 실행하게 되므로,

        // 이 코드는 "3"을 세 번 출력하게 된다.

        // 해결방법 1 : 해당 스코프 키워드로 변수를 선언하면 된다. 즉, let or const를 사용.

 

        for (let i = 0; i < 3; i++) {

            setTimeout(function(){

                alert(i);

            });

        }

        // 이 코드를 사용해야 "0", "1", "2"를 차례로 출력할 수 있다.

 

        // 다만, let이나 const는 인터넷익스플로러 등에서 실행되지 않는 곳이 많다는 것.

        

        // 해결방법 2 : 클로저 형성

 

        for (let i = 0; i < 3; i++) {

            (function (i) {

                setTimeout(function(){

                    alert(i);

                });

            })(i);

            // 함수 내부에 선언된 변수는 해당 함수에서만 유효하게 된다.

            // 함수를 선언하고, 바로 i를 전달하여, 

// i라는 매개변수가 이 함수 내부에서만 사용되도록 설정한다.

        }

        

    </script>