[JavaScript] 자바스크립트 제어 흐름 - 비동기

자바스크립트 비동기?

• 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다.
  
  • 멀티스레드 프로그래밍 언어 EX) Java, C++
• 처음 자바스크립트를 접하는 경우, 동작에 대한 정확한 이해가 없으면 코드의 흐름을 따라가기 어렵다.
• 자바스크립트 내부의 비동기 동작을 이해하기 위해서는 이벤트 루프 등의 개념을 알아야만 한다.

 

자바스크립트 엔진

• 자바스크립트 엔진은 하나의 메인 스레드로 구성된다.
• 메인 스레드는 코드를 읽어 한 줄씩 실행한다.
• 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다.

 

동기적 제어 흐름

• 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.
• 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다.
• 코드의 흐름과 실제 제어 흐름이 동일하다.
• 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.

let a = 10
console.log("a : ", a)

function foo(num) {
    for (let i = 0; i < 10; ++i) {
        console.log(num)
    }
}

foo(num)

 

비동기적 제어 흐름

• 비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
• 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.
• 코드 흐름과 실제 제어 흐름이 다르다.
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

let a = 10

setTimeout(function callback() {
    console.log('a : ', a)
}, 3000)

console.log('Finished')