2. JavaScript Syntax 2.md

1. Async

자바스크립트는 비동기로 작동하므로 시간이 걸리는 함수들을 기다려주지 않는다.

// 동기
setTimeout(() => {
    console.log('Timer is Done!');
}, 2000); 

// 비동기
console.log('Hello!');
console.log('H!');

비동기 함수를 컨트롤 하는 방법

1. 콜백 함수 콜백 지옥에 빠질 수 있으니 생략

   • 다른 함수의 인자로써 이용되는 함수

   • 간단히 말하자면 "called at the back" of the other function. 즉, 나중에 호출 되는 함수

   const fetchData = callback => {
       setTimeout(() => {
           callback('Done!');
       }, 1500);
   };
   
   setTimeout(() => {
       console.log('Timer is done!');
       fetchData(text => {
           console.log(text);
       })
   }, 2000);
   
   console.log('1 : Hello!');
   console.log('2 : Hi!')

2. Promise

   const fetchData = () => {
       const promise = new Promise((resolve, reject) => {
           setTimeout(() => {
               resolve('Done!');
           }, 1500);
       });
       return promise;
   };
   
   setTimeout(() => {
       console.log('Timer is done!');
       fetchData().
       then(text => {
           console.log(text);
           return fetchData();
       })
       .then(text2 => {
           console.log(text2);
       })
   }, 2000);
   
   console.log('1 : Hello!');
   console.log('2 : Hi!')