[번역]Functional Programming with JavaScript

Functional Programming with JavaScript in 3 Steps

순수함수(pure functions)

• 동일한 입력에 대해 항상 동일한 출력 반환
• side effect(부작용) 없다

// ❌ impure (반환값 대신 side effect)
function addTaco(array) {
  array.push("taco");
}

// ❌ impure (인자 대신 전역 변수 사용)
function addTaco() {
  return [...globalArray, "taco"];
}

// ✅ pure
function addTaco(array) {
  return [...array, "taco"];
}

순수함수는 예측이 가능하고, 디버그가 쉬우며 테스트하기 매우 쉽다. 또한 참조 투명성때문에, 메모리제이션(함수 결과 캐싱)과 같은 최적화 기술을 허용한다.

불변성(immutability)

불변 객체나 배열을 만든 후에는 수정하고 싶으면, 복제하고 새로운 변수에 할당해야 한다.

// ❌ mutable
const bands = ["Metallica", "Queen"];
bands.push("Nirvana");

// ✅ immutable
const someBands = ["Metallica", "Queen"];
const bands = [...someBands, "Nirvana"];

불변 데이터는 thread-safe하고 failure atomic하다.
변경을 감지하기 위해 깊은 비교 대신 참조 확인만 검사하면 된다. -> 효율적인 상태 관리에 중요한 빠른 변경 감지가 가능하다(ex, React state변경)

선언형 프로그래밍(declarative programming)

• 선언형 프로그래밍: 우리가 이루고자 하는 것을 설명
• 명령형 프로그래밍: 우리가 그것을 달성하려는 방법을 설명

즉, 명령형 프로그래밍은 명시적인 단계별 명령을 설명하는 반면 선언적 프로그래밍은 일련의 선언으로 구성됩니다.

const names = ["Han", "Chewbacca", "Luke", "Leia"];

// ❌ 명령형 프로그래밍
const shortNames = [];
for (let i = 0; i < names.length; i++) {
  if (names[i].length < 5) {
    shortNames.push(names[i]);
  }
}

// ✅ 선언적 프로그래밍
const shortNames = names.filter((name) => name.length < 5);

선언적 프로그래밍에 많이 쓰이는 고차함수 : map, filter, reduce