코어 자바스크립트 #05 (콜백함수)

콜백함수

콜백함수callback function : 다른 코드의 인자로 넘겨주는 함수

콜백함수는 제어권과 관련이 깊다. '부르다, 호출(실행)하다'의 의미인 call과 '되돌아오다, 되돌다'의 back의 합성어로 '되돌아 호출하라'는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 알려달라'는 요청을 함께 보내는 것. 이처럼 콜백 함수는 다른 코드 (함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 

제어권

• 호출 시점을 스스로 판단해서 실행 (setInterval)
• 인자로 넘겨줄 값들 및 그 순서가 정해져 있음 (map 메서드) 
• this : 콜백함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참고하게 된다.

콜백 함수는 함수다

당연한 소리처럼 들리겠지만 그 의미를 곰곰이 생각해볼 필요가 있다. 콜백함수로 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출된다. 

콜백 함수 내부의 this에 다른 값 바인딩하기

• bind 메서드를 이용하여 바인딩

콜백 지옥과 비동기 제어

콜백지옥callback hell : 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여 쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

동기 코드 : 현재 실행 중인 코드가 완료된 후에야 다음 코드를 실행하는 방식.

• CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드 (계산식이 복잡해서 CPU가 계산하는 데 시간이 많이 필요한 경우라 하더라도 동기 코드임)

비동기 코드 : 현재 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식.

• 사용자의 요청에 의해 특정 시간이 경과되기 전까지 어떤 함수의 실행을 보류(setTimeout)
• 사용자의 직접적인 개입이 있을 때 비로소 어떤 함수를 실행하도록 대기(addEventListener)
• 웹브라우저 자체가 아닌 별도의 대상에 무언가를 요청하고 그에 대한 응답이 왔을 때 비로소 어떤 함수를 실행하도록 대기(XMLHttpRequest)
• 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 비동기적 코드

※ 가독성 문제와 어색함을 동시에 해결하는 가장 간단한(?) 방법은? 익명의 콜백 함수를 모두 기명함수로 전환하는 것. 이 방식은 코드의 가독성을 높일뿐 아니라 함수 선언과 함수 호출만 구분할 수 있다면 위에서부터 아래로 순서대로 읽어 내려가는 데 어려움이 없다. 또한 변수를 최상단으로 끌어올림으로써 외부에 노출되게 됐지만 전체를 즉시 실행 함수 등으로 감싸면 간단히 해결된다. 

※ 비동기 작업의 동기적 표현

• Promise
• Generator
• promise + Async/await