자바스크립트의 비동기

console.log('start');

setTimeout(() => {
    console.log('Hello study :>');
}, 3000);

console.log('end');

• 비동기 처리에 대한 이해가 없는 상태에서 예상한 결과값

  /*
  
  start
  (3초 후) Hello study :>
  end
  
  */
  

• 실제 결과값

  /*
  
  start
  end
  (3초 후) Hello study :>
  
  */
  

callback 예시

const addSum = (a, b, callback) => {
    setTimeout(() => {
        if (typeof a !== 'number' || typeof b !== 'number') {
            return callback('a, b must be number!!');
        }
        callback(null, a + b);
    }, 3000);
}

let callback = (error, sum) => {
    if (error) return console.log({ error });
    console.log({ sum });
}

addSum(10, 20, callback);

Promise

• callback

  const addSum = (a, b, callback) => {
      setTimeout(() => {
          if (typeof a !== 'number' || typeof b !== 'number') {
              return callback('a, b must be number!!');
          }
          callback(null, a + b);
      }, 3000);
  }
  
  let callback = (error, sum) => {
      if (error) return console.log({ error });
      console.log({ sum });
  }
  
  addSum(10, 'nono', callback);
  

• promise

  const addSum = (a, b) => {
      return new **Promise**((**resolved**, **reject**) => {
          setTimeout(() => {
              if (typeof a !== 'number' || typeof b !== 'number') {
                  return reject('a, b must be number!!');
              }
              resolved(a + b);
          }, 3000);
      });
  }
  
  addSum(10, 20)
      .**then**((sum) => console.log({ sum }))
      .**catch**((error) => console.log({ error }));
  

callback과 비교하여 promise의 장점 👍🏻

1. 실수를 예방할 수 있다.
2. 코드 가독성 UP

Promise chain

• callback

  const addSum = (a, b, callback) => {
      setTimeout(() => {
          if (typeof a !== 'number' || typeof b !== 'number') {
              return callback('a, b must be number!!');
          }
          callback(null, a + b);
      }, 3000);
  }
  
  addSum(10, 20, (error1, **sum1**) => {
      if (error1) return console.log({ error1 });
      console.log({ sum1 });
  
      **addSum(sum1, 3, (error2, sum2) => { 🔥
          if (error2) return console.log({ error2 });
          console.log({ sum2 });
                      addSum(sum2, 3, (error3, sum3) => { 🔥
                  if (error2) return console.log({ error2 });
                  console.log({ sum2 });**
                           **addSum(sum1, 3, (error2, sum2) => { 🔥
                          if (error2) return console.log({ error2 });
                          console.log({ sum2 });
                      });
                 });
      });**
  });
  

• promise

  const addSum = (a, b) => {
      return new Promise((resolved, reject) => {
          setTimeout(() => {
              if (typeof a !== 'number' || typeof b !== 'number') {
                  reject('a, b must be number!!');
              }
              resolved(a + b);
          }, 3000);
      });
  }
  
  addSum(10, 20)
      .then(sum => addSum(sum, 3))
      **.then(sum => console.log({ sum })) // 33**
      .catch(error => console.log({ error }))
  

Async Await

const addSum = (a, b) => {
    return new Promise((resolved, reject) => {
        setTimeout(() => {
            if (typeof a !== 'number' || typeof b !== 'number') {
                reject('a, b must be number!!');
            }
            resolved(a + b);
        }, 3000);
    });
}

// promise
let sum1_, sum2_, sum3_; //불편하게 변수명을 지정해줘야함 😱

addSum(10, 20)
    .then(sum1 => {
        sum1_ = sum1
        addSum(sum1, 30)
    })
    .then(sum2 => addSum(sum2, 1))
    .then(sum3 => addSum(sum3, 1))
    .then(sum => console.log({ sum })) // 첫번째 sum을 불러오고 싶음
    .catch(error => console.log({ error }))

// async await
const addSum = async () => {
    let sum1 = await addSum(10, 20)
    let sum2 = await addSum(sum1, 20)
    console.log(sum1, sum2)
}

Async Await의 장점 👍🏻

1. 동기적 코드와 거의 유사하게 사용 가능
2. 변수 혹은 함수에 편하게 접근 가능

try catch를 사용하여 에러 잡아보기

// async await
const totalSum = **async** () => {
    **try** {
        let sum1 = await addSum(10, 20)
        let sum2 = await addSum(sum1, 20)
        console.log(sum1, sum2)
    **} catch (error) {**
        if (error) console.log({ error });
    }
}