JS 심화_02 (Callback Function, 콜백 함수)

Callback Function (콜백 함수) & Promise

• 다른 함수에 인자로 전달된 함수
• 외부 함수 내에서 호출되어 일종의 루틴 또는 작업을 완료함
• 동기식, 비동기식 모두 사용됨
• 비동기 작업이 완료된 후 코드 실행을 계속하는데 사용되는 경우 비동기 콜백이라고 함

• JS의 함수는 "일급 객체"

  • 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체(함수)

  • 일급 객체의 조건

    • 인자로 넘길 수 있어야 함
    • 함수의 반환 값으로 사용할 수 있어야 함
    • 변수에 할당할 수 있어야 함

• Async callbacks (비동기 콜백)로 활용

  • 백그라운드에서 코드 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
  • 백그라운드 코드 실행이 끝나면 콜백 함수를 호출하여 작업이 완료되었음을 알리거나, 다음 작업을 실행하게 할 수 있음

Why use Callback?

• 콜백 함수는 명시적인 호출이 아닌 특정 routine 혹은 action에 의해 호출되는 함수

• event의 경우 "특정 이벤트가 발생하면" 이라는 조건 하에서 함수를 호출할 수 있었던 건 'Callback Function' 메커니즘이 있기 때문에 가능

• 비동기 로직을 수행할 때 콜백 함수는 필수

  • 명시적인 호출이 아닌 특정 시점에 '알아서' 호출되도록 만들어야 하기 때문
  • 기다려주지 않고 언젠가 처리해야 하는 일은 콜백 함수를 활용

Callback Hell

ref : http://callbackhell.com/

• 순차적인 연쇄 비동기 작업을 처리하기 위해 콜백 함수를 호출하고, 그 다음 콜백함수를 호출하고, 또 그 다음 함수의 콜백 함수를 호출하고... 의 패턴이 지속적으로 반복됨

• 즉, 여러개의 연쇄 비동기 작업을 할 때 마주하는 상황

• 이를 Callback Hell (콜백 지옥) 혹은 pyramid of doom (파멸의 피라미드)라 함

  • 위와 같은 상황이 벌어질 경우에 디버깅, 코드 가독성에 있어 매우 비효율적

Callback Hell 해결하기

1. Keep your code shallow (코드의 깊이를 얕게 유지)
2. Modularize (모듈화)
3. Handle every single error (모든 단일 오류 처리)
4. Promise way (Promise 방식 사용)