[javascript] 비동기함수 setTimeout, 비동기 작업단위 Promise

동기는 동시에..

비동기는 안..동시에..?

 

매일 써도 헷갈리는 개념이라 기록해두려고 한다.

 

 

 

 

 

 

---

1. 동기 / 비동기 핵심 특징

동기

 > 동시에 여러 작업을 수행할 수 없다.

 > 흐름을 예측하기 쉽다. 먼저, 나중에 수행되는 것들이 명확하다.

 

비동기

 > 동시에 여러 작업을 수행할 수 있다.

 > 흐름을 예측하기 어렵다. 무엇이 먼저 완료될지 보장할 수 없다.

 

 

2. setTimeout

비동기로 동작하는 함수중 대표적인 예는 setTimeout 함수이다.

 setTimeout 함수는 아무일도 하지않고 기다리기만 하는 자바스크립트 함수중 하나이다.

function testFunc(param) {
	console.log(param);
}

setTimeout( testFunc(), 2000, 1 );
setTimeout( testFunc(), 1500, 2 );
setTimeout( testFunc(), 1000, 3 );

위의 결과는

> 3 2 1

 

이다.

 

 setTimeout 함수 자체는 즉시 실행되고 리턴된다. 즉 위 코드를 수행하는 순간 정보 요청을 모두 끝낸다는 뜻이다.

동작은 출력결과로 확인할 수 있듯 비동기로 동작한다고 볼 수 있다.

왜냐면 각 ms를 기다리기 시작할 때 다른 흐름에 영향을 주지 않고 독립적으로 동작하기 때문이다.

 

 

 

 

3. Promise ( + async )

 

Promise는 비동기 작업들을 쉽게 관리할 수 있는 비동기 작업의 단위이다.

async는 함수를 선언할 때 붙여줄 수 있다. new Promise(...) 를 리턴하는 함수를 async 함수로 변환할 수 있다.

 

 

같게 동작하는것을 Promise버전과 async 버전으로 바꾸어보자!

 

 

ver. new promise

function startAsync(age) {
  return new Promise((resolve) => {
    if (age > 20) resolve(`${age} return!`);
    else reject(new Error('error!'));
  });
}

 

ver. async

async function startAsync(age) {
  if (age > 20) return `${age} return!`;
  else throw new Error(`error!`);
}

 

이렇게 변환할 수 있으며,

then과 catch로 해당 함수를 수행해보면 사용하는 입장에서는 똑같이 동작하는것을 확인할 수 있다.

 

여기서 확인할 수 있는 중요 포인트는

async 함수의 리턴값은 무조건 Promise라는것!!

이말인 즉슨 {age} return! 이라는 문자열을 리턴했음에도 리턴값이 문자열이 아니라는것이다.

따라서 async 함수를 실행한 뒤 무조건 then 과 catch로 흐름을 제어해야 한다는것.

 

이때 등장하는 개념은 await이다.

 

 

 

---

 

 

 

내가 실제 현업에서 가장 많이 쓰고있는것중 하나라고 할 수 있는 Promise 자체는

엮인 개념도 많고 중요하고 깊은 개념이기에 차근차근 정리해보려 한다.