JS engine의 구조
Memory Heap
- 메모리 할당이 일어나는 곳이다.
Heap
- 구조화 되지 않은 넓은 메모리 영역
\=> 객체, 배열들이 담긴다.
Call Stack(호출 스택)
- 실행될 코드의 한 줄 단위로 할당됨.
Web APIS
- 비동기 처리를 담당한다.
Callback Queue(Task Queue, Event Queue)
-
Task Queue, Event Queue 라고도 불린다.
-
비동기 처리가 끝난 후 실행되어야 할 콜백함수가 차례로 할당된다.
Event Loop
- Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.
JS의 동기적 코드 처리
- 일반적으로 함수가 호출되면 동기적으로 CallStack에 쌓인다.
function one(){
two();
console.log("first");
}
function two(){
console.log("two");
}
one();다음과 같은 코드가 있다고 해보자.
이 코드를 실행 시키면 CallStack에는 어떤 변화가 있을까?
실행 시
-
코드의 전체 내용을 담고 있는 anonymous 가 Call Stack 에 먼저 들어옴.
-
먼저 호출된 함수 one이 Call Stack에 들어옴.
-
함수 one 안에서 호출된 함수 two가 Call Stack 에 들어옴.
-
console.log("two")가 Call Stack에 들어온 후 실행되고 빠져나감.
-
함수 two가 빠져나감.
-
함수 one 안에 있던 console.log("first")가 Call Stack에 들어온 후 실행되고 빠져나감
-
함수 one이 빠져나감.
-
anonymous가 빠져나감
-
종료
와 같은 순서로 코드가 실행된다.
Call stack Error
-
위와 같이 코드를 동기적으로 실행하며 호출 순서대로 함수와 함수 스코프 내에 있는 코드들이 Call Stack에 쌓이면서 빠져나간다.
-
Call Stack 에는 정해진 사이즈가 잇다.
- 만약 재귀를 잘못 돌린다거나 무한루프에 빠져 비정상적으로 함수 호출이 이루어져 Call Stack의 정해진 사이즈를 초과해버리면 어떻게 될까?
=> 이 때, 바로 코딩하다가 의외로 많이 마주쳤던
Maximum call stack size exceeded
라는 에러가 발생하는 것이다.
JS의 비동기적 코드 처리
Event Loop의 정의
-
이벤트 루프는 브라우저나 Node.js와 같은 환경에서 실행되는 자바스크립트 코드에서 발생하는 모든 이벤트를 처리하고, 콜백 함수(callback function)을 실행하는 루프(loop)이다.
-
JS Event Loop에서는 비동기적 코드를 처리하는 것이 제일 중요한 개념이다.
console.log('one');
setTimeout(function (){
console.log('two');
}, 3000);
console.log('three');위와 같은 코드가 있다고 가정해보자. Call Stack과 Task queue는 어떤 식으로 위의 코드를 처리할까?
실행 시
-
Call Stack에 anonymous가 들어온다.
-
Call Stack에 console.log('one')이 들어와 실행된 후 빠져나간다.
-
Call Stack에 setTimeout 함수가 들어온다.
-
setTimeout함수는 비동기 처리 함수이기 때문에 Call Stack에서 빠져나와 Web api로 이동한다.
-
현재 setTimeout의 두번째 인자는 3초 이기때문에 Web Api에서 3초를 기다리고 있다.
-
Call Stack에 console.log('three')가 들어온 후 실행되고 빠져나간다.
-
Call Stack에서 anonymous가 빠져나간다.
-
Web Api에서 3초가 지난 후 setTimeout의 콜백함수가 task queue(callback queue)로 이동한다.
-
그리고 EventLoop가 Call Stack이 비어있는지 검사한다.
-
비어있다면 익명의 콜백함수를 Call Stack으로 보낸다.
-
익명 함수 내에 있는 console.log('중간')이 Call Stack에 쌓인 후 실행되고 빠져나간다.
-
익명 함수가 빠져나간다
-
종료
알 수 있었던 점
- JS Event Loop를 알기 전 까진 비동기적 함수니까 그냥 모든게 렌더링, 실행 되고 나서 실행되는거구나~ 라는 정도로만 이해를 했었다. 앞서 말했던 간단한 생각과는 다르게 비동기 처리를 담당하는 함수를 코드에 같이 작성하게 되면 내부 동작이 달라진다는 것을 알게 되었다.
=> JS의 코드 처리 방식을 알고 있다면 클린하고 효율성 좋은 코드를 짤 수 있을 것 같다고 생각했다.
