Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 콜백함수, 비동기 처리 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 콜백함수, 비동기 처리

호IT 2021. 2. 4. 03:24

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

- 콜백 함수

 

 

값으로 사용될 수 있는 함수의 특성을 이용하면 함수의 인자로 함수를 전달할 수 있습니다.

값으로 전달된 함수는 호출될 수 있기 때문에 이를 이용하면 함수의 동작을 완전히 바꿀 수 있습니다.

 

이때 값으로 전달된 함수를 콜백 함수라고 합니다.

콜백함수는 처리를 위임받는 함수라고 할 수 있습니다.

 

 

 

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 메소드의 실행 결과가 완전히 바뀌기 때문에 콜백함수 인 것입니다.

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS arguments ,함수, length  (0) 2021.02.04
[ JavaScript ] JS 내부함수,외부함수,Private Variable,클로저  (0) 2021.02.04
[ JavaScript ] JS 지역변수와 전역변수의 유효범위 , 정적 유효 범위  (0) 2021.02.04
[ JavaScript ] JS 정규표현식  (0) 2021.02.03
[ JavaScript ] JS API,문서보는법  (0) 2021.02.03
'SUA 정보보안/JavaScript' Related Articles more
Comments