Jack... ComeBack .. CallBack

콜백 함수 는 자바스크립트로 작성된 코드에서 아주 자주 만나게 된다.
이번엔 콜백함수 에 대한 정의 위주로 먼저 공부해 보고 예제를 통해 다시 깔끔하게 정리해보려 합니다 그럼 레츠고 ,

✅ 콜백함수란?

👉 MDN의 정의
콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다.
이는 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출됩니다.
라고 적혀 있습니다. 이게 먼말인가요? 👀

조금 더 쉽게 정의해보자면~
함수를 등록만 하고 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때 호출하는 함수 입니다.

• 콜백 함수는 고차 함수에 의해 호출되며, 이때 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있습니다.

function dessert(count, eat, good) {
		count < 3 ? eatDessert() : goodDessert();
}

function eatDessert() {
    console.log('오늘 먹어야 할 간식을 먹어주세요');
}

function goodDessert() {
    console.log('오늘 먹어야할 간식을 모두 먹었습니다');
}

dessert(4, eatDessert, goodDessert);

정의된 내용을 기억하며 코드를 예시로 콜백함수에 대해 살펴보겠습니다~

1) dessert, eatDessert, goodDessert 3가지 함수를 선언합니다
2) dessert 함수를 호출할 때 매개변수로 count에 숫자 값을, eat과 good에 각각 eatDessert 함수와 goodDessert 함수를 전달합니다.
3) eatDessert와 goodDessert 함수가 콜백함수인 것입니다!
4) dessert 함수가 먼저 호출되고, 매개변수로 들어온 count의 값에 따라 eatDessert와 goodDessert 함수 둘 중 하나가 나중에 호출되었습니다.

👉 위에서는 count 값이 4니까 goodDessert '오늘 먹어야할 간식을 모두 먹었습니다'가 출력되겠죠?

(예시출처: 📚 알잘딱깔센 JavaScript 핵심개념)

✅ 콜백함수가 필요한 이유!

자바스크립트는 동기식 언어로 한번에 하나의 작업을 수행합니다.
이 말은 즉! 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 차례를 기다리는 것을 말합니다. (빨리빨리 한국인과 어울리지 않는 시스템)

• 자바스크립트 V8 엔진은 싱글 스레드로 동시에 여러개의 명령을 수행할 수 없습니다.
• 그렇기 때문에 만약 응답이 오래걸리는 작업이 있다면 ?
• 속도가 아주아주 느려지겠죠 🐢

💡 콜백함수를 비동기적 프로그래밍 방식으로 사용하면 자바스크립트 엔진이 브라우저나 node.js에서 제공하는 Web API에게 작업을 맡기고 다음 명령들을 수행해 속도를 빠르게 할 수 있습니다~

✅ 콜백함수를 활용하는 메서드

콜백함수를 활용하는 함수에는 forEach(), map(), filter() 가 있습니다. 각 함수에서의 사용법에 대해 살펴보겠습니다.

1. forEach()
: 배열이 갖고 있는 함수로 배열 내부의 요소를 활용해 콜백 함수를 호출합니다.
2. map()
: map() 메서드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만듭니다.
3. filter()
: 콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수로, function(value, index, array) {} 형태의 콜백함수를 사용하는 것이 기본입니다

✅ 콜백지옥

콜백지옥은 콜백함수를 익명 함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 뎁스(Depts)가 깊어지는 현상입니다.
-> 코드의 가독성이 떨어지니 수정하기도 어렵습니다.

// 에러 처리까지 포함된 콜백 지옥 예시입니다
step1(function (err, value1) {
    if (err) {
        console.log(err);
        return;
    }
    step2(function (err, value2) {
        if (err) {
            console.log(err);
            return;
        }
        step3(function (err, value3) {
            if (err) {
                console.log(err);
                return;
            }
            step4(function (err, value4) {
                // ...
            });
        });
    });
});

콜백지옥으로부터 탈출하기 위해 promise, async, await을 사용하여 callback 지옥을 벗어날 수 있습니다.

이 부분에 대해서는 다음 블로그글에서 자세하게 다뤄보겠습니다😎

---

📝 Reference

• MDN 콜백함수
• 📚 알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념