콜백 함수 (Callback Function) 이해하기

안녕하세요! 오늘은 프로그래밍에서 중요한 개념인 콜백 함수에 대해 알아보겠습니다. 어려워 보일 수 있지만, 차근차근 설명드릴게요!

콜백 함수란?

콜백 함수는 다른 함수에 인자로 전달되는 함수입니다. 쉽게 말해, 어떤 일이 끝났을 때 실행되도록 미리 준비해둔 함수라고 생각하면 됩니다.

왜 콜백 함수를 사용할까요?

1. 순서 제어: 특정 작업이 끝난 후에 다른 작업을 실행하고 싶을 때 사용합니다.
2. 코드 재사용: 같은 함수를 여러 상황에서 다르게 동작하게 만들 수 있습니다.
3. 비동기 작업 처리: 시간이 오래 걸리는 작업을 기다리지 않고 다른 일을 할 수 있게 해줍니다.

콜백 함수 예시

간단한 예시로 콜백 함수를 이해해봅시다:

// 인사 함수
function sayHello(name, callback) {
  console.log(`안녕하세요, ${name}님!`);
  callback(); // 콜백 함수 실행
}

// 작별 인사 함수 (콜백으로 사용될 함수)
function sayGoodbye() {
  console.log("안녕히 가세요!");
}

// sayHello 함수 호출, sayGoodbye를 콜백으로 전달
sayHello("영희", sayGoodbye);

이 코드를 실행하면 다음과 같은 결과가 나옵니다:

안녕하세요, 영희님!
안녕히 가세요!

다른 예시 입니다.

// 2초 후에 메시지를 출력하는 함수
function showMessage(callback) {
    setTimeout(() => {
        console.log("Hello, world!");
        callback(); // 작업 완료 후 콜백 호출
    }, 2000);
}

// Callback 함수 정의
function afterMessage() {
    console.log("This is after the message.");
}

// 함수 호출
showMessage(afterMessage);

이 코드를 실행하면 다음과 같은 결과가 나옵니다:

setTimeout을 통해 2초 후에 “Hello, world!“가 출력된 다음, 
afterMessage 함수가 호출되어 “This is after the message.“가 출력됩니다.

콜백 함수의 동작 원리 간단 설명

콜백 함수의 동작 원리를 쉽게 설명하면 다음과 같습니다:

1. 함수를 인자로 전달: 하나의 함수를 다른 함수의 인자로 전달합니다. 이때 전달되는 함수가 콜백 함수입니다.
2. 나중에 실행: 콜백 함수는 즉시 실행되지 않고, 그것을 받은 함수 내에서 특정 시점에 호출됩니다.
3. 실행 순서 제어: 이를 통해 코드의 실행 순서를 제어할 수 있습니다. 예를 들어, 어떤 작업이 끝난 후에 콜백 함수를 실행하도록 할 수 있습니다.
4. 유연성 제공: 같은 함수에 다른 콜백을 전달함으로써, 동일한 코드를 다양한 상황에 맞게 유연하게 사용할 수 있습니다.

간단히 말해, 콜백 함수는 "나중에 실행될 코드"를 미리 준비해두는 방식이라고 생각하면 됩니다. 이를 통해 코드의 실행 흐름을 더 효과적으로 제어할 수 있습니다.

콜백 함수의 장점

1. 유연성: 같은 함수를 다양한 상황에 맞게 사용할 수 있습니다.
2. 코드 구조화: 복잡한 작업을 작은 단위로 나눠 관리할 수 있습니다.
3. 비동기 프로그래밍: 시간이 걸리는 작업을 효율적으로 처리할 수 있습니다.

🔗출처 : 러닝스쿨! 자바스크립트 첫걸음 book