동기와 비동기

현채은·2023년 3월 20일

JavaScript 동기 비동기

동기 , 비동기를 학습하면서 어느정도 개념은 이해가 되는데
코드로 구현하려니 막히는 느낌이 들어서 다시한번 개념 정리 해두고 간단한 예제코드를 기록해두어야겠다 !!

고양이랑 누워있고 싶은 나..(?)

🔮 동기( synchronous )

동기란?
: 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음코드를 수행하는 것

ex > ( 사장님 혼자 일하는 ) 💁🏻‍♂️카페에서 음료를 주문받음(1s) ➡️ 💁🏻‍♂️ 주문 받은 음료 제조 (1s) ➡️ 💁🏻‍♂️ 음료 전달(1s) ➡️ 💁🏻‍♂️ 다시 주문받음(1s)
다음 주문을 받기까지 걸린 시간 = 4s
주문을 받으면 주문받은 음료를 제조하는 동안은 다른 음료주문을 받을 수 없다. ( 동기 )

🔮 비동기 ( asynchronous )

비동기란 ?
: 특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드들을 수행하는 것
①. 실행 시점에 도달하면 동기코드는 실행 , 비동기 콜백 코드는 환경 ( WebAPI등 ) 으로 넘겨줌
②. 자바스크립트의 실행환경 ➡️ 멀티스레드 ⭐️
③. 작업을 마친 ( 일정시간이 지난 ) 코드들은 테스크큐( task queue )로 진입
④. 이벤트 루프( event loop) 는 테스크큐에서 받은 코드가 도착하는 대로 자바스크립트 싱글스레드에 올려줌

ex > ( 알바생 + 사장님이 함께 일하는 ) 💁🏻‍♂️ 카페에서 음료주문을 받음 ( 1s )
➡️ 🙋🏻‍♀️ 알바생 : 주문받은 음료를 제조ing + 💁🏻‍♂️ 사장님 : 다음손님 음료 주문을 받음 ( 1s )
➡️ 🙋🏻‍♀️ 알바생 : 제조한 음료 전달 후 다음주문 음료 제조 ... ( 비동기 ) ( 1s )
다음 주문을 받기까지 걸린 시간 = 2s
한명이 일할 때 보다 여러명씩 ( 여러 차선에서 ) 일을 하면 더 효율적으로 빠르게 일처리가 가능함 ! ⭐️

🧐 Javasript는 원래 싱글 스레드언어 아닌가요 ?

YES!!!!
➡️ 동기적으로 작동하는 것이지만, 자바스크립트가 작동하는 환경 ( 런타임 Web API) 에서 비동기처리를 도와주기 때문에 특별한 작업 필요없이 비동기처리가 가능한 것 ❗️❗️
➡️ JavaScript 자체 즉 JavaScript 엔진은 비동기 함수가 없다는 것을 꼭 명심 ⭐️

🔮 타이머 관련 API

API : 해당 브라우저에서 제공하는 Web API 이며, 비동기로 작동하도록 구성되어 있음
➡️ 자바스크립트에서 그렇게 정함 (반박 ㄴㄴ)

⏳ setTimeout(callback, millisecond)

일정시간 후에 함수를 실행
매개변수
- 실행할 callback 함수
- 콜백함수 실행 전 기다리는 시간 ( 1000millisecond = 1 s )
return 값 : 임의의 타이머 ID

➡️ return 값 : 22694 ( 임의의 타이머 ID )

⏳ clearTimeout(timerId)

setTimeout 타이머를 종료
매개변수 : 타이머 ID
return값 : X

➡️ 5초가 되기 전 clearTimeout( timer )을 실행하면 setTimeout이 종료됨

⏳ setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적 실행
매개변수
- callback : 실행할 콜백함수
- millisecond: 반복적으로 함수를 실행시키기 위한 시간 간격
return 값 : 임의의 타이머 ID

➡️ 멈춰주지 않으면 계속 늘어난다..
const로 값에 함수 할당해주지 않았을 때는 어떻게 멈춰야 하는지 모르겠다 .. 😂
📌 임의의 ID가 뜨기 때문에 매개변수에 해당 ID를 넣어주면 된다 !!