[Javascript] Callback

동기(Synchronous) & 비동기(Asynchronous)

동기(Synchronous)와 비동기(Asynchronous)는 프로그램이나 시스템에서 작업이 어떻게 처리되는지를 나타내는 두 가지 실행 방식이다.

• 동기 (Synchronous):
  • 동기적인 작업은 순차적으로 진행된다. 한 작업이 시작되면 그 작업이 완료될 때까지 다음 작업은 대기해야 한다.
  • 동기적인 코드는 순서에 맞게 실행되므로 코드의 흐름이 예측 가능하고 간단하다.
  • 하나의 작업이 끝나기를 기다리는 동안 다른 작업은 대기해야 하므로 시간이 오래 걸릴 수 있다.
  • e.g

    console.log("start");
    console.log("step 1");
    console.log("step 2");
    console.log("end");

• 비동기 (Asynchronous):
  • 비동기적인 작업은 순차적으로 진행되지 않는다. 작업이 백그라운드에서 비동기적으로 처리되며, 해당 작업이 완료되기 전에 다음 코드가 실행될 수 있다.
  • 비동기적인 코드는 보통 콜백 함수, 프로미스, async/await과 같은 메커니즘을 사용하여 작성된다.
  • 비동기 작업을 통해 여러 작업을 동시에 수행할 수 있고, 웹 애플리케이션에서는 UI가 멈추지 않고 계속 응답할 수 있다.
  • 비동기적인 작업은 주로 네트워크 요청, 파일 읽기, 이벤트 핸들링과 같이 시간이 오래 걸리거나 외부 리소스에 의존하는 작업에 사용된다.이를 통해 애플리케이션이 더 효율적으로 동작하고 반응성을 유지할 수 있습니다.
  • e.g

    console.log("start");
    // 비동기적으로 1초 후에 콜백함수 실행, 그동안 다음 코드 계속 실행
    setTimeout(function() {
      console.log("step 1");
    }, 1000);
    console.log("step 2");
    console.log("end");

Callback

콜백(Callback)은 프로그래밍에서 함수를 다른 함수의 인자로 전달하고, 나중에 실행되도록 하는 개념을 말한다. 콜백은 비동기적인 작업, 이벤트 처리, 타이머 등 다양한 상황에서 사용된다.

주로 비동기적인 작업에서 사용되며, 코드의 유연성과 효율성을 높여준다. 함수를 인자로 전달하고 실행하면서 다양한 동작을 조합할 수 있어, 이벤트 처리나 비동기적인 데이터 획득과 같은 상황에서 유용하게 활용된다.

1. 함수를 다른 함수에 인자로 전달

   function greet(name, callback) {
     console.log(`Hello, ${name}!`);
     callback();  // 전달된 함수를 실행
   }
   
   function sayGoodbye() {
     console.log("Goodbye!");
   }
   
   greet("Alice", sayGoodbye);
   

   위의 코드에서 greet 함수는 이름을 출력하고, 전달된 콜백 함수를 실행한다. sayGoodbye 함수가 greet 함수의 콜백으로 전달되어, "Goodbye!"가 출력된다.

2. 비동기적인 작업에서의 콜백

   fetchData 함수가 비동기 작업을 수행하고, 작업이 완료되면 전달된 콜백 함수인 displayData를 실행한다.

   function fetchData(callback) {
     // 비동기 작업 수행 (예: AJAX 요청, 파일 읽기)
     // 작업이 완료되면 콜백 함수 실행
     setTimeout(function() {
       const data = "Fetched data!";
       callback(data);
     }, 1000);
   }
   
   function displayData(data) {
     console.log(data);
   }
   
   fetchData(displayData);