동기 방식
손님이 주문하면 주문대로 음료를 생산하고, 손님은 음료 생산이 완료될 때까지 기다렸다가 받아가는 것이 동기 방식
순차적으로 실행하는 것
비동기 방식
손님이 주문하면 진동벨을 주고 음료 생산이 완료되면 진동벨을 울려서 손님이 음료를 받아가도록 하는 것이 비동기 방식
현재 실행 중인 업무가 종료되지 않은 상태여도 다음 업무를 곧바로 실행하는 방식을 의미
자바스크립트는?
자바스크립트는 싱글 스레드 기반으로 프로세스를 처리한다. 단 하나의 실행 컨텍스트 스택(콜스택)을 갖는다. 그렇기 때문에 자바스크립트는 동기 방식으로 코드를 해석하고 순차적으로 처리한다.
Q. 자바스크립트는 순차적인 실행을 따르는 동기 방법이라고 했는데 어떻게 하면 비동기적으로 실행할 수 있는 것인가?
A. 이벤트 루프와 태스크큐 덕분에 자바스크립트가 비동기적인 처리가 가능하다.
알아두기 : setTimeout, setInterval, HTTP 요청, 이벤트 핸들러 등은 비동기처리 방식으로 동작한다
자바스크립트 비동기 방식 그림
자바스크립트는 싱글 스레드 방식, 단 하나의 실행 컨텍스트 스택(실행 컨텍스트 스택은 크게 두가지로 나눌 수 있음 1.최상위: 실행 중인 실행 컨텍스트 = 처리하고 있는 주문과 2.실행 대기 중인 태스크 = 처리해야할 주문)을 갖기 때문에 “멀티 태스킹이 안되는 알바생” 이라고 인식하면 좋고 주문은 실행 컨텍스트로 이해하면 편리하다. 여기서 스무디 10잔은 다른 주문들에 비해서 굉장히 오래걸리는 무거운 작업이다. 이 작업을 빨리 하기 위해서는 믹서기에게 스무디를 맡기는 동안 나는 다른 업무를 맡는 방식이 가장 빠르고 효율적일 것이다.
자바스크립트 동작 과정
콜스택(실행 컨텍스트 스택) : 실행 컨텍스트가 추가되고 제거되는 공간을 의미
태스크큐: 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역
이벤트루프: 콜스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수(콜백, 이벤트 핸들러 등)가 있는지 확인
웹 API: JavaScript가 아닌 브라우저에서 제공하는 메서드
힙: 객체가 저장되는 메모리 환경
비동기 예시 코드
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
JavaScript
복사
찍히는 순서는 어떻게 될까요?
답안
실행 순서
비동기 예시 코드2
function 덧셈(a, b) {
setTimeout(() =>{
let result = a + b //50
console.log(result)
}, 0)
}
function 곱셈(a, b) {
setTimeout(() =>{
let result = a * b //12
console.log(result)
}, 0)
}
덧셈(20, 30)
곱셈(2, 6)
console.log('hello world')
JavaScript
복사
답안
