[자바스크립트] 자바스크립트(JavaScript)의 동작 원리

면접 준비를 하면서 공부하는 겸 블로그 정리하려고 합니다.

면접 질문 목록에서 자바스크립트와 React같은 프론트엔드 개발 질문 목록이다 보니 개념이 중요한 것같습니다.

그래서 기본적인 Javascript의 동작원리에 대해 공부하고 포스팅했답니다

 

 

자바스크립트( Javascript )의 동작 원리

자바스크립트 ( javascript )는 싱글 스레드 기반 원리로, 한번에 하나의 작업만 처리할 수 있습니다. 

그러나 비동기 처리를 통해 여러 작업을 '동시에' 처리하는 것처럼 보일 수 있습니다.(Async인가요..?)

 

Javascript 엔진은 Call Stack, Web API(블라우저 제공), Task Queue(Event Queue), Event Loop로 구성됩니다.

** JavaScript 엔진 : 자바스크립트 (javascript) 코드를 실행하는 프로그램 또는 인터프리터. 

 

 

• Call Stack : 코드에서 발생하는 함수 호출을 추적하는 곳입니다.
• Web API : 브라우저에서 제공되며, 비동기 작업(타이머 설정, HTTP 요청 등)을 처리합니다.
• Task Queue : 비동기 작업 완료 시 호출되어야 하는 콜백 함수를 대기시키는 곳입니다.
• Event Loop : Call Stack이 비어있는지 확인하고, Task Queue에 있는 첫번째 콜백 함수를 Call Stack으로 이동시킵니다.

 

Call Stack이란?

Call Stack이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조입니다.

콜 스택(Call Stack)을 사용하는 목적은 실행중 서브 루틴의 실행이 끝났을 때, 제어를 반환할 지점을 보관하기 위해서입니다. 비동기 처리를 할때나 함수를 호출할 때 유용 하겠네요!

 

 

Web API란?

Web API란 웹 서버와 웹 브라우저 간의 애플리케이션 처리 인터페이스입니다.

HTTP 서비스 이고 다양한 클라이언트에서 접근이 가능하도록 설계되어있습니다!

모든 웹 서비스는 API이지만 모든 API가 웹 서비스는 아닙니다.

REST API 같은 경우 표준 아키텍처 스타일을 사용하는 특수한 유형의 웹 API입니다.

REST API는 무엇인지는 다음에 포스팅하도록 하겠습니다!

 

 

Task Queue란?

Task Queue란 Web API가 수행한 비동기 함수를 넘겨받아 Event Loop가 해당 함수를 Call Stack에 넘겨줄 때까지 비동기 함수들을 쌓아은 곳이다.

전에 포스팅한 내용처럼 queue는 동작을 수행할 수있도록 저장 공간으로 사용됩니다. FIFO!

 

 

Event Loop란?

Event Loop는 Call Stack과 Task Queue를 상태를 계속 감시하며 Call Stack에 함수들이 존재하지 않는다면 Task Queue에 있는 비동기 함수를 Call Stack에 전달합니다.

Event Loop는 비동기 함수를 처리하는 매개체라고 생각하면 됩니다!

 

 

 

 

 

자바스크립트(Javascript)의 동작원리를 이해하면 더 효과적인 코드를 작성하고, 성능 문제를 해결하는 데 도움이 됩니다. 

위 특징을 가지고 비동기 처리를 가능하게 할 수 있습니다. 

애니메이션 처리를 할 때 유용하겠네요!