[JavaScript] 콜백함수 Callback Function

* 콜백함수 Callback Function

자바스크립트에서는 매개변수로 함수를 받거나, 리턴타입으로 함수를 반환할 수 있다.

 

매개변수로 함수를 넘기는 방식으로 콜백함수가 있다.

다르게 얘기하면 어떤어떤 함수를 호출한 뒤에 그 함수 안에서 다른 호출을 호출하는 행위,

그런데 그 함수가 고정된 형태가 아닌 방식이라고 생각할 수도 있다.

만약 이 때 함수를 익명함수로 정의하면 그때그때 필요한 내용으로 써먹을 수도 있다.

        //////////////////////// 함수호출부 ////////////////////////
        callbackFunc(temp);
        callbackFunc(testFunction());
        callbackFunc();

        // 그 함수를 호출할 때마다 내용부를 다르게 쓸 수 있다.
        // 어떤 기능을 가진 함수를 호출하면서, 그 함수의 매개변수로 익명함수를 정의해
        // 원래기능 + 원하는 기능을 쓸 수 있다.
        callbackFunc(function () {
            alert('익명함수 호출...')
        });

매개변수가 여러개로 선언된 함수에 인자가 부족하게 전달되어도,

자바스크립트에서는 예외가 발생하지 않고, 대신 순서대로 인자가 변수에 대입된다.

나머지 변수들은 undefined로 값이 주어진다.

        function func(a, b, c) {
            alert('a : ' + a + ', b : ' + b + ', c : ' + c);
        }

        func(); 			// a: undefined, b: undefined, c: undefined
        func('A'); 			// a: A, b: undefined, c: undefined
        func(10, 20); 			// a: 10, b: 20, c:undefined
        func(10, 20, 30); 		// a: 10, b: 20, c: 30

만약 값이 정의되지 않은 매개변수가 있을 때

어떠한 값이 기본으로 나오게 하려면 변수를 '초기화' 해주어야 한다.

 

함수 내에 n개의 변수가 필요한 실행부가 작성되어 있는데

자바스크립트는 자유도가 높아 실제로 전달되는 값이 그보다 적거나 타입이 잘못될 경우,

undefined 또는 NaN(Not-a-Number)와 같은 값이 뜰 수 있기 때문이다.

(NaN은 이 블로그 에서 자세한 내용을 참고할 수 있었다.

표현 불가능한 수치형 결과 / 자기 자신과 일치하지 않는 유일한 값(a == NaN 이 성립하지 않음)이라는 특징이 있음)

 

이 때 단순하게 생각하면, 함수 내에 아래와 같이 선언해줄 수 있을 것이다.

function func(a, b, c) {
    if(a == 0) a = 0;
    if(b == 0) b = 0;
    if(c == 0) c = 0;
            
    alert('a : ' + a + ', b : ' + b + ', c : ' + c);
}

 

그런데 자바스크립트에서

1) 0이 아닌 숫자(음수도 가능)

2) null이 아닌 값

은 true로 인식된다는 속성을 이용해, 아래와 같이 선언해줄 수 있을 것이다.

function func(a, b, c) {
    if(!a) a=0;
    if(!b) b=0;
    if(!c) c=0;

    a = a || 0; // a가 false면(0이거나 null) 0을 대입
    b = b || 0;
    c = c || 0;
            
    alert('a : ' + a + ', b : ' + b + ', c : ' + c);
}

 

ECMA 6버전부터는 아래와 같이 매개변수부에 초기값을 선언하는 경우도 가능하다.

매개변수가 들어있지 않을 경우에 변수값을 임의의 변수로 초기화하겠다는 내용

function func(a = 0, b = 0, c = 0) {
    alert('a : ' + a + ', b : ' + b + ', c : ' + c);
}