[JS] 자바스크립트 동작 원리 (stack, queue, 동기, 비동기, 콜백함수)

 

다른 언어가 동작할때는 코드 윗줄부터 순서대로 작동하지만,

자바스크립트는 아닌 경우가 있다.

그래서 Stack과 Queue, 동기와 비동기, 콜백함수 등의 개념을 이해하고 있으면 도움이 된다.

 

---

 

Stack 과 Queue

stack은 쌓여있는 코드를 위에서부터 차례차례 실행하고, queue는 먼저 들어온 코드를 먼저 처리한다.

 

 

 

자바스크립트를 읽어올때 브라우저는 stack이라는 공간에 코드를 쌓아둔다.

윗 줄 부터 실행되기 시작하다가

도중에 시간이 필요한 코드를 만나게 되면 그 코드들은 Queue라는 공간으로 일단 보내놓고 바로 할 수 있는 다음 작업부터 실행한다.

 

console.log(1+1) // 첫번째 실행

setTimeout(function(){
  console.log(2+2)
}, 1000) // 시간 걸리는 코드니까 일단 Queue로 보내놓고

console.log(3+3) // 두번째 실행

// 1초가 지났고, stack에 있는 작업이 끝났으니까, queue에 보내놨던 코드 실행

 

Queue라는 대기실로 보내지는 코드들은 Ajax 요청 코드, 이벤트 리스너, setTimeout 같은 것들이다.

 

 

 

stack은 항상 바쁘기 때문에, queue에 있던 코드가 실행할 준비가 되었을때 정상적으로 실행되려면

stack이 비어있어야 한다.

 

그래서 stack에 오래 남아있을만한, 처리가 오래걸리는 코드가 들어있으면

queue에서 넘어올 타이밍이 된 코드들이 처리되지 못한채 계속 기다리게 되어 브라우저가 동작을 멈추게 된다.

 

setTimeout이 0초로 설정되어 있어도, 일단 setTimeout이기때문에 queue로 보내진다.

( 하지만 setTimeout을 0초로 설정해도, 설정 가능한 최소 시간인 4ms로 설정되어 동작한다.)

 

 

---

 

동기, 비동기, 콜백함수

 

결국 자바스크립트는 stack에 있는 코드를 한번에 한 줄씩 순서대로 처리하기 때문에 동기적 처리방식 언어라고 할 수 있다.

그리고 queue에 보내지는 부류의 코드들을 사용하는 경우 비동기 처리도 가능하다고 보면 된다.

 

동기 처리(synchronous) : 순서대로 작업하는 방식

비동기 처리(asynchronous) : 오래 걸리는 작업은 미뤄놓고, 바로 처리 가능한 작업부터 처리하는 방식

 

 

하지만 비동기 처리를 하는 코드가 있는 상황에서 코드를 순차적으로 처리하고 싶을때는?

그럴때 콜백 함수를 사용한다.

 

콜백함수 : 함수 안에 들어가있는 함수

 

function first(parameter) {
  console.log(1)
  parameter()
}

function second() {
  console.log(2)
}

first(second);

첫번째 함수에 파라미터 자리를 만들어놓고, 그 자리에 두번째 함수를 넣어 순서대로 실행되도록 했다.

하지만 순차적 실행을 위해 이 작업이 반복되면 중첩이 마구 일어나며 코드 가독성이 떨어진다.

(언젠가 콜백지옥 관련한 영상을 본적이 있는데 이런 이야기였나보다)

 

 

그래서 이런 경우를 위해 promise를 사용한다!

 

 

 

 

 

 

 

[ 참고글 ]

이 부분은 좀 더 경험이 쌓인 다음 다시 정리해보면 좋을 것 같다.

큐, 스택, 트리 | JavaScript로 만나는 세상

[Data Structure] Stack, Queue - in JS

JavaScript | 자바스크립트 작동 원리(Event Loop와 Call Stack, Web API, Callback Queue)