저번 글 “(5) 자바스크립트는 동기적으로 작동할까? 비동기적으로 작동할까?”을 간단히 복습하자면 다음과 같다.

자바스크립트는 기본적으로 스크립트 위에서 아래로 읽어가며 동기적으로 작동하지만,
브라우저에서 주로 사용되는 언어적 특성 상 브라우저 사용자 사용성을 위해

이미지, API 등 모든 것을 로딩 하기 전 우선적으로 로딩된 것들을 보여주기 위해 비동기적으로 사용하는 경우가 많다.

자바스크립트를 비동기적으로 잘 작동하도록 제어(?)하는 방법으로는 콜백(callback), 프로미스(promise), async/await 등이 있다.
(“제어”라고 표현한 부분이 적합할 지는 모르겠지만, 코드가 의도한대로 작동하도록 하기 위해 사용하기 때문에 “제어”라고 표현해보았다.)

이번 시간에는 콜백, 프로미스(promise), async/await에 대해 학습해보고자 한다.

콜백(Callback)

콜백 함수는 나중에 호출할 함수를 의미하며, 비동기 동작에서 순차적으로 실행시키기 위해 사용한다.

비동기 동작에 대해 잘 모르고 실수한 코드

// GET 요청으로 title 데이터를 가져오고 반환하는 메서드
const getTitle = () => {
    $.ajax({
        types: "GET",
				// fake api를 제공하는 플랫폼인 {JSON} Placeholder
        url: "https://jsonplaceholder.typicode.com/posts/1",
    }).then((data) => {
        return data.title
    })
}

// title 데이터를 localStorage에 저장하는 메서드
const setTitle = (title) => {
    localStorage.setItem('title', title);
}

const title = getTitle();
setTitle(title);

jQuery의 API 요청을 위한 ajax 함수는 대표적으로 비동기 동작하는 함수이다.

따라서 getTitle()함수에서 API를 통해 데이터가 도착하기 전에

setTitle() 함수가 실행되어 결과적으로 localStorage에 undefined가 저장되었다.

이를 콜백(Callback)을 통해 해결하면 어떻게 하면 될까?

// GET 요청으로 title 데이터를 가져오고 반환하는 메서드
// 파라미터로 callback 함수를 받아서 ajax 요청이 끝났을 때 (then 절이 실행되었을 때)
// callback 함수를 실행시킨다.
const getTitle = (callback) => {
    $.ajax({
        types: "GET",
				// fake api를 제공하는 플랫폼인 {JSON} Placeholder
        url: "https://jsonplaceholder.typicode.com/posts/1",
    }).then((data) => {
				callback(data.title);
    })
}

// title 데이터를 localStorage에 저장하는 메서드
const setTitle = (title) => {
    localStorage.setItem('title', title);
}

// 콜백함수인 setTitle을 파라미터로 넘긴다.
getTitle(setTitle);

자바스크립트의 콜백지옥

콜백 함수를 통해 getTitle() → setTitle() 순서로 동작하도록 코드를 작성하였다.

만약, getTitle() → setTitle() → changeBrowserTitle() → ….. 이와 같이 여러 함수를 순차적으로 동작하도록 코드를 작성하고 싶으면 어떻게 될까?

// GET 요청으로 title 데이터를 가져오고 반환하는 메서드
// 파라미터로 callback 함수를 받아서 ajax 요청이 끝났을 때 (then 절이 실행되었을 때)
// callback 함수를 실행시킨다.
const getTitle = (callback) => {
    $.ajax({
        types: "GET",
				// fake api를 제공하는 플랫폼인 {JSON} Placeholder
        url: "https://jsonplaceholder.typicode.com/posts/1",
    }).then((data) => {
				callback(data.title);
    })
}

// title 데이터를 localStorage에 저장하는 메서드
const setTitle = (title, callback) => {
    localStorage.setItem('title', title);
		callback();
}

// 순차적으로 진행되어야 할 메서드
const changeBrowserTitle = (callback) => {
		callback();
}

// 각각의 콜백함수를 파라미터로 넘긴다.
getTitle(setTitle(changeBrowserTitle(...)));

이렇게 콜백 함수 안에 콜백을 중첩되도록 코드를 작성하면 점점 코드가 복잡해지고 읽기 어려워 지는데, 이를 “콜백 지옥”이라고 표현한다.

이를 해결하기 위한 방법으로 Promise 객체 또는 async/await 를 사용하는 방법이 있다.

Promise 객체

