Web/JavaScript

자바스크립트 콜백함수 사용하기

_sparrow 2020. 6. 16. 10:00
반응형

노드JS를 공부하다 보면 비동기로 처리가 되어서 함수 처리 후에 나오는 값을 제대로 받을 수가 없는 적이 정말 많다.

그래서 이 비동기 처리되는 것을 원하는 대로 처리하기 위해 나온 게 콜백 함수다.

추후에 나온 promise라던지 async&await 같은 편하게 비동기 처리하는 방식도 있지만 말이다

    function func3(c, callback) {
        console.log('함수정의3');
        callback(c);
    }

    function func2(b, callback) {
        console.log('함수정의2');
        callback(b);
    }

    function func(a, callback) {
        console.log('함수정의1');
        callback(a); //function (result) <-result 내부값
    }

    func(1, function (result) {
        console.log('함수1 result', result);

        func2(result + 1, function (result) {
            console.log('함수2 result', result);

            func3(result + 1, function (result) {
                console.log('함수3 result', result);
            });
        });
    });

함수 정의의 파라미터 callback이라고 써진 것은 중요하지 않다

 

함수정의 내부의 callback('값') 이 그 함수가 리턴하는 값이다.

 

또 하나의 예제

    function func(a, b, cb) {
        console.log('함수정의1');
        var pre = a + 3;
        var aft = b + 5;
        cb(pre, aft);
    }

    function func2(a, b, cb) {
        console.log('함수정의2');
        var c = a + b;
        cb(c);
    }

    func(1, 2, function (result1, result2) {
        console.log('함수1', 'result1', result1, 'result2', result2);
        
        func2(result1, result2, function (result) {
            console.log('함수2', result);
        });
    });

 

다중 콜백 시에 코드 가독성이 떨어지고 복잡해진다.

그래서 promise나 async&await를 사용하고꼭 사용해야 한다면 낮은 레벨에서만 사용하는 게 좋겠다는 생각을 한다.

 

반응형