콜백
콜백이란 어떠한 함수가 수신하는 인자가 함수인 경우 콜백이라 한다. --> 함수를 정의한 곳의 매개변수(여기서는 인수가 된다. 인자와 인수와 비교)가 함수인 경우를 말한다.
1. 처리의 위임
값으로 사용될 수 있는 특성을 이용하면 함수의 인자로 함수로 전달할 수 있다.
값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있다.
인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.
function sortNumber(a,b){//콜백함수
// 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]
numbers는 객체이다. (배열객체)
sort(sortNumber()); -->sortNumber가 콜백함수이다.
콜백 함수라는 것을 수신하는 sort 메소드가 콜백함수의 내용을 인자로 전달받아서 내부적으로 호출하는 것을 통해서 sort라는 함수가 동작하는 기본적인 동작방법을 개발자가 변경할 수 있다.
--> 즉, 값으로써 함수를 사용할 수 있기 때문에 오리지널 함수(sort)의 동작 방법을 개발자가 값을 전달하는 것을 통해서 완전하게 바꿀 수 있다.
이것이 콜백이다.(콜백이 가능한 이유: 자바스크립트에서는 함수가 값이기 때문이다.)
(여기서 sort는 함수가 아닌 메소드라고 한다.), 배열이나 sort는 자바스크립가 기본적으로 가지고 있는 기능이기에 내장객체, 내장메소드, 빌트인 객체, 빌트인 메소드라 한다.
우리가 만드는 객체, 메소드, 함수는 사용자 정의 객체, 사용자 정의 함수라 한다.
2. 비동기 처리
cf.) 글작성->이메일 발송-> 작성완료: 순차적작성을 동기식 처리라고 한다.
글작성하고 이메일 발송 부분은 예약하고 작성완료(to do)를 하면 순식간에 일이 처리된다. 내부적으로는 예약 부분을 백그라운드에서 비동기적으로 처리
웹페이지에 표시되지않은 데이터를 화면에 표시할 수 있는 이유는 내부적으로 화면에 표시된 정보를 서버에 요청해서 화면에 표시한 것이다.(웹페이지 리로드 없이 작업한 것임)
클릭시 웹페이지가 변경되지 않고 서버와 웹브라우저가 조용히 통신하는 기법을 Ajax라고 한다.
콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.
다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.
datasource.json.js
{"title":"JavaScript","author":"egoing"}
demo1.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.get('./datasource.json.js', function(result){
// 서버와 통신이 끝났을 때 호출되도록 약속된 함수 기재
console.log(result);
// 함수를 호출했을때 result라는 매개변수에 담음(json.js에 있는 데이터)
//--> 이 값을 받아서 다음 작업 할 수 있다.(이러한 것이 가능한 것은 콜백(비즈니스-사용자에게 위임)이라는 것이 있기 때문이다.)
}, 'json');
</script>
</body>
</html>
서버에서 정보를 가지고와 무슨일을 할 것인가에 대한 것을 사용자에게 위임을 해야 하는데 그 위임하는 기법을 콜백함수를 통해 인자로 전달 받는다. 그래서 get이라는 메소드가 동작하는 방법을 바꿀 수 있다.
'WebFont-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 생성자와 new (0) | 2014.12.07 |
|---|---|
| [JavaScript] 함수의 호출 (0) | 2014.12.07 |
| [JavaScript] 값으로서의 함수 (0) | 2014.12.07 |
| [JavaScript] 객체 (0) | 2014.12.06 |
| [JavaScript] 배열 (0) | 2014.12.06 |