javaScript. 호출 스택

___

 

>> 실행 컨텍스트에 대해 포스팅 한 글을 먼저 참고하자.

 

javaScript. 실행 컨텍스트 (Execution Context)

___

 

실행 컨텍스트는 스택(Stack)과 비슷한 구조임을 알 수 있다.

 

여기서 스택(Stack)이란 쉽게 말해서, 후입선출(LIFO)라고 할 수 있다.

(반대되는 개념으로는 큐(Queue) - 선입선출(FIFO) 가 있다.)

 

 

 

[자료구조] 큐와 스택의 차이점 🔻

https://mywebproject.tistory.com/241

etc. 자료구조 - 스택(stack) / 큐(queue)

 

Stack	LIFO (Last In First Out)
Queue	FIFO (First In First Out)

 

 

function first() {
  second();
  console.log('첫 번째');
}
function second() {
  third();
  console.log('두 번째');
}
function third() {
  console.log('세 번째');
}
first();      // 세번째 , 두번째, 첫번째
third();      // 세번째

 

 

fisrt가 호출되고, first안에 second()가 호출되고,

마지막에 second()안에 third()가 호출된다.

 

호출된 순서와 반대로 실행이 되고, 실행되면 스택(쌓여진 더미)에서 제거된다.

이를 호출 스택이라고 한다.

 

 

 

third()

second()

first()

전역 컨텍스트

 < 호출 스택 >

 

 

1. third가 실행되고 지워짐

2. second가 실행되고 지워짐

3. first가 실행되고 지워짐

4. 전역 컨텍스트가 지워짐

>> 호출스택에는 아무것도 X. 실행 완료

 

 

+) 스택이 꽉 찼을때 Overflow 발생

 

 

재귀함수같이 함수 안에서 다른 함수를 계속 호출하면

스택이 꽉 차서 overflow 가 발생함.

 

Uncaught RangeError: Maximum call stack size exceeded

 

브라우저마다 호출 스택 최대치가 다르다.

 

 

 

---

 

이어서 이벤트루프(Event Loop)에 대해서 포스팅 하겠다.

 

https://mywebproject.tistory.com/243

javaScript. 이벤트 루프 (Event Loop)

 

 

 

---

REFERENCE

https://www.zerocho.com/category/Javascript/post/597f34bbb428530018e8e6e2

(JavaScript) 호출 스택과 이벤트루프

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!