callback

전 포스팅에서 함수의 리턴값으로 함수를 리턴하는 재귀함수에 대해 포스팅했다.

callback 함수란 재귀함수와 약간은 비슷하지만 함수의 파라미너로 함수를 전달받아 함수의 내부에서 실행하는 함수이다.

간단한 예를 들어보자.

let number = [1, 2, 3, 4, 5];

number.forEach(x => {
    console.log(x * 2);
}); 

//결과 값
2
4
6
8
10

위의 코드는 간단한 forEach문인데, forEach 메소드는 메소드의 인자값으로 함수를 받아와 배열 각각의 요소들을 인자값으로 받은 함수의 파라미터로 건네준 결과값을 받아온다.

동일한 예로 Array.filter(), Array.sort() 등이 있겠다.

콜백함수의 인자로 들어가는 함수는 부모함수의 안에서 실행되므로 이름을 붙혀주지 않아도 되고, 아래의 예제처럼 ()를 붙혀주지 않아도 된다.

다만 콜백함수 내부에서 선언된 지역변수와 콜백함수 바깥쪽에서 선언된 전역변수, 또는 부모의 지역변수이지만 콜백함수의 변수로는 올 수 없는 값등을 조심해야하겠다.

function add(x, callback) {
    let sum = x + x;
    callback(sum);
}

add(2, function(result) {
    add(result, function(result) {
        add(result, function(result) {
            console.log('finish!!');
        })
    })
})

비동기 호출이 자주 일어나는 프로그램의 경우 '콜백 지옥'이 발생한다.
함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.

하지만 promise를 사용하면 콜백지옥을 탈출할 수 있다.

function add(x) {
    return new Promise((resolve, reject) => {
        let sum = x + x;
        console.log(sum);
        resolve(sum);
    })
}

add(2).then(result => {
    add(result).then(result => {
        add(result).then(result => {
            console.log('finish!!');
        })
    })
})

promise는 정상수행 후 resolve, 실패 후 reject가 실행된다.

결론: promise를 사용해서 콜백지옥을 탈출할 수 있다.