[JS] Callback과 Settimeout에 대해서

콜백 함수에 대한 이해

콜백 함수는 자바스크립트에서 매우 중요한 개념 중 하나입니다. 콜백 함수는 다른 함수에 매개변수로 전달되어 실행되는 함수를 의미합니다. 즉, 함수가 인자로 다른 함수를 받아서, 특정 시점에 그 함수를 호출하는 것이죠.

콜백 함수의 기본 개념

콜백 함수는 보통 비동기 작업에서 많이 사용됩니다. 비동기 작업은 실행되는 순서에 상관없이 완료될 때까지 기다리지 않고, 그 다음 코드를 바로 실행하는 방식입니다. 콜백 함수는 이러한 비동기 작업이 완료된 후에 호출되어야 할 코드 블록을 정의하는 데 유용합니다.

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

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

processUserInput(greeting);

위 코드에서 greeting 함수는 processUserInput 함수에 콜백으로 전달됩니다. 사용자가 이름을 입력하면 greeting 함수가 호출되어 사용자에게 인사를 건넵니다.

콜백 함수의 용도

1. 비동기 작업 처리: 주로 비동기적으로 실행되는 작업 후에 특정 작업을 수행하고 싶을 때 사용합니다. 예를 들어, 데이터베이스에서 데이터를 불러온 후 UI를 업데이트하는 작업 등에 활용됩니다.
2. 이벤트 처리: 버튼 클릭, 입력 폼 제출 등의 이벤트가 발생했을 때 특정 함수를 실행하기 위해 콜백을 사용합니다.
3. 코드의 재사용성 증가: 콜백 함수는 함수가 매개변수로 전달되기 때문에, 동일한 함수를 여러 곳에서 호출하더라도 다른 동작을 할 수 있습니다.

setTimeout 함수의 작동 방식

setTimeout 함수는 특정 작업을 일정 시간 후에 실행하고자 할 때 사용됩니다. 이 함수는 콜백 함수를 첫 번째 인자로 받고, 두 번째 인자로 지연 시간을 밀리초 단위로 받습니다. 지연 시간이 지나면 첫 번째 인자로 받은 콜백 함수가 실행됩니다.

function sayHello() {
    console.log('Hello, world!');
}

setTimeout(sayHello, 2000); // 2초 후에 'Hello, world!'가 출력됩니다.

위 예제에서는 sayHello 함수가 2초 후에 실행됩니다. setTimeout 함수는 비동기적으로 작동하기 때문에, 해당 시간 동안 다른 코드가 실행될 수 있습니다.

콜백 함수와 setTimeout 함수의 조합

콜백 함수와 setTimeout 함수를 조합하여 비동기 작업을 간단하게 처리할 수 있습니다. 예를 들어, 서버로부터 데이터를 받아오는 동안 UI를 블록하지 않고, 데이터가 도착한 후에 화면을 업데이트하는 방식으로 사용할 수 있습니다.

function fetchData(callback) {
    console.log('데이터를 서버에서 가져오는 중...');
    setTimeout(() => {
        const data = { name: 'John', age: 30 };
        console.log('데이터 가져오기 완료');
        callback(data);
    }, 3000);
}

function displayData(data) {
    console.log(`이름: ${data.name}, 나이: ${data.age}`);
}

fetchData(displayData);

위 코드에서 fetchData 함수는 데이터를 가져오는 동안 3초간의 지연을 주고, 이 지연이 끝나면 callback으로 전달된 displayData 함수가 호출되어 데이터를 화면에 출력합니다.

이처럼 콜백 함수와 setTimeout 함수를 조합하면 비동기 작업을 직관적이고 효과적으로 처리할 수 있습니다. setTimeout의 지연 시간 동안 다른 작업을 실행할 수 있고, 필요한 시점에 콜백 함수를 사용해 특정 작업을 완료할 수 있습니다.