[JS] 콜백 함수 (Callback Function)

---

알고있으면 좋은 Javascript Tip✨

---

콜백 함수 (Callback Function)

• 콜백함수는 파라미터로 전달받은 함수를 말한다.
• 파라미터로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출 할 수 있다.

(1) 기존 방식
function add(x, y) {
    return x + y
}

function resultFunction(result) {
    console.log(result)
}

resultFunction(add(10,20))


(2) 콜백 함수(Callback Function) 방식
function add(x, y, print) {
    print(x + y)
}

function resultFunction(result) {
    console.log(result)
}

add(10, 20, resultFunction)

 

(1) 콜백함수(Callback Function)의 장단점은?

• 함수를 인자로 받기 때문에 필요에 따라 함수의 정의를 달리해 전달할 수 있다.
• 함수를 굳이 정의하지 않고 익명 함수로도 전달 가능하다.
• 비동기(Asynchronous) 처리 방식의 문제점을 해결할 수 있다.
• 하지만 콜백함수를 너무 남용하면 코드의 가독성이 떨어 질수 있으니 유념해야한다.

(2) 콜백함수를 이용한 비동기처리?

• 비동기(Asynchronous)란 특정 코드의 실행이 끝날 때 까지 기다리지 않고 다음 코드로 바로 넘어가는 것을 의미한다.
• 대표적으로 자바스크립트에 내장되있는 setTimeout(), setInterval() 이라는 함수가 있다.

function callBackTestFunc(callback) {
    // 코드의 실행이 끝날 때 까지 기다리지 않고 바로 다음코드로 넘어간다.
    setTimeout(callback, 1000)
    console.log('Hello')
}

callBackTestFunc(() => {
    console.log('waited 1 second')
})


// Hello가 먼저 출력된다.
Hello

// 1초 뒤에 콜백함수가 실행된다.
waited 1 second