JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

JS Event Loop에 대해서

Javascript Engine?

일단 Javascript Engine과 Rendering Engine은 다릅니다. Rendering Engine(Layout Engine)은 HTML과 CSS로 작성된 마크업 관련 코드를 웹 페이지에 렌더링하는, 그려주는 역할을 하는 것이고 반면 Javascript Engine은 자바스크립트로 작성된 코드를 해석하고 실행시켜주는 인터프리터입니다.
구글의 V8과 같은 자바스크립트엔진은 Call Stack, Task Queue, Heap으로 크게 나뉘고 추가적으로 Event Loop라는것이 있는데 Task queue에 들어가는 task들을 관리합니다.

Call Stack

자바스크립트는 한개의 Call Stack을 사용합니다. 코드 요청이 들어올 때마다 순차적으로 Call Stack에 담아서 처리합니다. 메소드가 실행이되면 Call Stack에 새로운 프레임이 생기고, push되고 메소드의 실행이 종료되면 해당 프레임은 pop됩니다.

Heap(Memory Heap)

동적으로 생성된 객체는 Heap에 할당이 됩니다. 구조화 되지 않는 더미같은 메모리 영역을 힙(heap)이라고 합니다. 정리하면 변수 선언, 함수 저장, 호출 이런 작업이 발생하는 공간입니다.

Task Queue(Event Queue)

처리해야하는 Task들을 임시로 저장하는 대기 큐가 존재합니다. 이것을 Task Queue라고 합니다. 이 Task Queue에 존재하는 Task들은 Call Stack이 비어졌을 때 대기 큐에 들어온 순서대로 Call Stack에 올려져서 수행됩니다. 자바스크립트에서는 비동기적으로 호출되는 함수들은 Call Stack으로 바로 들어가지 않고 Task Queue에 들어가게 됩니다. 예를들어 Ajax요청코드, 이벤트리스너, setTimeout같은 것들이 있습니다.

결론

자바스크립트 코드가 실행되면 Call Stack에 하나씩 들어가서 처리가되는데 Ajax요청코드, 이벤트리스너, setTimeout같은 것들은 Task Queue에 들어가서 대기합니다. Event Loop가 Call Stack이 비어있는지 확인하고 비어있다면 Task Queue에서 하나씩 Call Stack으로 보냅니다. 보내진 작업은 똑같은 과정을 거쳐서 처리가 되는 것입니다.

End.