callback 함수 사용

프로젝트를 하다 보면 callback 함수를 알게 모르게 사용하는 경우가 많이 있습니다.

 

제이쿼리 onClick 함수나 자바스크립트 setInterval 함수를 예로 들 수 있습니다.

 

하지만 제이쿼리나 자바스크립트가 기본적으로 제공하는 callback 함수가 아닌

 

직접 커스터마이징 한 callback 함수를 사용해야 할 때가 있습니다.

 

간단한 예를 보이겠습니다.

 

callback 함수 정의

 

위 함수를 설명하면 파라미터 2개를 받습니다.

 

첫 번째 파라미터 data는 사용자로부터 입력받는 정수 파라미터로 1을 더해 callback 함수에 파라미터(val1)로 전달합니다.

 

두 번째 파라미터 callback은 커스터마이징 한 callback 함수가 호출될 때 실행하는 함수를 치환한 파라미터입니다.

 

주석으로 1번, 2번 표시된 부분은 callback 함수를 호출하는 부분으로 자세한 설명은 뒤에서 하겠습니다.

 

그럼 이제 작성한 callback 함수가 제대로 작동되는지 확인하겠습니다.

 

callback 함수 호출

 

callback 함수 호출하는 부분을 보면

 

첫 번째 파라미터 1은 위에서 정의한 함수의 data 파라미터로

 

두 번째 파라미터 function 함수는 callback 파라미터로 치환돼서 실행되고 있습니다.

 

아까 생략했던 callback 함수 호출하는 부분을 이어서 설명하면

 

1번처럼 callback 함수를 호출하는 경우 첫 번째 파라미터로 this를 무조건 추가해야 합니다.

 

왜냐하면 call 함수의 첫 번째 파라미터는 디폴트로 호출한 객체를 가리키기 때문입니다.

 

그리고 그 뒤에 일반 파라미터를 추가하면 됩니다. 

 

반대로 2번처럼 호출하는 경우에는 this 생략이 가능합니다.

 

간단한 예제를 들어서 아직 callback 함수의 편리성을 모를 수 있지만

 

프로젝트를 수행하다 보면 ajax를 여러 번 호출하는 경우에

 

위와 같이 callback 함수를 사용하면 복잡한 기능을 비동기로 처리할 수 있습니다.