[Javascript Pattern] Callback pattern

Callback pattern

 자바스크립에서 함수는 객체다. 함수를 다른 함수의 인자로 넘겨 줄 수 있다. 함수에 다른 함수를 넘겨면 넘겨받은 함수에서 실행 할 것이다. 이때 넘겨 받은 함수를 콜백 함수라고 한다. 아래 코드로 확인해 보자.

// 로그 를 보여 준다. function consoleWriter() { // 로그 관련 작업을 한다. console.log(['log']); } function processing(logWriterCallback) { // somthing console.log(['step #1']); logWriterCallback(); console.log(['step #2']); // somthing } // 콜백 함수를 세팅하고 호출 한다. function func() { processing(consoleWriter); } func();

[코드1] 콜백 코드 예제

 필자는 이와 같은 패턴을 공통 화면에서 리턴 받을 때 많이 사용하고는 했다. 화면마다 사용하는 공통된 기능을 만들지 않고 콜백 함수를 이용해서 리턴받아야 하는 함수를 파라메터로 넘겨줘서 해당 함수에서 콜백 함수를 호출하면 하나의 기능으로 여러 페이지에서 일관되게 사용할 수 있게 하기 때문이다. 다음 코드에서 보다 자세한 사용 방법에 대해 알아 보자.

// callback 함수 // 들어온 값에서 100을 더하여 콘솔에 뿌려준다. function writePlus(msg) { msg = 100 + msg; console.log(msg); } // 콜백 함수를 받아서 loop 안에서 호출하는 역할 만 한다. function delegate(callback) { if (callback !== 'function') { // 정상적이지 않은 콜백 함수면 아무일도 하지 않도록 한다. callback = function () { } } for (var i = 1; i <= 100; i++) { //콜백 함수 호출 callback(i); } } // 콜백 함수를 세팅하고 delegate 함수를 호출 한다. function execute() { // Plus 콜백 함수를 넘겨서 delegate를 실행한다. delegate(writePlus); // Minus 콜백 함수를 넘겨서 delegate를 실행한다. delegate(writeMinus); } function writeMinus(msg) { msg = 100 - msg; console.log(msg); } // 실행 execute();

[코드2] Callback 함수의 활용

 "코드2"에서와 같이 하나의 로직을 호출 하지만 콜백 함수를 어떻게 세팅해서 넘기는지에 따라서 해당 출력값이 확연하게 다르게 출력이 되고 있는 것을 확인 할 수 있다.

출력 값은 writePlus 콜백 함수를 넘겼을 때는 101 ~ 200까지 출력이 되고 writeMinus 콜백으로 넘겼을 때는 99 ~ 0까지 출력이 되고 있다. 이렇게 콜백을 넘겨 주는 차이로 확연하게 다른 로직이 구현되므로 중요 핵심 로직으로 결과 값을 받아와서 넘겨 받은 콜백에서 원하는 작업을 할 수 있게 하면 확장성있는 함수를 만들 수 있을 것이다.