JS #3 :: 콜백(Callback)과 프로미스(Promise), 그리고 async/await

🙊 잘못 기재한 부분이 있다면 댓글로 남겨주세요!

첫 숙제를 하던 때에 콜백이라는 개념이 나왔는데 단기간에 잠깐 들은 설명으로는 이해에 무리가 있어서 따로 찾아서 정리한다. 이해를 하기 전까지는 콜백함수라는 특정한 어떤 매커니즘의 함수가 있는 줄 알았다...

💻콜백(Callback)

콜백 함수는 다른 함수의 인자에서 액세스할 수 있으며,첫 번째 함수가 완료되면 그 이후 특정 이벤트에 의해 호출되는 함수를 말한다.

A callback function is a function which is:

• passed as an argument to another function, and,
• is invoked after some kind of event.
  출처 : stackoverflow - What is a callback function?

간단히 말해서 나중에 호출할 함수를 총칭해서 부르는 함수이다.
콜백 함수는 다른 함수에 넘기거나 객체의 프로퍼티로 사용하며, 배열에 넣어서 쓸 때도 있다.
항상 그런건 아니지만 보통은 익명의 함수로 사용한다.

여기서 중요한 것은 콜백 함수가 실행되는 시점인데, 콜백 함수의 실행 시점은 parameter로 사용한 원래 함수가 끝난 시점이다.

콜백은 자바스크립트에서 가장 오래된 비동기적인 메커니즘이라고 하는데 비동기는 뭘 뜻하는 걸까?

💻동기적 vs 비동기적

동기적 프로그래밍은 이전 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 프로그래밍이다. 즉, 시간이 얼마나 걸리든 순서대로 한 줄 씩 코드를 실행하는 것이다.

비동기적 프로그래밍은 동기적인 프로그래밍과 다르게 이전 작업이 끝날 때까지 기다리지 않고 실행 명령을 내린 후 다음 작업을 실행한다. 따라서 우리가 작성하는 코드와 실행되는 코드의 순서가 다를 수 있다는 뜻이다.
setTimeout()함수는 가장 대표적으로 사용되는 비동기적인 메소드이다.
또한 스크립트나 모듈을 로딩하는 것 또한 비동기 동작이라고 할 수 있다.

💻프로미스 (Promise)

프로미스는 자바스크립트의 비동기 처리에 사용되는 객체로, 콜백의 단점을 해결하려는 시도에서 만들어졌다. 프로미스가 반드시 콜백을 대체하는 것은 아니나 콜백을 예측 가능한 패턴으로 사용할 수 있게 해주고, 콜백만 사용했을 때 나타날 수 있는 현상이나 버그의 상당수를 해결해준다.

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하며, 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용한다.

프로미스 기반 비동기적 함수를 호출하면 그 함수는 프로미스 인스턴스를 반환한다.
프로미스는 성공(fulfiled)하거나 실패(rejected)하고, 프로미스가 성공하거나 실패하면 그 프로미스를 결정됐다(settled)고 한다.

💻async와 await

async와 await는 자바스크립트의 비동기 처리 패턴 중에서 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완한다.

이 함수는 비동기 함수 앞에 aync 나 await 키워드를 추가하여 완성된다.

async function hello() { return "Hello" };
hello();

코드는 프로미스를 반환하며, 성공한 프로미스(fulfile promise)가 반환되므로 .then() 블럭을 사용해서 받는다.

hello().then(console.log)

async를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 한다.
또한 동기식 함수는 await 사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다.

이 함수를 await과 함께 사용할 수 있다.

async function hello() {
  return greeting = await Promise.resolve("Hello");
};

hello().then(alert);

참고자료

• 러닝 자바스크립트: ES6로 제대로 입문하는 모던 자바스크립트 웹 개발
• 생활코딩- 콜백(callback) 함수
• 생활코딩- Node.js - 동기와 비동기 그리고 콜백
  
• 모던 JavaScript 튜토리얼
• 코드라떼 - 스레드는 종잡을 수 없다