[JavaScript] 자바스크립트 콜백 함수

콜백(Callback) 함수란?

---

function greet(name, callback) {
    console.log("Hello, " + name);
    callback(); // 전달받은 콜백 함수 실행
}

function sayGoodbye() {
    console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

콜백(Callback) 함수란 다른 함수에 매개변수로 전달되어 실행되는 함수를 말한다.

위에서 보이는 예시 코드에서 `greet`함수는 `callback`이라는 매개변수를 받고 있는데, 내부 로직에서 이를 함수로써 사용하고 있다. 이처럼 다른 함수에 매개 변수로 전달되는 `callback`과 같은 함수가 콜백 함수이다.

 

 

콜백(Callback) 함수 사용 방식

---

[익명 함수(Anonymous Funciton)  방식]

---

위에서 본 코드처럼 새로운 함수(`sayGoodbye`)를 정의하고 해당 함수를 매개변수로써 사용할 수 있지만, 위와 같이 간단한 내부 로직으로 구성되고, 일회성으로 사용할 함수를 새로 정의하는 방법은 적합하지 않다. 따라서 일회성으로 콜백 함수를 이용할 때는 익명 함수 (Anonymous Funciton)을 사용할 수 있다.

 

[익명 함수 방식 사용 예시]

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

greet("Bob", function() {
    console.log("This is an anonymous callback.");
});

 

위 코드에서는 익명 함수를 콜백 함수로 직접 전달하고 있다. 이렇게 일회성 콜백 함수를 익명 함수를 사용하면 코드가 간결해지는 장점이 있고, 혹시라도 이후에 발생할 함수 이름의 충돌을 방지할 수 있다. 그렇지만 재사용이 불가능하고 코드가 너무 길어지면 오히려 가독성을 해치는 상황이 발생할 수 있으므로, 적절한 상황에만 사용해야 한다.

 

[화살표 함수(Arrow Function) 방식]

---

화살표 함수 방식은 `=>` 표현식을 사용하여 함수를 작성하는 방식으로, 익명 함수 방식과 비슷하지만 `function` 키워드나 중괄호`{}`, return을 생략할 수 있어 더 짧고 간결한 함수 표현이 가능하다.

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

greet("Bob", () => console.log("This is an anonymous callback.");
});

 

화살표 함수를 사용하면 위처럼 정말 간결하게 콜백함수를 작성할 수 있지만, 익명 함수와 같이 재사용이 불가능하고 코드가 너무 길어지면 가독성이 떨어지므로 이 방식 또한 적절한 곳에서만 사용해야 한다.