순수 함수와 함수형 프로그래밍

// ✅ 순수 함수: 같은 입력에 같은 출력, 부수 효과 없음
function add(a, b) {
  return a + b;
}
 
add(2, 3); // 5
add(2, 3); // 5 - 항상 같은 결과
 
// ✅ 순수 함수: 배열을 변경하지 않고 새 배열 반환
function addItem(array, item) {
  return [...array, item]; // 원본 배열을 변경하지 않음
}
 
const original = [1, 2, 3];
const newArray = addItem(original, 4);
// original: [1, 2, 3] - 원본 유지
// newArray: [1, 2, 3, 4]

// ❌ 비순수: 외부 변수에 의존 (부수 효과 발생)
let count = 0;
 
function increment() {
  count++; // 외부 상태 변경
  return count;
}
 
increment(); // 1
increment(); // 2 - 같은 입력(없음)에도 다른 출력
 
// ❌ 비순수: 부수 효과가 있는 함수
function addAndLog(a, b) {
  console.log(`Adding ${a} + ${b}`); // 부수 효과: 콘솔 출력
  return a + b;
}

// 실제 웹 애플리케이션의 필수 부수 효과들
async function registerUser(userData) {
  // 부수 효과 1: 사용자 입력 검증 (DOM 읽기)
  const formData = document.getElementById('userForm').value;
 
  // 부수 효과 2: 네트워크 요청
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify(userData)
  });
 
  // 부수 효과 3: 데이터베이스 저장
  const user = await response.json();
 
  // 부수 효과 4: UI 업데이트
  document.getElementById('message').textContent = '회원가입 완료!';
 
  // 부수 효과 5: 로컬 스토리지 저장
  localStorage.setItem('userId', user.id);
 
  return user;
}

// ✅ 순수 함수: 비즈니스 로직만 담당
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}
 
function applyDiscount(total, discountRate) {
  return total * (1 - discountRate);
}
 
function formatCurrency(amount) {
  return `₩${amount.toLocaleString()}`;
}
 
// ❌ 부수 효과: 프로그램 경계에 위치 (진입점)
async function checkout(cartId, discountCode) {
  // 부수 효과: DB에서 데이터 읽기
  const items = await database.getCartItems(cartId);
  const discount = await database.getDiscount(discountCode);
 
  // ✅ 순수 함수 체인: 핵심 로직
  const total = calculateTotal(items);
  const finalAmount = applyDiscount(total, discount.rate);
  const formatted = formatCurrency(finalAmount);
 
  // 부수 효과: 결과 저장 및 출력
  await database.saveOrder({ items, total: finalAmount });
  console.log(`결제 금액: ${formatted}`);
 
  return finalAmount;
}

// ❌ 나쁜 예: 원본 배열/객체 변경
function addItemBad(cart, newItem) {
  cart.items.push(newItem); // 부수 효과: 원본 변경
  cart.total += newItem.price;
  return cart;
}
 
// ✅ 좋은 예: 새 객체 반환
function addItemGood(cart, newItem) {
  return {
    ...cart,
    items: [...cart.items, newItem], // 새 배열 생성
    total: cart.total + newItem.price
  };
}
 
// ✅ 불변 메서드 체인
function filterExpensiveItems(items, maxPrice) {
  return items
    .filter(item => item.price <= maxPrice) // 새 배열 반환
    .map(item => ({ ...item, discounted: true })) // 새 객체들의 배열
    .sort((a, b) => a.price - b.price); // 정렬된 새 배열
}

// ✅ 순수 함수: 데이터 변환만 담당
function processUserData(user) {
  return {
    ...user,
    name: user.name.toUpperCase(),
    email: user.email.toLowerCase(),
    registered: true,
    createdAt: new Date().toISOString() // 시간은 인자로 받는 게 더 순수하지만 실용적 타협
  };
}
 
function validateUser(user) {
  const errors = [];
  if (!user.email.includes('@')) errors.push('Invalid email');
  if (user.password.length < 8) errors.push('Password too short');
  return { valid: errors.length === 0, errors };
}
 
// ❌ 부수 효과: 별도 함수로 명확히 분리
async function registerUser(userData) {
  // 순수 함수로 검증
  const validation = validateUser(userData);
  if (!validation.valid) {
    throw new Error(validation.errors.join(', '));
  }
 
  // 순수 함수로 데이터 변환
  const processedUser = processUserData(userData);
 
  // 부수 효과: 저장 및 알림
  await database.save(processedUser); // 부수 효과
  await emailService.sendWelcome(processedUser.email); // 부수 효과
 
  return processedUser;
}

