JavaScript callback 함수

< callback 함수 >

> 콜백 함수란 파라미터로 함수를 전달받아 함수의 내부에서 실행하는 함수이다.

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(callback)한다는 것이 콜백 함수의 개념이다.

 

 

function checkBrush(count, bad, good) {
    if (count < 3) {
        return bad();
    }
    else {
        return good();
    }
}

function badBrush() {
    console.log('양치 횟수가 부족합니다.');
}

function goodBrush() {
    console.log('잘하고 있습니다!');
}

checkBrush(2, badBrush, goodBrush); // 양치 횟수가 부족합니다.

 

 

• checkBrush, badBrush, goodBrush 총 3가지 함수를 선언하고 checkBrush 함수를 호출할 때 매개변수로 count에 숫자값을, bad와 good에 각각 badBrush와 goodBrush 함수를 전달했다.
• 여기서 badBrush와 goodBrush 함수가 콜백 함수인 것이다.
• checkBrush 함수가 먼저 호출되고 매개변수로 들어온 count의 값에 따라 badBrush와 goodBrush 함수 둘 중 한 가지가 나중에 호출된다.

 

 

> 콜백 함수 사용 원칙

• 익명 함수 사용

const number = [1, 2, 3];

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

// 2
// 4
// 6

const number = [1, 2, 3];

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

// 2
// 4
// 6

 

 

 

• 함수의 이름 넘기기

function introduce(name, callback) {
    console.log('name: ', name);
    callback();
}

function finish() {
    console.log('자기소개 끝');
}

introduce('test', finish);

// name: test
// 자기소개 끝

 

 

자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다루기 때문에 함수를 변수처럼 사용할 수 있다.

따라서 함수를 콜백 함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.

 

 

• 전역변수, 지역변수를 콜백 함수의 파라미터로 전달 가능

const fruit = 'apple'; // 전역변수

function callbackFunc(callback) {
    const vegetable = 'potato'; // 지역변수
    callback(vegetable);
}

function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}

callbackFunc(eat); // fruit: apple / vegetable: potato

 

 

 

> callback 지옥

• callback을 사용하여 비동기적 작업 처리를 구현해야 할 때 callback이 3개 이상 필요하다면 엄청나게 중첩된 callback 함수가 만들어지게 되는데, 이러한 경우를 콜백 지옥이라고 부른다.
• 그 이유는 가독성이 매우 떨어져 콜백 지옥 내부에서 어떠한 에러가 발생했을 때 찾아내기가 정말 어렵기 때문이다.

 

-> 이를 보완하기 위해서 promise가 나왔다.