[JS] 동작원리(Stack,Queue,event loop)

JavaScript 동작원리에 대해서 정리하고 조금 더 clean 코드를 작성 하고 싶어서 글을 작성합니다.

동기적(Synchronous) vs 비동기적(Asynchronous)

Synchronous👌

• JS는 동기적으로 처리
• JS는 싱글쓰레드로 동작
• 한번에 한줄 순서대로 실행
• LIFO(last in first out) 순서로 진행한다.

Asynchronous👏

• JS는 비동기 처리도 가능하다.
• setTimeout, event listener, ajax 등

console.log('result : ', 1+1);
console.log('result : ', 2+2); 

result : 2
result : 4 

위 코드와 같이 콘솔을 실행 시키면 LIFO 순서대로 진행 하게 된다. Stack을 보면 왜 JS가 동기적이고 싱글쓰레드인지 그리고 한줄 순대로 진행 되는지 알 수 있다.

이번에는 setTimout이 포함 되었을 때 어떻게 진행 되는지 알아보자

console.log('result : ', 1+1);
setTimout(function(){
  console.log('result :', 5+5);
},1000);
console.log('result : ', 2+2); 

result : 2
result : 4 
result : 10;

위 그림과 같이 1~3번 순서로 실행되게 된다. 그러나 setTimeout은 1초 delay가 있기 때문에 곧 바로 화면에 노출되지 않고 Queue로 옮겨져서 대기를 하게된다. Queue는 FIFO(first in first out)이다. 그리고 중요한거는 Stack이 다 비워졌을때 Queue에서 대기하던 순서대로 Stack으로 이동해서 실행이 되는 것이다.

비동기 처리 Promise를 사용해도 위와 같은 프로세스로 진행 된다

console.log(1+1);

function add(){
    return new Promise(function(resolve, reject){
    resolve(4);
    
    });
};

console.log(2+5);

add().then(function(data){
    console.log(data);
});

결과 :

reference : 애플코딩(youtube)👍