[JavaScript] 동기 비동기 특징 ( + Web Api)

 

 

동기

- synchronous

- 위에서부터 아래로 차례대로 실행되는 코드

- 한번에 코드 한줄씩 차례차례 실행

- stack 에서 코드를 한줄씩 실행시킴

 

 

비동기

- asynchronous

- 비동기적 코드 (fetch, 이벤트리스너, setTimeout, setState 함수...) 사용 시 빨리 처리되는 순서대로 실행되는 코드

- 실행이 오래걸리는 비동기적 코드들을 Web Api -> 큐에 넣어서 나중에 실행시키고, 실행이 바로 가능한 동기적 코드부터 stack 에서 꺼내서 실행시킴

- 자바스크립트 언어의 기능이 아니라 웹 브라우저의 기능

 

 

 

---

 

동기 비동기 실행 함수

/* eslint-disable */

export default () => {

    const sync = () =>{
        console.log('동기');
        console.log(1);
        console.log(2);
        console.log(3);
    }

    const async = () =>{
        console.log('비동기');
        console.log(1);
        setTimeout(() =>{
            console.log(2);
        }, 2000);
        console.log(3);
    }

    return(
        <>
            <h1>동기 비동기</h1>
            <button onClick={sync}>sync</button>
            <button onClick={async}>async</button>
        </>
    )

}

 

 

 

 

 

 

+

비동기 코드 (setTimeout, fetch) 이런 애들은 

무조건 Web API 를 들렸다가 실행되기 때문에 

엄청 빠르게 처리되어도 (0초 걸려도) 동기보다 늦게 실행된다.

/* eslint-disable */

export default () => {

    const async = () =>{
        console.log('비동기');
        console.log(1);
        // ******** 0 초로 준다!!!! ********
        setTimeout(() =>{
            console.log(2);
        }, 0.000);
        console.log(3);
    }

    return(
        <>
            <h1>동기 비동기</h1>
            <button onClick={async}>async</button>
        </>
    )

}