같은 입력에 항상 같은 출력을 반환하고 외부 상태를 변경하지 않는 함수입니다. 이 성질 덕분에 함수를 독립적으로 테스트하고 실행 결과를 추론하기 쉬워집니다.

값이 예상치 못한 곳에서 바뀌지 않기 때문에 상태 추적이 쉬워지고, 변경 전후를 비교하거나 되돌리기도 쉬워집니다.

어떤 표현식을 그 결과 값으로 대체해도 프로그램의 동작이 바뀌지 않는 성질입니다. 순수 함수는 참조 투명성을 가지기 때문에 호출 시점이나 순서에 상관없이 같은 결과를 냅니다. 이 덕분에 컴파일러나 런타임이 계산 순서를 자유롭게 최적화할 수 있습니다.

함수를 인자로 받거나 함수를 반환하는 함수입니다. map, filter, reduce가 대표적인 예입니다.

map은 배열의 각 요소를 다른 값으로 변환해 새 배열을 만듭니다. 원본 요소의 개수는 유지됩니다.

filter는 조건을 만족하는 요소만 남겨 새 배열을 만듭니다. 원본 요소 중 일부를 걸러낼 때 사용합니다.

reduce는 배열의 요소를 하나씩 처리해 하나의 결과로 누적합니다. 합계, 객체 변환, 그룹핑처럼 여러 값을 하나의 값으로 모을 때 사용합니다.

const numbers = [1, 2, 3, 4];
 
const doubled = numbers.map((number) => number * 2); // [2, 4, 6, 8]
const evenNumbers = numbers.filter((number) => number % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, number) => acc + number, 0); // 10

세 함수 모두 원본 배열을 직접 바꾸지 않고, 변환 결과를 새 값으로 반환합니다.

여러 인자를 받는 함수를 인자 하나씩 받는 함수들의 연쇄로 변환하는 기법입니다. 예를 들어 add(a, b)를 add(a)(b) 형태로 바꾸면, add(1)처럼 인자 일부만 적용한 함수를 미리 만들어 재사용할 수 있습니다. 함수 조합과 부분 적용을 쉽게 만들어 줍니다.

함께 쓸 수 있습니다. 객체로 domain을 모델링하면서도 내부 로직은 순수 함수와 불변 데이터 중심으로 작성할 수 있습니다.

컴포넌트를 순수 함수처럼 다루면 같은 props에 같은 UI를 보장할 수 있습니다. 그래서 렌더링 결과를 예측하기 쉽고, 테스트와 최적화(메모이제이션, 렌더 스킵)도 단순해집니다. side effect는 useEffect로 격리해 순수한 렌더링 로직과 분리합니다.

side effect를 완전히 제거할 수는 없기 때문에 격리하는 전략을 씁니다. 네트워크 요청, 타이머, 로그 출력처럼 외부와 상호작용하는 코드를 함수형 로직과 분리하고 경계를 명확히 합니다. React에서는 useEffect, Redux에서는 middleware처럼 effect 전용 레이어를 두는 것이 대표적인 방식입니다.