[javascript] 4. 자바스크립트 실행 순서

[javascript] 4. 자바스크립트 실행 순서

 

목차

1. 브라우저의 javascript 동작 구조

2. 브라우저의 javascript 동작 순서

3. 비동기 이벤트 동작 예제

 

브라우저의 javascript 동작 구조

  - 번역 출처(https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/)

  - 원본 출처(https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf)

 

브라우저의 javascript 동작 순서

  1) 동기 방식 이벤트 처리 동작

    (1) JS(javascript)엔진이 javascript 코드 순차 적으로 실행

    (2) code 실행 중 함수 발결 시 call stack에 넣기

    (3) call stack에 넣은 함수를 실행

    (4) call stack에서 실행된 함수를 call stack에 제거 

  2) 비동기 방식 이벤트  처리 동작

    (1) JS(javascript)엔진이 javascript 코드 순차 적으로  실행

    (2) code 실행 중 비동기 이벤트 발견시 이벤트 함수를 call stack에 넣기

    (3) 비동기 이벤트 함수의 Event handler를 Event Queue 에 넣기

        (이벤트 함수를 넣는 것이 아니다, 실제 이벤트 발생시 수행된는 함수를 넣는것)

    (4) call stack이 비어 있을 경우 Event Queue에서 Event handler 하나를 꺼내서 

        call stack에 넣기

    (5) call stack에 넣은 함수를 실행

    (6) call stack에서 실행된 함수를 call stack에서 제거

     * 비동기 이벤트란? 

       - JS엔진에 정의되어 있지 않는 함수들을 가리키며
         이 함수들은 모두 비동기 방식 이벤트로 실행된다.

  * 참고  싸이트(이보다 완벽한 설명은 없다)

    - javascript 동작 완벽 설명 

 

비동기 이벤트 동작 예제 

  1) setTimeout

alert('A');

setTimeout(function() {

alert('B');

},0);

alert('C');

    (1) 예상    

      - A, B, C 로 이벤트가 뜬다.

    (2) 실제 결과

      - A, C, B 로 이벤트가 뜬다.

    (3) 예상과 실제가 다른 이유 분석 

      - javascript 엔진이 먼저 코드를 실행후 

      - 비동기 이벤트인 Web API 를 실행 하기 때문에 A,B,C라는 결과가 나온다

    (4) 상세 동작 

     Step1) alert('A')를 call stack에 넣고 alert를 실핼 후 stack에서 제거

     Step2) setTimeout 을 call stack에 넣고 setTimeout의 Event handler를 Event Queue에 넣은후 

             setTimeout을 stack에서 제거

     Step3) alert('C')를 call stack에 넣고 alert를 실핼 후 stack에서 제거

     Step4) callStack이 비어있을 경우 Event queue에서 Event handler하나를 call stack에  넣은 후 

             Event Queue에서 Event handler 하나를 제거

     Step5) callStack에 존재하는 이Event handler 를 실행 후 call Stack에서 제거

 

  2) setTimeout for 문 에제

 

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

setTimeout(function() {

alert(i);

}, 1000);

}

    (1) 예상    

      - 1, 2, 3 로 이벤트가 뜬다.

    (2) 실제 결과

 

      - 3, 3, 3 로 이벤트가 뜬다.

    (3) 예상과 실제가 다른 이유 분석 

      - javascript 엔진이 먼저 코드를 실행후 

      - 비동기로 동작하는 setTimeout Web API 를 3번 실행 하였기 때문에 

        현재 Event Queue에는 3개의 Event Handler가 들어가있다.

        그래서 모든 코드 실행 후 마지막으로 Event Queue에 등록된 Event Handler 가 처리가 되기 때문에

        현재 for 문의 i 값이 3임으로 실행되는 Event handler는 3을 3번 출력 하는 것이다.

    

<연관된 글>

[javascript] 1. 자바스크립트 기초 (기본 구조)

[javascript] 2. 자바스크립트 함수란?

[javascript] 3. 자바스크립트 내장 함수

[javascript] 4. 자바스크립트 실행 순서

[javascript] 5. 자바스크립트 객체 란?

[javascript] 6. 자바스크립트 값 복사와 참조 복사

[javascript] 7. 자바스크립트 생성자 함수와 프로토타입(Prototype)