JS (ES6 & above) - 비동기란?

■ 왜 필요한가?

- 비동기적 통신 with server

- 어떤 작업의 완료 이후, 수행되어야 하는 작업을 stack에 예약하여 실행

...등등

 

 

■ 비동기 예시 - setTimeout

> setTimeout은 browser API

- stack에 function을 저장해놓고, 지정 시간(ms) 이후 실행

- callback으로 실행할 함수를 전달

console.log('1');

setTimeout(function(){  // setTimeout(() => {  arraow도 가능
  console.log('2');
}, 1000);  // 1초 뒤

console.log('3');

>>>
1
3
2

 

 

■ 콜백 함수의 종류

1) Synchronous callback

- 동기적 실행

- 바로 함수를 실행한다는 의미

console.log('1');

setTimeout(() => {
  console.log('2');
}, 1000);

console.log('3');


// Synchronous callback
// high order function with callback
// function declaration is hoisted!
function printImmediately(print){
  print();
}
printImmediately(()=> console.log('hello!'));
// () 익명 arrow 함수가 first class citizen으로 들어가고,
// high order function에 의해 수행이 동기적으로 됨

>>>
1
3
hello!
2

 

2) Aynchronous callback

- 비동기적 실행

// ... other code...

// Asynchronous callback
// 함수가 hoisting 됨
function printWithDelay(print, timeout){

  setTimeout(print, timeout); // stack에 예약
};
printWithDelay(()=>console.log('hello, delayed!'), 2000);

>>>
1
3
hello!
2
hello, delayed!

 

---

참조 :

www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11