자바스크립트와 동시성

참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

이벤트 루프 - JavaScript | MDN

Javasript 와 싱글 쓰레드

• 자바스크립트는 싱글 쓰레드로 동작하는 언어이다.
  • 메인 쓰레드 하나와 콜스택 하나로 구성되어 있다!
• 비동기 작업을 동시에 할 수 있다
  → 자바스크립트는 코어 엔진만 가지고 않고 실행환경(런타임)의 도움을 받아 동시 실행을 한다.
  → WebAPI(dom, ajax, setTimeout...), Event Queue, Event Loop 등과 함께 동작한다!
• 쓰레드가 하나일 때 일어나는일
  → 자바스크립트의 특징 중 하나인 run-to-completion 이라는 것 때문에 하나를 끝내기 전엔 다른일을 하지 않는다.
• 아래 코드에서 window.alert() 아래에 어떠한 코드를 써도 알림창에서 확인 버튼을 누르지 않는 이상 실행되지 않는다!

window.alert();
...
...
...
console.log(1)

 

비동기 작업을 어떻게 하는지?

• 👉 비밀은 이벤트 루프! 😊 
• 프론트엔드에서 자바스크립트는 혼자 독립 실행되는 게 아니고 브라우저를 통해 실행된다.
• 브라우저에서 자바스크립트를 실행할 때 이벤트 루프라는 걸 기반해서 실행한다!

V8엔진에서 비동기 작업 처리

👉 동시성(Concurrency)

• 자바스크립트는 기본적으로 한번에 하나의 일만 처리하지만, 우리가 만든 프로젝트가 돌아가는 걸 보면 여러 작업이 한 번에 처리되는 것처럼 보인다
  → 이걸 두고 동시성이라고 부른다. (실제로 동시에 실행되는게 아니다!)

용어

• heap
  → 동적으로 생성된 객체 인스턴스가 할당되는 영역
• call stack
  → 일거리가 쌓이는 스택
• event queue
  → 테스크 큐(Task queue)나 콜백 큐(callback queue)라고도 한다.
  → 비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, 타이머의 콜백 함수를 넣어두는 큐
• event loop
  →테스크(일거리)가 들어오길 기다렸다가 테스크가 들어오면 일을 하고, 일이 없으면 잠깐 쉬기를 반복하는 자바스크립트 내의 루프
  → call stack 내에서 현재 실행중인 일거리가 있는 지, 이벤트 큐에 일거리가 있는 지 반복해서 확인하고, 콜 스택이 비어 있으면 이벤트 큐의 일거리를 콜스택으로 옮겨가게끔 돕는다
• Web API
  → Ajax, DOM event, setTimeout 등 브라우저에 내장된 API