Single Thread - 코드종🔔님:)

*🔐Study Keyword :

자바스크립트의 🔑single thread의 특징을 🔑setTimeout 함수의 실행과정을 통해 살펴보자이자이자식아!

• 자바스크립트의 🔑setTimeout 함수는 우리가 요청한 시간에 콜백함수를 실행하는 것을 보장 하지 못한다.

=> 이는 자바스크립트의 특징 중 하나인 🔑single thread와 밀접한 관련이 있다.
=> 🔑single thread의 특징을 이해하면 자바스크립트의 동작 원리를 이해하는 시작점이 되니 잘 알아두자!

<script>
function yo(){  
  setTimeout(function(){
    console.log('1.5초 타이머 끝!')
  }, 1500);
  for(let i=0;i<3;i++){
    doSomething(); // 1초 정도 걸리는 함수라 가정
    console.log(i) 
  }
  console.log('3초 걸리는 for문 끝!')
}
yo();
console.log('main 끝!')
</script>

• 우선 다음 함수의 예상되는 과정을 적어보자.

1. 함수 yo라는 function 있어 이 함수를 호출한다.
2. 함수 yo는 1.5초 뒤에 콘솔 로그 '1.5 초 타이머 끝!'을 찍는 함수를 실행하라고 타이머를 걸어두었다.
3. setTimeout를 호출을 끝내면 for문을 3번 도는데doSomething(1초 시간이 걸리는) 임의의 함수 호출과 콘솔로그에 몇 번째 일 돌았는지 i로 표시되는 과정을 3번을 돌기 위해선 총 3초가 필요하다.
4. 이후 모든 for문을 빠져나가면 콘솔에 '3초
   걸리는 for문을 끝났다!'라는 로고를 찍는다.
5. yo함수 호출을 모두 마치면 마지막으로 '메인 끝'이라고 콘솔을 찍는다.

• Q. yo 함수를 호출하고 나서 몇 초 뒤에
  타이머 함수에 콜백 함수의 콘솔 내용인 '1.5 초 타이머 끝!'이 찍힐까🤷‍?♂️
• A. 1.5초라고 생각 할 지도 모르지만 🙅‍♀️
  정답은 약 3초 뒤에 실행이 된다.🙆‍

• 그 이유는 🔑single thread에서 발생하는 과정으로 자바스크립트의 Queue에서 코드를 하나씩 꺼내
  🔑single thread에 해당하는 하나의 Call Stack에서 하나씩 코드를 처리하는 과정 때문에 이러한 현상이 발생한다.

-WHAT IS❓

Queue

• 자바스크립트엔 Queue가 있는데 일종의 할 일들을 모아 놓은 것이다.
  EX> Queue엔 main 함수, 사용자가 클릭 시 클릭에 해당되는 이벤트 핸들러 같은 함수가 쌓인다.

Event Loop & Call Stack

• 자바스크립트 엔진, Event Loop가 이 Queue를 계속 확인하여 이 안에서 하나씩 코드를 꺼내 Call Stack으로 보내 실행을 시킨다.
• 이처럼 Call Stack은 Queue에 들어있는 함수(코드)를 꺼내어 Call Stack으로 보내 실행시킨다.**
• 이후 실행이 완료되면 함수를 버리고 다시 다음 함수를 Queue에서 꺼내서 Call Stack으로 보내 실행하는 과정을 반복한다.
  EX> Call Stack 보낸 1> click에서 또 다른 함수를 실행하면 click 위에 2>함수가 쌓이고 그 함수 내부에서 콘솔로그 찍으면 함수 바로 위에 3>콘솔로그 함수가 쌓인다.
  이후 실행 순서는 가장 상단의 3>콘솔로그를 실행하여 리턴한 뒤 빠지게되고 2>함수를 리턴해서 빠진 뒤 1>click 리턴한 뒤 빠지게 되면 비어있는 Call Stack으로 돌아간다.
• 이후 Event Loop는 Queue에 무슨 일이 일어날 때까지 계속 확인을 한다.

• 이제 다음의 🔑single thread이므로 발생하는 실제 코드 과정을 살펴보자.

<script>
//1. main 함수는 queue에서 call stack으로 이동
function yo(){ //2. yo 함수는 main 함수 상단으로 올라감 (call stack)
  setTimoust(function(){ // 3. setTiemout 함수: 외부 대기함
    console.log('1.5초 타이머 끝!')
  }, 1500);
  for(let i=0;i<3;i++){ // 4, 5. doSomething 호출과 콘솔 로그 반복
   /** 
   4. for문 내부 doSomething () 함수는
   yo함수 상단으로 이동(call stack)
    doSomething();
   5. console.log(i) 함수는 doSomething 리턴되면 yo 함수 상단으로 이동(call stack)
   ** //
    console.log(i) 
  }
  console.log('3초 걸리는 for문 끝!')
}
yo();
console.log('main 끝!')
</script>

• 1. 가장 먼저 1>Queue에 main 함수가 들어가고 main 함수를 실행을 위해 쌓아두는 2>Call Stack에 집어넣는다.
• 2. main 함수에서 실행된 yo 함수가 main 함수 상단으로 2>call stack에 올라간다.
• 3. setTiemout 함수는 외부, (환경에 따른 호스트 객체인 Web API) 즉 브라우저에서 있는 함수로 외부 함수 setTiemout에게 function을 넘겨주면서 1.5 초뒤에 콘솔을 실행하라고 알려준다.
• 4. for 문을 돌며 doSomething() 함수가 실행되어 1초가 지나가고 이후 콘솔로그에 i를 찍는 과정을 반복한다.
• 5. 2>call stack에서 일하는 동안(반복문 실행) 1.5초가 지나면 때 setTiemout 함수를 Queue에 넣고 이후 setTiemout 함수는 Call Stack이 실행을 마칠 때까지 대기 상태에 머문다.
• 6. for 문의 함수 호출(// 3초 경과 후)과 횟수를 담은 콘솔이 모두 찍히는 리턴을 반복한 뒤(// 0,1,2) Call Stack 상단에서 빠져 for 문을 빠져나오면 ('3초 걸리는 for문 끝!) 로그가 실행된 뒤 리턴되며 Call Stack에서 제거된다.
• 7. 이후 Call Stack에 남아있는 마지막 main 함수에서('main 끝!') 로그가 찍히면서 main 함수가 종료되면서 Call Stack이 빈 상태가 된다.
• 8. 이제서야 Queue에 있던 setTiemout 함수를 Call Stack으로 옮겨 실행하며 마지막으로 ('1.5초 타이머 끝!')로그를 찍은 뒤 리턴되며 Call Stack에서 제거된다.

*💡conclusion

• Call Stack은 하나이기에 하던 일을 멈추지 못한다.
• 자바스크립트의 타이머 함수는 Call Stack이 실행(일하는)되는 동안 지정 딜레이 시간 뒤에 Queue에 타이머로 넘겨줄 함수를 넣.어.줄.뿐.이.다.
  -Call Stack이 하던 일을 모두 마쳐(코드의 실행이 완료) Call Stack 내부가 비어져있어야 Queue에 대기하던 타이머가 Call Stack으로 올라가 실행 될 수 있다

#📑Study Source

1. 코드종님 - https://www.youtube.com/watch?v=iNH4UQxZexs