동기와 비동기
일반적으로 동기는 현재 실행 중인 택스크가 종료되고 다음 태스크가 대기하는 방식을 말하고 비동기는 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 실행하는 방식을 말한다. 때문에 동기는 순차적으로 작업이 진행되고 비동기는 실행순서가 보장되지 않지만 블로킹이 발생하지 않는다.
콜백이란?
콜백 함수는 다른 함수의 매개변수로 함수를 전달하고 어떠한 이벤트가 발생 한 후 매개변수로 전달한 함수가 다시 호출되는 것을 말하고 비동기 방식으로 처리된다.
! 비동기함수란 호출부에서 실행결과를 기다리지 않아도 되는 함수,
반대로 동기함수는 호출부에서 실행결과가 리턴할 때까지 기다려야 하는 함수
예를 들어 브라우저에서 어떤 로직이 동기함수만으로 실행될 경우라면
사용자는 기다려야하는 시간이 많아지기 때문에 부정적인 영향을 미칠 것이다. 비동기함수를 사용하면 로직을 순차적으로 처리하지 않고 병렬적으로 처리되기 때문에 동시 처리에 유리하다.
프로미스
비동기를 처리하는 콜백함수를 중첩해서 연속적으로 호출해야 하는 경우,
계속되는 들여쓰기 때문에 코드의 가독성이 떨어지는 일명 콜백헬! 이 나타난다. 이를 해결하기 위한 일종의 패턴이다.
함수를 호출하면 promise타입의 결과값이 리턴되고 이 결과값을 가지고 다음 수행 작업을 진행한다. 콜백을 연속적으로 나열하는 것보다 가독성이 좋지만 이 역시 .then() 메서드를 인자로 넘기는 콜백함수 내에서 조건문이이나 반복문을 사용하는 경우, 여러 개의 프로미스를 반복해서 호출하는 경우일 경우 가독성이 점점 떨어지게 된다.
async / await
프로미스의 이런 문제를 해결하고자 ES7에 추가된 키워드이다.
await 키워드를 사용하면 일반 비동기처럼 바로 실행이 다음 라인으로 넘어가는 것이 아니라 결과값을 얻을 수 있을 때까지 기다려준다.
async / await은 일반적인 동기코드 처리와 동일한 흐름(함수를 호출하고 결과값을 변수에 할당하는 식의)으로 코드를 작성할 수 있어 가독성이 좋다. 또 try / catch 문으로 동기, 비동기와 상관없이 에러처리를 일관되게 처리할 수 있다.
! async / await은 코드를 마치 동기식 코드처럼 보이게 해서 가독성이 좋다. 그리고 어떤면에서는 정말 동기적으로 행동한다.
async function timeTest() {
await timeoutPromise(3000);
await timeoutPromise(3000);
await timeoutPromise(3000);
}await 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행된다. — 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸린다.
함수 블럭에 여러 개의 await 키워드를 사용하면 각 await는 이전의 작업이 끝날 때까지 기다린다.
이는 promise가 완료되기 전 다음 await를 차단하기 때문인데
이것은 이어지는 promise에 의해 느려질 수 있다는 것을 의미한다.
이런 상황에서는 모든 Promise 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내 쓰는 방법으로 완화할 수 있다.
async function timeTest() {
const timeoutPromise1 = timeoutPromise(3000);
const timeoutPromise2 = timeoutPromise(3000);
const timeoutPromise3 = timeoutPromise(3000);
await timeoutPromise1;
await timeoutPromise2;
await timeoutPromise3;
}