// ✅ 순수 컴포넌트: 렌더링 로직
function ShoppingCart({ items }) {
  // 순수 함수로 계산
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const itemCount = items.length;
 
  // 순수한 JSX 반환
  return (
    <div>
      <h2>장바구니 ({itemCount}개)</h2>
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name} - ₩{item.price}</li>
        ))}
      </ul>
      <p>총액: ₩{total}</p>
    </div>
  );
}
 
// ❌ 부수 효과: useEffect로 격리
function ShoppingCartContainer() {
  const [items, setItems] = useState([]);
 
  // 부수 효과: 데이터 페칭
  useEffect(() => {
    fetch('/api/cart')
      .then(res => res.json())
      .then(data => setItems(data)); // 상태 업데이트
  }, []);
 
  // 순수 컴포넌트 렌더링
  return <ShoppingCart items={items} />;
}

// ✅ 순수 함수: Reducer
function cartReducer(state = { items: [], total: 0 }, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
        total: state.total + action.payload.price
      };
    case 'REMOVE_ITEM':
      const newItems = state.items.filter(item => item.id !== action.payload);
      return {
        ...state,
        items: newItems,
        total: newItems.reduce((sum, item) => sum + item.price, 0)
      };
    default:
      return state;
  }
}
 
// ❌ 부수 효과: Middleware (Redux Thunk)
function fetchCart() {
  return async (dispatch) => {
    // 부수 효과: API 호출
    const response = await fetch('/api/cart');
    const items = await response.json();
 
    // 순수 함수 호출: dispatch
    dispatch({ type: 'SET_ITEMS', payload: items });
  };
}

import { pipe } from 'fp-ts/function';
import * as IO from 'fp-ts/IO';
import * as IOE from 'fp-ts/IOEither';
import * as Console from 'fp-ts/Console';
 
// ✅ 순수 함수: 데이터 변환
const processOrder = (order: Order) => ({
  ...order,
  total: order.items.reduce((sum, item) => sum + item.price, 0),
  processedAt: new Date().toISOString()
});
 
// IO로 부수 효과 캡슐화
const logOrder = (order: Order): IO.IO<void> =>
  Console.log(`Processing order ${order.id}`);
 
// tap 패턴: 부수 효과를 수행하되 원본 값 유지
const saveOrderWithLogging = (order: Order) =>
  pipe(
    IOE.of(order),
    IOE.tap(() => logOrder(order)), // 로깅 부수 효과
    IOE.tapIO(() => Console.log(`Total: ${order.total}`)) // 또 다른 부수 효과
  );
 
// 실행 시점에 부수 효과 발생
const result = saveOrderWithLogging(processOrder(order))();

// Either로 에러 처리를 순수하게
import * as E from 'fp-ts/Either';
 
const validateEmail = (email: string): E.Either<string, string> =>
  email.includes('@')
    ? E.right(email)
    : E.left('Invalid email');
 
const validatePassword = (password: string): E.Either<string, string> =>
  password.length >= 8
    ? E.right(password)
    : E.left('Password too short');
 
// 순수한 함수 체인
const validateUser = (email: string, password: string) =>
  pipe(
    validateEmail(email),
    E.chain(() => validatePassword(password))
  );

// ❌ 문제 상황: 원본 배열 변경
const originalCart = [
  { id: 1, name: '사과', price: 1000 }
];
 
function addItem(cart, newItem) {
  cart.push(newItem); // 원본 변경!
  return cart;
}
 
const updatedCart = addItem(originalCart, { id: 2, name: '바나나', price: 1500 });
 
console.log(originalCart);
// [{ id: 1, name: '사과', price: 1000 }, { id: 2, name: '바나나', price: 1500 }]
// 😱 원본이 변경되어 버렸다!
 
console.log(originalCart === updatedCart); // true
// 같은 참조를 가리키므로 React는 변경을 감지하지 못함

// 실제 버그 발생 예시
function processOrders(orders) {
  const highPriorityOrders = orders.filter(o => o.priority === 'high');
  highPriorityOrders.sort((a, b) => b.amount - a.amount); // sort는 원본 변경!
 
  return {
    high: highPriorityOrders,
    all: orders // 😱 orders도 정렬되어 버림 (filter는 새 배열이지만 같은 객체 참조)
  };
}

