[JS] 1급객체와 콜백함수

 

1급 객체 First-Class Objects

JavaScript에서 함수는 1급 객체

1. 변수에 함수를 할당할 수 있음
2. 객체의 프로퍼티로 함수를 저장할 수 있음
3. 함수를 다른 함수의 인자로 전달할 수 있음
4. 함수를 다른 함수의 반환 값으로 사용할 수 있음

 

 

콜백 함수 Callback Function

다른 함수의 인자로 전달되어 그 함수에 의해 호출되는 함수

== 나중에 호출될 목적으로 다른 함수에 넘겨지는 함수

 

 

함수를 인자로 전달

JavaScript에서 함수가 1급 객체이기 때문에 함수를 다른 함수의 인자로 전달할 수 있음

이때 전달되는 함수가 콜백 함수!

function greeting(name) {
    console.log(`Hello, ${name}!`);
}

function processUserInput(callback) {
    const name = prompt("Please enter your name.");
    callback(name);
}

processUserInput(greeting);

▲ 여기서 greeting 함수는 processUserInput 함수의 콜백 함수로 전달됨

 

 

함수를 반환 값으로 사용

1급 객체의 특성 덕분에 함수는 또 다른 함수에서 반환될 수 있음

→ 고차 함수(Higher-Order Function)와 콜백 함수의 개념과도 연결됨

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

▲ 여기서 createMultiplier 함수는 함수(콜백 함수)를 반환하고, 이 반환된 함수는 이후에 호출됨

 

 

 

예시

콜백 함수는 비동기 작업에서도 자주 사용되는 중

ex) 타이머 함수나 이벤트 핸들러에서 콜백 함수를 많이 사용

setTimeout(function() {
    console.log("This message is shown after 3 seconds");
}, 3000);

document.getElementById("myButton").addEventListener("click", function() {
    console.log("Button was clicked!");
});

▲ 첫 번째 콜백 함수는 3초 후에 호출되고, 두 번째 콜백 함수는 버튼 클릭 이벤트가 발생했을 때 호출됨