[javascript] 자바스크립트의 비동기 제어와 함수형 프로그래밍

08 Dec 2023

javascript

이번에는 자바스크립트에서 비동기 제어와 함수형 프로그래밍에 대해 알아보겠습니다. 비동기 프로그래밍을 다루는 동안 함수형 프로그래밍 개념도 함께 학습하면 코드를 더 깔끔하고 유지보수가 쉽도록 만들 수 있습니다.

비동기 제어

자바스크립트는 비동기적으로 작동하는 이벤트 기반 언어입니다. 비동기 프로그래밍이란 어떤 작업이 실행되는 동안 다른 작업을 멈추지 않고도 동시에 진행될 수 있는 방식을 의미합니다. 대표적으로 콜백 함수, 프로미스, Async/Await을 통해 비동기 코드를 작성하고 관리할 수 있습니다.

콜백 함수

function fetchData(callback) {
  setTimeout(function() {
    callback('Data loaded');
  }, 2000);
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData);

콜백 함수는 비동기 작업이 완료되면 호출되는 함수로, 위 예시에서는 fetchData 함수에서 2초 후에 displayData 함수를 호출하고 있습니다.

프로미스

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Data loaded');
    }, 2000);
  });
}

fetchData().then(function(data) {
  console.log(data);
});

프로미스는 콜백 지옥과 같은 문제를 해결하기 위해 나온 패턴으로, 비동기 처리 결과를 확신하고 해당 결과를 가질 수 있는 객체입니다.

Async/Await

async function fetchData() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve('Data loaded');
    }, 2000);
  });
}

async function displayData() {
  const data = await fetchData();
  console.log(data);
}

displayData();

Async/Await는 프로미스 기반 코드에서 비동기 처리를 더 간결하고 동기식으로 작성할 수 있도록 도와줍니다.

함수형 프로그래밍

함수형 프로그래밍은 순수 함수와 불변성을 강조하는 프로그래밍 패러다임입니다. 자바스크립트는 함수가 일급 객체이기 때문에 함수형 프로그래밍을 지원하기에 적합하며, map, filter, reduce와 같은 함수를 통해 함수형 프로그래밍의 장점을 살릴 수 있습니다.

고차 함수

const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(num) {
  return num * num;
});

console.log(squaredNumbers);  // [1, 4, 9, 16, 25]

map 함수는 고차 함수로, 배열의 각 요소에 함수를 적용하여 새로운 배열을 반환합니다.

불변성

const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...numbers, 6];

console.log(numbers);  // [1, 2, 3, 4, 5]
console.log(newNumbers);  // [1, 2, 3, 4, 5, 6]

위 예제에서 보듯이, 기존 배열을 변경하지 않고 새로운 배열을 생성하여 불변성을 유지합니다.

함수형 프로그래밍은 코드를 더 안전하고 예측 가능하며, 병렬 처리와 동시성이 요구되는 비동기 프로그래밍에서 유용하게 사용됩니다.

이렇게 자바스크립트에서는 비동기 제어와 함수형 프로그래밍을 통해 코드를 더 간결하고 유지보수하기 쉽도록 만들 수 있습니다.

자세한 내용은 다음 자료를 참고하세요.