// 배열 복사
const original = [1, 2, 3];
const newArray = [...original, 4]; // [1, 2, 3, 4]
// original은 [1, 2, 3] 유지
 
// 객체 복사
const user = { name: 'John', age: 30 };
const updatedUser = { ...user, age: 31 }; // { name: 'John', age: 31 }
// user는 { name: 'John', age: 30 } 유지

const numbers = [1, 2, 3, 4, 5];
 
// ✅ 불변 메서드 (새 배열 반환)
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]
const sum = numbers.reduce((acc, n) => acc + n, 0); // 15
const sliced = numbers.slice(1, 3); // [2, 3]
const concatenated = numbers.concat([6, 7]); // [1, 2, 3, 4, 5, 6, 7]
 
// ❌ 가변 메서드 (원본 변경) - 사용 주의!
numbers.push(6); // 원본 변경
numbers.pop(); // 원본 변경
numbers.sort(); // 원본 변경
numbers.reverse(); // 원본 변경
numbers.splice(1, 1); // 원본 변경

// ❌ 얕은 복사의 함정
const user = {
  name: 'John',
  address: {
    city: 'Seoul',
    zipCode: '12345'
  }
};
 
const updated = { ...user };
updated.address.city = 'Busan'; // 😱 중첩 객체는 같은 참조!
 
console.log(user.address.city); // 'Busan' - 원본도 변경됨
 
// ✅ 깊은 복사
const properUpdate = {
  ...user,
  address: {
    ...user.address,
    city: 'Busan'
  }
};
 
console.log(user.address.city); // 'Seoul' - 원본 유지
console.log(properUpdate.address.city); // 'Busan'

// React는 참조 동일성(===)으로 변경 감지
function ShoppingCart() {
  const [items, setItems] = useState([]);
 
  // ❌ 잘못된 방법: 원본 변경
  const addItemWrong = (newItem) => {
    items.push(newItem); // 원본 변경
    setItems(items); // React가 변경을 감지하지 못함 (같은 참조)
  };
 
  // ✅ 올바른 방법: 새 배열 생성
  const addItemRight = (newItem) => {
    setItems([...items, newItem]); // 새 배열 생성
  };
 
  // ✅ 함수형 업데이트
  const addItemBest = (newItem) => {
    setItems(prevItems => [...prevItems, newItem]);
  };
 
  return (/* ... */);
}

// ✅ Redux Reducer는 반드시 불변성 유지
function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      // ✅ 새 배열 반환
      return [...state, action.payload];
 
    case 'TOGGLE_TODO':
      // ✅ map으로 새 배열 생성
      return state.map(todo =>
        todo.id === action.payload.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
 
    case 'DELETE_TODO':
      // ✅ filter로 새 배열 생성
      return state.filter(todo => todo.id !== action.payload.id);
 
    default:
      return state;
  }
}

import produce from 'immer';
 
// ❌ 복잡한 중첩 업데이트 (순수 JS)
const state = {
  users: [
    { id: 1, name: 'John', todos: [{ id: 1, text: 'Learn React', done: false }] }
  ]
};
 
const newState = {
  ...state,
  users: state.users.map(user =>
    user.id === 1
      ? {
          ...user,
          todos: user.todos.map(todo =>
            todo.id === 1
              ? { ...todo, done: true }
              : todo
          )
        }
      : user
  )
};
 
// ✅ Immer로 간단하게
const newStateWithImmer = produce(state, draft => {
  // draft는 변경 가능한 것처럼 작성
  const user = draft.users.find(u => u.id === 1);
  const todo = user.todos.find(t => t.id === 1);
  todo.done = true;
  // Immer가 자동으로 불변 업데이트 수행
});

// React.memo는 props 참조 비교
const TodoItem = React.memo(({ todo }) => {
  console.log('Rendering TodoItem');
  return <li>{todo.text}</li>;
});
 
// ✅ 불변 업데이트 시 변경된 항목만 재렌더링
const todos = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Learn Redux' }
];
 
const newTodos = todos.map(todo =>
  todo.id === 1
    ? { ...todo, text: 'Learn React Hooks' } // 새 객체
    : todo // 같은 참조 재사용
);
// id: 1인 TodoItem만 재렌더링