[ JS ] 비동기 함수(Callback, generator, async/await, Promise)

1. Callback

콜백 함수는 비동기 작업이 완료되면 호출되는 함수입니다. 아래는 콜백 함수를 사용하여 비동기적으로 데이터를 가져오는 예제입니다.

function fetchData(callback) {
  setTimeout(() => {
    const data = 'Callback example';
    callback(data);
  }, 1000);
}

function processData(data) {
  console.log('Data received:', data);
}

fetchData(processData);

2. Promise

프로미스는 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. 아래는 프로미스를 사용하여 비동기 작업을 수행하는 예제입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve('Promise example');
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log('Data received:', data))
  .catch(error => console.error('Error:', error.message));

3. async/await

async 함수는 비동기 작업을 처리하는 함수로, await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다립니다. 아래는 async/await를 사용하여 데이터를 가져오는 예제입니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve('Async/await example');
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log('Data received:', data);
  } catch (error) {
    console.error('Error:', error.message);
  }
}

getData();

4. Generator

제너레이터는 함수의 실행을 일시 중단하고 다시 시작할 수 있는 반복 가능한 객체를 만드는 함수입니다. 아래는 제너레이터를 사용하여 숫자를 생성하는 예제입니다.

function* generateNumbers() {
  let number = 1;
  while (true) {
    yield number++;
  }
}

const generator = generateNumbers();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
console.log(generator.next().value); // 3
// 계속해서 숫자가 생성됨

느낀점

기존에 부트캠프를 하기 전에 JS를 어느정도 잘 알고있다고 생각 했으나 Generator는 이번에 처음 보는 방식인걸보고 부트캠프 동안 JS를 더 자세히 공부해봐야 겠습니다.