콜백함수, 콜백지옥

Goal

1. 콜백함수 개념 이해하기
2. 콜백지옥에서 벗어날 수 있는 방법 알아보기

 

콜백함수란?

• 콜백함수란 간단하게 얘기하자면 코드가 완료되면 실행되는 부분이다
• 비동기로 처리되는 프로세스들은 콜백함수를 하나씩 가지고 있어서 Web API에서 실행된 비동기 함수들이 언제 끝났는지 알 수 있다
• Web API에서 끝난 비동기 함수들의 콜백함수들이 자바스크립트 엔진에서 실행되도록 이벤트 루프(event loop)가 하나씩 처리한다

 

콜백지옥이란?

• 콜백함수 안에
  • 콜백함수 안에
    • 콜백함수 안에
      • 콜백함수 안에 …
• 여러 콜백함수들이 괄호 안에 괄호 안에 괄호 안에 계속 들어가 있는 코드 형태를 콜백지옥이라고 한다
• 이런 경우 코드의 가독성도 떨어지고 실수 위험도 커진다

 

콜백지옥 대처 방법

Promise (ES6 버전부터)

• 비동기 함수들이 프로미스 객체를 반환하게 되는데 .then()을 이용해서 한 함수가 끝나면 그 결과물로 어떤 작업을 할지 알려주는 콜백을 넣어줄 수 있음
• .then()으로 이어줘서 비동기 함수들을 순차적으로 처리할 수 있음!
• 콜백지옥 보다는 좀 더 직관적임

Async/Await (ES7 버전부터)

• Promise로 작성한 코드들을 좀 더 간결하고 직관적이게 실행할 수 있음
• Promise로 정의한 함수 앞에 async를 쓰면 비동기 함수를 동기 작업처럼 작성할 수 있게 됨
• 실행하는 함수들 앞에 await을 쓰면 그 함수가 끝날때까지 그 다음으로 넘어가지 않음 (동기 함수인거처럼)
• 내부 동작은 비동기적 작업이지만 동기 코드인거처럼 쉽게 순차적으로 작성이 가능!