Promise 객체는 비동기 작업의 결과를 나타내며, 다음과 같은 세 가지 상태를 가진다.

• 대기 중 (Pending): 비동기 작업이 아직 수행되지 않은 상태
• 이행됨 (Fulfilled): 비동기 작업이 성공적으로 수행된 상태
• 거부됨 (Rejected): 비동기 작업이 실패한 상태

Promise 객체는 다음과 같이 사용할 수 있다.

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 성공 시 resolve() 호출, 실패 시 reject() 호출
});

promise.then(() => {
  // 성공 시 실행할 코드
}).catch(() => {
  // 실패 시 실행할 코드
}).finally(() => {
	// 성공 또는 실패 결과가 나오고 결과에 상관없이 실행할 코드
});

Promise 체이닝

콜백 지옥과 같은 상황을 가정했을 때 Promise 객체로 해결하는 방법은 다음과 같다.

promise
	.then((result) => {
	  // 성공 첫번째로 실행할 코드
	}).then((result) => {
	  // 성공 두번째로 실행할 코드
	}).then((result) => {
		// 성공 세번째로 실행할 코드
	}).catch((error) => {
		// 위 then 절 중 하나라도 거부되면 에러를 잡는 코드
	});

각각의 then 절에서 실행한 결과를 result 라는 파라미터로 받아 순차적으로 처리할 수 있다.

프라미스 executor와 프라미스 핸들러 코드 주위엔 '보이지 않는(암시적) try..catch가 있는데 예외가 발생했을 때 에러를 잡을 코드가 필요하다.

체인의 마지막 catch 절에서 이와 비슷한 역할을 한다.

에러 처리 구문이 없다면?

에러 처리 구문이 없다면 스크립트가 죽고, 자바스크립트 엔진은 프라미스 거부를 추적하다가 전역 에러를 생성한다. (에러처리 구문은 앞으로 꼭 붙이는걸로!)

만약 하나의 함수에 Promise 객체와 일반 함수가 같이 존재한다면 순서는?

function func() {
	let promise = Promise.resolve();

	promise.then(() => alert("프라미스 성공!"));

	alert("코드 종료");
}

func();

위와 같은 코드가 존재한다고 했을 때 promise 구문은 바로 처리가 가능하기 때문에 코드가 위에서 아래로 순서대로 진행될 것이라 생각할 수 있지만, 먼저 뜨는 alert 메시지는 “코드 종료”이다.

그 이유는 전 포스트의 마지막 이미지와 함께 설명하려고 한다.

만약 setTimeout 함수의 시간에 해당하는 인자가 0이라고 하더라도 “시작” → “끝” → “동작” 순으로 출력이 된다.

자바스크립트 엔진 동작 순서에 의해 setTimeout, Promise 객체 코드 등 비동기 동작을 하는 함수는 무조건

• 백그라운드로 이동하여 작업이 끝날 때 까지 대기
• → 콜백 큐(Callback Queue)(태스크 큐(Task Queue) 또는 마이크로태스크 큐(Microtask Queue))로 이동
• → 이벤트 루프를 통해 호출 스택이 비어있을 경우 호출 스택으로 이동
• → 실행

의 과정을 거친다.

따라서 원래 예시로 돌아와 alert(”코드 종료”) 의 경우 바로 호출스택에서 실행되어 버리기 때문에 더 우선적으로 실행되는 것이다.

async/await 구문

async/await 구문은 Promise 객체를 더욱 쉽게 사용할 수 있도록 도와준다.

async 함수는 Promise 객체를 반환하며, await 구문은 Promise 객체가 이행될 때까지 코드의 실행을 일시 중지한다.

function 앞에 async 를 붙이고, 처리가 완료되길 바라는 함수 앞 await 를 붙이면 async/await 구문이 된다.

async function myFunction() {
  try {
    const result = await promise; // promise 객체가 이행될 때까지 대기
    // result를 이용한 작업 수행
  } catch (error) {
    // 에러 처리
  }
}

async/await 구문을 사용하면 Promise 객체를 더욱 쉽게 다룰 수 있으며, 코드의 가독성을 높일 수 있습니다.

에러 처리

await/async 구문은 위 예시코드처럼 try…catch 문을 사용하여 에러를 처리한다.

출처

velog - Javascript는 동기일까? 비동기일까?
velog - 비동기 처리와 callback 함수
javascript info - 프라미스와 async, await
개인블로그 - 자바스크립트 Promise 쉽게 이해하기