Callback Function 패턴
자바스크립트는 함수 기반으로 동작하기 때문에 이벤트 기반으로 동작하는 부분들은 콜백함수를 통해서 다양하게 동작하고 있다.
특히 자바스크립트는 변수나 인자로 함수를 쉽게 설정하과 전달할 수 있어서 더 쉽게 콜백함수를 활용할 수 있다.
대표적으로 이벤트 핸들러이지만, 일반적으로 자바스크립트 처리 로직 주엥서도 이러한 콜백 패턴을 이용해서 해당 함수의 호출이 끝나고 난 뒤에 처리할 수 있도록 활용할 수 있다.
콜백함수 패턴은 매우 간단하지만, 처리가 많은 자바스크립트에서 다양하게 응용할 수 있다.
특히 하나의 공통 라이브러리를 이용할 때 콜백 함수를 넘겨주는 것은 라이브러리의 확장성을 높일 수 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello</title> </head> <body> <script> (function(){ function ajax(method, url, data, callback){ var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = function(){ if(xhr.status === 200){ callback.call(this, xhr.responseText); } } xhr.send(data); } ajax("POST","/login","id=hello&password=world",function(responseText){ if(responseText === "Success"){ alert("Success to login!"); ajax("GET","/userInfo","id=hello", displayUserInfo); } else{ alert("Failed to login"); } }); function displayUserInfo(responseText){ document.getElementById("userInfo").innerHTML = responseText; } }()); </script> </body> </html> |
ajax()함수를 공통으로 사용하기 위해 콜백 패턴을 사용하였다.
이 함수는 XMLHttpRequest가 빈번하게 일어나기 때문에 이를 효율적으로 호출하려고 정의하였다.
공통으로 처리하는 부분 이외에 각 요청 함수들이 이후에 어떻게 처리할지에 대한 콜백 함수를 인자로 넘겨준다.
먼저 로그인을 POST로 요청하면서 함표 표현식을 통해 새로운 콜백함수를 정의하여 전달하고 있고, 정상적으로 로그인되면 두번째로 GET 요청하면서 먼저 정의된 displayUserInfo() 함수를 콜백함수로 넘겨주고 있다.
XMLHttpRequest의 순서가 보장되어야 할 때가 콜백 함수를 활용할기 좋은 예이다.
일반적인 이벤트 핸들러의 콜백함수 등록과 유사하게 사용자 정의 함수를 만들어서 사용한다고 생각하면된다.
콜백 함수에는 임의의 함수가 들어가기도 하고 다른 함수명을 사용해서 넘길 수도 있으므로 소스코드 자체가 임의 함수의 산발적인 출연으로 복잡해지지 않도록 적당하게 이름을 뽐아서 구분하고 정리하는 것이 필요하다.
이렇게 직접 콜백함수 패턴을 만들어서 사용하는 것은 브라우저 환경에서도 있지만, 더욱 많이 사용되는 곳은 Node.js와 같은 서버 환경이다.
왜냐하면 Node.js와 같은 서버는 비동기 non-blocking으로 서버가 동작하며, 파일을 하나 읽을 때나 비동기 처리를 할 때 항상 콜백 패턴을 이용하기 때문이다.
Node.js에서 파일 시스템에서 파일을 읽을 때 콜백함수 처리부분이다.
fs.readFile("/sample.txt", function(err, data){ console.log(data); }); |
Node.js에서 첫번째 인자는 에러에 대해 명세하는 객체를 콜백함수의 규칙으로 정하고 잇다.
그 이후에는 콜백함수로 전달할 데이터들을 인자로 넘겨준다.
이처럼 Node.js와 같은 서버 환경에서 콜백함수가 순서대로 많이 나와서 여러단계 겹치는 예도 많다.
4단계 이상의 콜백함수가 겹치면 소스를 읽는 것 자체가 불가능할 정도로 복잡해지므로 적당하게 함수명을 따로 분리해서 소스를 정리하는 것이 콜백 패턴의 가장 주의할 점이다.
출처-속깊은 자바스크립트 양성익 지음
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 디자인 패턴 #정리 (0) | 2018.01.05 |
|---|---|
| 자바스크립트 디자인 패턴 #10. curring 패턴 (0) | 2018.01.05 |
| 자바스크립트 디자인 패턴 #8. Self-invoking constructor 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #7. Memoization 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #6. Self-defining function 패턴 (0) | 2018.01.03 |