04 콜백 함수 - by 코어 자바스크립트

아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로

 자세한 내용은 해당 서적을 확인 바랍니다. 

 

콜백 함수(callback function)는 다른 코드의 인자로 넘겨주는 함수이다.

콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다. 

 

콜백 함수는 제어권과 관련이 깊다.

 

어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 셈이다.

이 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출할게 된다.

이처럼 콜백 함수는 다른 코드(함수, 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.

콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것이다.

 

Array의 prototype에 담긴 map 메서드는 다음과 같은 구조로 이뤄져 있다.

Array.prototype.map(callback[, thisArg])
callback: function(currentValue, index, array)

 

위 currentValue, index, array는 컴퓨터가 첫번째 인자, 두번째 인자 대로 읽기 때문에 어떤 글자가 쓰여있던 상관 없다.

curr와 index가 바뀌어 쓰더라도 컴퓨터는 여전히 첫번째인자를 currentValue로 읽을 것이다.

 

map 메서드가 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지가 전적으로 map 메서드에 달린 것으로 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 가지게 된다.

 

콜백 지옥과 비동기 제어

 

콜백 지옥(Callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상으로, 자바스크립트에서 흔히 발생하는 문제이다. 주로 이벤트 처리나 서버 통신과 같이 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하곤 하는데, 가독성이 떨어질뿐더러 코드를 수정하기도 어렵다.

 

동기적인 코드는 현재 실행 중인 코드가 완료된 후에 다음 코드를 실행하는 방식이며, 비동기적 코드는 현재 실행 중인 코드의 완료 여부와 상관없이 즉시 다음코드로 넘어 가는것을 말한다. 보통 CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적인 코드이다.

 

• 사용자의 요청에 의해 특정 시간이 경과되기 까지 실행을 보류 (setTimeout)
• 사용자의 직접적인 개입이 있을 때 함수를 실행 (addEventListener)
• 웹브라우저 외에 별도의 대상에 무언가 요청하고, 그에 대한 응답이 왔을때 실행하도록 대기 (XMLTttpRequest)

 

 

별도의 요청, 실행대기, 보류 등과 관련된 코드 == 비동기적 코드.

 

현대의 JS는 웹의 복잡도가 높아진 만큼 비동기적 코드의 비중이 전보다 훨씬 높아진 상태이다. 그만큼 콜백 지옥에 빠지기도 훨씬 쉬워진 셈이나 마찬가지이다.

 

콜백 지옥 해결방법은 익명의 콜백 함수를 모두 기명함수로 전환하는 것이다.

 

Recap

 

1. 콜백 함수는 다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.
2. 제어권을 넘겨받은 코드는 다음과 같은 제어권을 가지게된다.

       1) 콜백 함수를 호출하는 시점을 스스로 판단해서 실행

       2) 콜백 함수를 호출할 때 인자로 넘겨줄 값들 및 그 순서가 정해져 있다. 이 순서를 따르지 않고 코드를 작성하면 엉뚱             한 결과를 얻게 된다.

       3) 콜백 함수의 this가 무엇을 바라보도록 할지가 정해져 있는 경우도 있는데, 정하지 않은 경우에는 전역객체를 바라               보며, 사용자 임의로 this를 바꾸고 싶을경우 bind메서드를 활용하면 된다.

       4) 어떤 함수에 인자로 메서드를 전달하더라도 이는 결국 함수로서 실행된다.

       5) 비동기 제어를 위해 콜백 함수를 사용하다보면 콜백 지옥에 빠지기 쉬우며, 최근 ECMAScript에서는 

           Promise, Generator, async/await 등 콜백 지옥에서 벗어날 수 있는 좋은 방법들이 등장했다.