호출 스택 이벤트 루프(1) [ TIL ] [ Javascript ]

 

Problem

 

호출 스택의 간단한 동작원리를 알아보장 

---

Try

 

말 그대로 스택(LIFO)은 자료구조인데 호출 스택(call stack) 은 함수 호출의 실행 순서를 기록하는 스택 자료구조 이다.

함수가 호출되면 해당 함수의 실행 컨텍스트가 호출 스택의 맨 위에 추가된다고 한다.

그리고 함수 실행이 완료되면 스택에서 제거된다고한다.

 

 

호출 스택은 여러 함수들을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터(웹 브라우저의 자바스크립트 인터프리터같은) 를 위한 메커니즘입니다. 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야 하는지 등을 제어합니다.
- MDN Web Docs -

 

실행 코드

function a() {
  console.log("함수 a 입니다.");
  b();
}

function b() {
  console.log("함수 b 입니다.");
}

function c() {
  console.log("함수 c 입니다.");
  a();
  b();
}

c();

 

 

---

Solve

 

코드의 동작과정은 다음과 같다.

c.push -> console.log.push & pop -> a.push -> console.log.push & pop -> b.push -> console.log.push & pop -> b.pop ->  a.pop -> b.push -> console.log.push & pop -> b.pop -> c.pop -> 스택이 비어서 종료

 

추가적으로 메모리 힙에대해 간단히 정리하겠다.

- 메모리 힙은 동적으로 할당되는 메모리 공간이다.

- 메모리 힙은 객체, 배열, 함수 등의 데이터 구조와 데이터를 저장한다.

- 실행 컨텍스트는 변수 객체에 참조된 객체나 배열 등을 메모리 힙에 생성하고, 해당 변수 객체에는 해당 객체나 배열에 대한 참조를 저장한다.

- 메모리 힙은 실행 컨텍스트의 스코프 체인을 통해 변수 및 함수에 접근하는 데 사용된다.

- 메모리 힙은 가비지 컬렉터에 의해 관리되며, 더 이상 참조되지 않는 객체는 자동으로 해제된다.

---

What I Learned

글로쓰거나 읽었을 때 어려웠던 것이 직접 코드를 돌려보며 적어본 후 콘솔을 찍어 정답이 맞는지 확인하면서 이해했다.

자료를 읽어보고 정리한 후 그치는게 아닌 코드를 써보며 학습하는 방식을 이어나가보도록 해야겠다.

간단하게 호출 스택의 동작 과정에 대해서 이해 할 수 있었다.

이벤트 루프의 호출 스택에 대해 알게 되었고, 다음엔 웹 API, 콜백 큐 순서로 학습을 이어나가 이벤트 루프를 순서대로 할 생각이다.