topic난이도 · 약 20

함수형 핵심 — 순수함수·불변성·고차함수·map/filter/reduce

사이드이펙트 없는 함수 + 변하지 않는 데이터 = 예측 가능하고 테스트 쉬움.

#함수형#순수함수#불변성#map#filter#reduce
왜 배우는가

React 훅·Redux·RxJS·데이터 처리 — 현대 JS가 함수형으로 간 이유. 불변성과 순수함수를 알면 'useState 업데이트가 왜 안 돼요' 같은 당황이 사라진다.

순수 함수(Pure Function)는 두 조건. ① 같은 입력 → 같은 출력. ② 사이드 이펙트 없음(전역 상태 변경·I/O·랜덤·시간). 테스트가 쉽고, 병렬·캐시 안전.

javascript
// ❌ 비순수 함수
let total = 0;                       // 외부 상태 수정
function addToTotal(n) { total += n; }

function logAndReturn(x) {           // 사이드 이펙트(I/O)
  console.log(x);
  return x;
}

function randomId() { return Date.now(); }  // 매번 다른 출력

// ✅ 순수 함수
function sum(nums) {
  return nums.reduce((a, b) => a + b, 0);
}

function addDay(date, days) {
  return new Date(date.getTime() + days * 86400_000);  // 새 객체 반환
}

React useEffect가 "사이드 이펙트 전용 구역"인 것도 이 맥락. 렌더 함수는 순수해야 한다.

불변성(Immutability). 데이터를 바꾸지 않고 새 복사본을 만든다. Redux state, React props, 함수형 체인이 이 원칙 위에 돈다. `Array.prototype.sort()`가 원본을 바꾸는 것이 JS의 대표적 반(反)불변 함정.

javascript
// ❌ 변경(mutation)
const arr = [3, 1, 2];
arr.sort();                  // arr 자체가 바뀜!
arr.push(4);

// ✅ 불변 업데이트
const sorted = [...arr].sort();
const added  = [...arr, 4];
const without3 = arr.filter(n => n !== 3);

// 객체도 마찬가지
const user = { name: "짓친", age: 25 };
const older = { ...user, age: 26 };        // 새 객체
// ❌ user.age = 26                         // 원본 수정 금지

// toSorted/toReversed/toSpliced (2023+) 최신 JS
arr.toSorted();    // 원본 안 건드리고 새 배열

React는 참조 비교로 리렌더 판단(useMemo/useState). 원본을 mutate하면 React가 변화를 못 감지. 불변 갱신 필수.

고차함수(Higher-Order Function)는 "함수를 인자로 받거나 반환하는 함수". `map`·`filter`·`reduce`가 대표. 반복문 대신 이 체인을 쓰면 의도가 드러난다.

javascript
// for 루프 vs 함수형 체인
const users = [{name:"A",age:10}, {name:"B",age:30}, {name:"C",age:25}];

// ❌ 절차형
const names = [];
for (const u of users) {
  if (u.age >= 20) names.push(u.name.toUpperCase());
}

// ✅ 함수형 체인 (의도가 보임)
const names = users
  .filter(u => u.age >= 20)       // 성인만
  .map(u => u.name.toUpperCase()); // 이름 대문자로

// reduce — 누적
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

// 함수 반환 (클로저)
function multiplier(k) {
  return (x) => x * k;
}
const double = multiplier(2);
double(5);                       // 10

체이닝은 "파이프라인"을 그대로 코드화한 것. SQL의 `WHERE → SELECT`와 같은 감각.

현대 JS는 "함수형 성향의 멀티 패러다임". React 훅·Redux·Rx·Lodash fp·Ramda가 함수형. 완전히 함수형으로 가기보단 순수 함수·불변성·고차함수 3가지만 습관화해도 코드 품질이 뜀.

실기 드릴 2문항
edit실기 드릴 · 단답형

"같은 입력에 항상 같은 출력 + 사이드 이펙트 없음" 조건을 만족하는 함수의 이름은?

check_circle실기 드릴 · OX

`arr.sort()`는 원본 배열을 변경하지 않는다.