power-girl0-0

[함수지향] 콜백 & 비동기 처리 본문

언어/Javascript

[함수지향] 콜백 & 비동기 처리

power-girl0-0 2021. 2. 5. 11:59
728x90

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743)

 값으로서의 함수 

JavaScript에서는 함수도 객체다.

JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다.

 

다음 예제를 통해서 그 의미를 알아보자.

function a() {}

위 예제는 var a=function(){} 와 같은 의미이다.

즉, a함수는 변수 a에 담겨진 값이다.

아래 예제와 같이 함수는 객체의 값으로 포함될 수 있다.

a = {
    b:function(){
    }
};

 

 

즉, 객체 안에 정의 되고 있는 함수를 메소드라고 부른다.

함수는 값이기 때문에 다른 함수의 인자로 전달될 수도 있다.

아래 예제를 통해 알아보자.

function cal(func, num){
    return func(num)
}
function increase(num){
    return num+1
}

alert(cal(increase, 1));

 

함수 호출부분을 보면, 함수 increase와 값 1이 함수 cal의 인자로 전달된다.

함수 cal은 첫번째 인자로 전달된 increase를 실행하는데, 이 때 두번째 인자의 값인 1을 인자로 같이 전달한다.

함수 increase은 계산된 결과를 리턴하고 cal은 다시 그 값을 리턴한다.

 

따라서, 위 예제의 실행 결과는 2가 출력된다.

함수는 함수의 리턴 값으로 사용할 수 있다.

아래 예제를 통해서 알아보자.

function cal(mode){
    var funcs = {
        'plus' : function(left, right){return left + right},
        'minus' : function(left, right){return left - right}
    }
    return funcs[mode];
}
alert(cal('plus')(2,1));

위 코드의 결과 값은 3이 출력된다.

함수 호출부분에서 cal함수의 plus를 호출함으로써 plus속성의 값인 함수가 리턴된다.

따라서, left인자에는 2가 들어가고 right인자에는 1이 들어가기 때문에 결과값은 3이 출력된다.

함수는 배열의 값으로도 사용할 수 있다.

아래 예제를 통해 확인해보자.

var process = [
    function(input){ return input + 10;},
    function(input){ return input * input;},
    function(input){ return input / 2;}
];
var input = 1;
for(var i = 0; i < process.length; i++){
    input = process[i](input);
}
alert(input);

반복문이 돌면서 배열안에 있는 값인 함수가 호출되면서 실행되는 코드이다.

 

이렇게 변수, 매개변수, 리턴 값 등과 같은 용도로 사용될 수 있는 데이터를 first-class citizen 이라고 한다. 

 콜백 

어떠한 함수가 수신하는 인자가 함수인 경우를 '콜백'이라고 한다.

예제를 통해서 알아보도록 하자.

function sortNumber(a,b){ //a와 b는 서로 값을 비교하기 위해서 a,b를 넣는다.
    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.
    return b-a;
}
var numbers = [2, 10,7,8,9,6,5,4,3,20,1];
alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

위 코드는 인자로 전달된 함수 sortNumber의 구현에 따라서 sort의 동작방법이 완전히 바뀌게 된다.

즉, sortNumber와 같은 함수를 콜백이라고 한다.

 비동기 처리 

어떤 일을 순차적으로 처리한 것은 동기처리이고, 그렇지 않은 것은 비동기 처리라고 한다.

 

콜백은 비동기처리에서도 유용하게 사용된다.

시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다.

 

ajax는 비동기 처리를 해주는 것으로, 아래 예제를 통해서 알아보자.

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $.get('http://localhost/javascirpt/datasource.json.js', 
    function(result){
        console.log(result);
    }, 'json');
</script>
</body>
</html>

 

정보를 가져온 다음에 무슨일을 해야할 것인가에 대해서는 정보에 따라서 수행되는 기능이 똑같지 않다.

이것은 같지 않기 때문에 사용자에게 위임을 해야는데, 콜백함수를 통해서 인자를 입력받는 것이다.

 

즉, 함수를 매개변수 값으로 전달되는 것을 통해서 get이라는 메소드의 동작을 완전히 바꿀 수 있는 것이다.

 

728x90
저작자표시

'언어 > Javascript' 카테고리의 다른 글

[함수지향] arguments  (0) 2021.02.05
[함수지향] 클로저  (0) 2021.02.05
[함수지향] 유효범위 - 전역변수, 지역변수  (0) 2021.02.04
정규표현식  (0) 2021.02.04
API 사용하는 방법  (0) 2021.02.04
'언어/Javascript' Related Articles more
Comments