해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
콜백 함수란?
값으로 사용될 수 있는 함수의 특성을 이용하면 함수의 인자로 함수를 전달할 수 있습니다.
값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있습니다.
이때 값으로 전달된 함수를 콜백 함수라고 합니다.결국, 콜백함수는 처리를 위임받는 함수라고 할 수 있습니다.
예제로 살펴봅시다.
function sortNumber(a,b){
// 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
return b-a;
}
var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];
console.log(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]
sort() 메소드는 자바스크립트에 내장된 내장메소드입니다.
자바스크립트 사전등을 참고하면, sort 는 인자 옵션으로 함수를 받을 수 있습니다.
위의 예제에서는 sortNumber 가 콜백함수입니다.
인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 됩니다.
비동기 처리
어떤 일을 순차적으로 처리하는 것을 동기처리, 그렇지 않은 것을 비동기처리 라고 합니다.
콜백은 비동기처리에서도 유용하게 사용됩니다.
시간이 오래걸리는 작업이 있을 때, 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면
해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다.
Ajax 는 이러한 비동기 처리를 이용한 것입니다.
Ajax에 대한 자세한 정보는 다음 포스팅에서 다루는 것으로 하고,
Ajax를 이용한 비동기 처리를 보도록 하겠습니다.
<!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);
}, 'json');
</script>
</body>
</html>
제이쿼리가 제공한 $ 라는 특수한 객체를와 get 이라는 메소드를 사용한 예제입니다.
get 메소드의 두번째 인자인 함수가 보이죠?
이 함수가 콜백함수입니다.
get 이라는 메소드가 function(result){ ...} 함수를 호출하고 있으나,이 함수에 의해 get 메소드의 실행 결과가 완전히 바뀌기 때문에 콜백함수 인 것입니다.
오늘은 간단하게 콜백함수와 비동기처리에 대해 알아보았습니다.
'Archive > Develop' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트 기본 문법 | 자바스크립트 arguments | function length (0) | 2021.02.03 |
|---|---|
| [ JavaScript ] 자바스크립트 기본 문법 | 내장 함수 & 클로저 개념| Private Variable (0) | 2021.02.03 |
| [ JavaScript ] 자바스크립트 함수 지향 | 메소드와 함수 차이 | 함수 리턴값 | 함수 배열 (0) | 2021.02.03 |
| [ JavaScript ] 자바스크립트 전역변수와 지역변수 | 변수의 유효범위 (0) | 2021.02.03 |
| [ JavaScript ] 자바스크립트 정규표현식 | 정규표현식 객체 생성 | 정규표현식 대소문자 옵션 | match 함수 (0) | 2021.02.03 |