동기, 비동기

동기 : 한명의 점원뿐이라 주문한번 들어오면 주문이 완료 될 떄까지 뒷 손님들은 아무것도 못함.
서버에 요청을 보냈을때 응답을 받아야 다음 동작을 수행 할 수 있음.
비동기 : 주문한내용이 만들어 지고 있을 때 다음사람의 주문도 같이 받음 (점원이 여러명 느낌)
서버에 요청을 보냈을때 응답이 왔던 안왔던 다음 작업을 시작함.

자바 스크립트는 동기적으로 동작하지만 비동기적으로 동작도 가능함.

위 내용을 보면 동기적이면 456이 먼저 나와야하는데 123이 먼저 출력됨.
어떻게 비동기 처리도 가능한지 알아보자

Stack 과 Queue

자료구조중 한가지

스택과 큐는 자바스크립트 실행환경, 예를들면 크롬 브라우저에서도 적용이됨.
크롬에는 콜스택이 있으며

우리가 실행한 함수들이 담겨있는 공간임

이런식으로 자바스크립트의 함수는 콜스택에 쌓이는 형식으로 쌓였다가 나중에 들어온 함수부터 실행되며 종료됨

또한 콜백 큐 라는것도 존재함.

Web APIS 에는 web브라우저에서 제공해주는 것들, 자바스크립트 실행 환경에서 제공해 주는것들이 담겨 있음.

func1() 을 실행시키고 setTimeout() 이 1초 동작하게 되어있다고 하면
콜 스택이 비워지면 그때서야 콜백큐에 있던 함수들이 콜스택으로 들어감

콜백 큐에 들어가는 함수들 : 비동기 코드들이 들어감.
다른 코드의 실행을 기다리지 않고 먼저 실행되는 코드들.

위 코드를 순서를 분석하면

• 456의 setTimeout이 콜백 큐에 들어감
• 1초 되기전에 console.log가 실행되어 콜스택에 들어감
• 콜스택에 쌓일것이 없기에 123 출력됨
• 1초 지났을때 콜스택이 비어있으니 콜백에 있던 456이 콜스택으로 넘어감
• 콜스택에 있는 456 출력됨