자바스크립트의 동작 원리

자바스크립의 동작 원리는 무엇일깡?

먼저 저는 이론을 좋아하지 않기때문에 예제를 들면서 보겠습니다.

console.log(1)

setTimeout(()=>{
    console.log(2)
}, 2000)

console.log(3)

자 이렇게 작성을 하면, 어떻게 결과가 나올 것 같나요?

1 다음 3 나오고 2초 뒤에 2가 나오게 됩니다

이걸 이해하려면 자바스크립트의 동작원리에 대해 이해해야합니다요

자 이걸 보면서 봐보자구용

먼저 내가 요청한 코드가 위에서 적은 코드라고 생각하고..

자바스크립트는 하나의 Stack 밖에 없서요

이때 Stack 이 멍미? 하시겠죠?

자바스크립트 코드가 실행되면 스택 프레임이 쌓이는 장소
스택에 새로운 코드(프레임)이 들어오고 실행이 완료되면 나간다.
처음에 들어간 것이 제일 마지막에 나갑니다.
쓰레드(Thread)라고도 불린다.
자바스크립트는 싱글(1개)쓰레드밖에 없다.
쓰레드가 1개이면 하나씩 밖에 일을 처리하지못해서 동기적으로 일을 처리한다.

먼저 console.log(1) 이 들어가고, 완료가 되면 나갑니다.

두번째 setTimeout 코드는 들어갔는데 2초를 기다려야하니까 옆에 대기실 (web api)로 이동하게 됩니다.

왜냐 이거 2초 기다려주면서, 뒤에 코드 실행 못하게할 순 없어서!

그래서 대기실로 이동해지면서, console.log(3)이 실행이 됩니다. 역시나 또 완료가 되니 나갑니다.

그 사이에 setTimeout 요놈은 밑에 큐(Queue)로 이동하게 됩니다.

큐(Queue)

웹 api 로 부터 받은 테스크를 큐에 저장해둔다.
스택이 비면 이벤트 루프가 큐에 아이템을 꺼내다 스택으로 올린다.
이벤트 루프 (Event Loop)란?
스택과 큐 사이에서 흐름을 제어하는 아이
이벤트 루프는 스택이 비어있는지 확인하고 비어있으면 큐에 있는 아이템을 꺼내 스택으로 올려줍니다.

큐는 스택(Stack)에 자리가 생기면 코드를 꺼내다가 스택으로 올려줍니다요.

이런식으로 자바스크립트는 동작을 하고 있어요! 그래서 결과가 1, 3, 2 이렇게 나오게 된겁니당.

• 웹 api 란?
  Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말함.
  • setTimeout(함수,시간) : 시간만큼 코드를 딜레이시키고 함수를 실행한다. 시간은 참고로 마이크로세컨드 (ms) 단위이기 때문에 1초 기준 1000ms 이다.
  • Ajax, Axios, fetch : 클라이언트와 서버간에 데이터를 주고 받는 기술
  • Event Handler : 클릭과 같은 이벤트를 핸들하는 함수들