How JavaScript Works

캡틴판교님의 포스팅을 읽고 정리했습니다

자바스크립트의 동작원리: 엔진, 런타임, 호출 스택

자바스크립트 엔진

대표적인 예는 Google V8 엔진. V8은 Chrome과 Node.js에서 사용

엔진의 주요 구성요소

• Memory Heap : 메모리 할당이 일어나는 곳

• Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

런타임

거의 모든 개발자들이 setTimeout과 같은 브라우저 내장 API를 사용하지만 이 API를 자바스크립트 엔진에서 제공하지는 않음

자바스크립트에 관여하는 요소들

• 자바스크립트 엔진

• Web APIs (DOM, AJAX, Timeout)

• Event Loop, Callback Queue

호출 스택(Call Stack)

자바스크립트는 기본적으로 싱글 쓰레드 기번언어로 호출 스택이 하나. 따라서 한 번에 한 작업만 처리할 수 있음

• 호출 스택은 우리가 프로그램 상에서 어디에 있는지를 기록하는 자료구조

• 함수를 실행하면 해당 함수는 호출 스택의 가장 상단에 위치하고 함수 실행이 끝나면 해당 함수를 호출 스택에서 제거

• 하는 것이 스택의 역할

• 호출 스택이 최대 크기가 되면 스택 날려 버리기가 일어남(Overflowing)

-> 싱글 스레드 기반 코딩은 멀티 스레드 환경에서 제기되는 복잡한 문제나 시나리오를 고민하지 않아도 되기 때문에 쉬움(ex, 데드락) -> 그러나 싱글 스레드에서 코드를 실행하는 건 상당히 제약이 많음 -> 한 개의 호출 스택을 갖고 있는 자바스크립트의 실행이 느려진다면?

동시성(concurrency) & 이벤트 루프(Event Loop)

• 호출 스택에 처리 시간이 매우 오래 걸리는 함수가 있다면,

• 함수가 실행되는 동안 브라우저는 아무 작업도 못하고 대기 상태가 됨

• 페이지 렌더링 동작을 방해하지 않고 브라우저의 응답도 끊지 않으면서 연산량이 많은 코드를 실행하려면,

• 비동기 콜백

210913

자바스크립트에서 비동기 처리가 왜 중요한지 알 수 있었다. 자바스크립트의 작동 방식에 대해 좀 더 알아보면 좋을 것 같다.