자바스크립트는 싱글스레드 언어로써 동기적인 처리를 지원한다.
동기와 비동기 ?
동기
동기는 일이 순차적으로 처리가 되어야하며 이전 일이 끝나지 않으면 다음 일을 할 수 없고 이전 일이 끝날 때까지 대기해야한다는 점이 있다.
비동기
비동기는 일이 순차적으로 처리되지 않으며 이전일이 끝나지 않더라도 미리 일을 처리하여 필요할 때 사용할 수 있다는 장점이 있다.
그래서 자바스크립트는 비동기처리를 할 수 없을까?
자바스크립트는 싱글 스레드로써 동기적 언어이지만 이벤트 루프(event loop)를 통해 멀티스레드 즉, 비동기 처리 환경을 만들 수 있다.
이벤트 루프를 알기 전에 자바스크립트의 실행 환경 먼저 알아야 하는데, 자바스크립트는 힙(heep) 영역, 스택(stack)영역, 큐영역 으로 나누어져 있다.
힙, 스택 ?
쉽게 말하자면 힙은 변수를(동적으로 저장되는 메모리 영역) 저장해두는 영역이고, 스택은 차례차례 함수 쌓고, 함수를 호출시키는 영역이다.
const a = 1000
//힙 영역
console.log(a)
//스택 영역console.log(a)라는 함수를 실행시키면서 스택은 힙에서 a라는 변수를 찾아 호출시킨다. 그리고 스택에서 실행된 함수console.log(a)는 제거되면서 차례차례 함수가 실행된다.
큐
큐는 자바스크립트의 비동기 함수들을 대기시켜 놓는 곳이다.스택이 비기전 까지 비동기함수들은 큐영역에서 대기하게 된다.
(이벤트리스너, async/await, setTimeout 같은 비동기 처리된 함수들을 대기 시킴)
이벤트 루프
스택이 비게 되면 큐에서 스택으로 함수를 보내주게되는데 이를 감시하고 보내주는 역할을 하는 것이 이벤트루프이다.
정리
힙 - 변수나 데이터 구조 저장
스택 - 함수를 차례대로 저장(동기), 함수를 동기적으로 실행시킴
큐 - 함수를 대기시켜놓는 곳(비동기),
이벤트 루프 - 스택과 큐를 감시, 스택이 비면 큐에서 스택으로 비동기 함수를 올려줌.
