콜백 함수

콜백 함수란?

콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 것입니다.
어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 거죠. 이 요청을 받은 함수X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출합니다.
이처럼 콜백 함수는 제어권과 깊은 관련이 있습니다.

제어권

호출 시점

즉정 시점이 되면 인자로 넘겨받은 콜백 함수를 실행합니다.

인자

콜백 함수에 들어가는 인자는 콜백함수로 부터 제어권을 넘겨받은 함수가 결정합니다.

this

콜백 함수로 부터 제어권을 넘겨받은 함수는 this를 바인딩할 수 있습니다.

함수로써 콜백 함수

콜백 함수에 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됩니다.
객체를 전달하여 메서드를 호출하는 것이 아니고 객체의 메서드자체를 함수로 전달합니다.

콜백 지옥과 비동기 제어

콜백 지옥

콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수전이 감당하기 힘들 정도로 깊어지는 현상으로, 자바스크립트에서 흔히 발생하는 문제입니다.
웹 애플리케이션이 대형화 대면서 웹에서 비동기 처리 로직이 점점 많아지고 있습니다. 이런 비동기처리를 함수로만 구성하면 함수안에 함수를 계속 작성해야 할 것 입니다. 결국에는 콜백 지옥에 빠지게 되는 것이죠.

비동기 제어

Promise

이러한 콜백 지옥을 해결하기 위해 ECMA2015(ES6)에서는 프로미스가 등장했습니다.
프로미스는 3가지의 상태로 비동기를 처리합니다. pending상테에서 resolve 상태가 되면 then으로 받아서 다음 로직을 수행합니다. 만약 reject 상태가 되면 catch로 받아서 다음 로직을 수행합니다. then과 catch의 체인으로 비동기를 처리하기 때문에 함수안에 함수를 작성하는 콜백 지옥을 해결합니다.

async/await

ECMA2017 부터는 프로미스를 더욱 간편하게 사용하고 비동기 처리 로직을 동기처럼 사용하기 위해 async/await가 등장했습니다.
비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 프로미스로 자동 전환하고, 해당 내용이 resolve 된 이후에야 다음으로 진행합니다. 프로미스의 then과 흡사한 효과를 얻을 수 있습니다.

Generator

비동기 처리를 하는 또 다른 방법은 제네레이터 함수를 사용하는 것입니다.
제네레이터 함수는 function* 처럼 function 키워드 뒤에 *를 붙여서 사용합니다. 제네레이터 함수안에 yield 키워드는 제네레이터가 next 될때 마다 실행됩니다.
의도적으로 next를 해주는 부분을 제외하면 async/await의 동작 방식과 흡사합니다.