클린 코드: 함수형 프로그래밍으로 부작용 관리-JS 튜토리얼-php.cn

클린 코드: 함수형 프로그래밍으로 부작용 관리

Mary-Kate Olsen

풀어 주다： 2025-01-10 22:29:45

원래의

368명이 탐색했습니다.

Clean Code: Managing Side Effects with Functional Programming

부작용으로 인해 코드를 예측할 수 없고 유지 관리가 어려워질 수 있습니다. 함수형 프로그래밍이 이를 효과적으로 처리하는 데 어떻게 도움이 되는지 살펴보겠습니다.

부작용은 무엇입니까?

함수가 입력을 받고 출력을 반환하는 것 이상의 작업을 수행하면 부작용이 발생합니다. 몇 가지 일반적인 부작용은 다음과 같습니다.

전역 변수 변경
입력 매개변수 수정
파일 또는 데이터베이스에 쓰기
API 호출하기
DOM 업데이트
콘솔에 로깅

부작용이 문제를 일으킬 수 있는 이유

다음은 문제가 되는 부작용을 보여주는 예입니다.

let userProfile = {
  name: "Alice Johnson",
  email: "alice@example.com",
  preferences: {
    theme: "dark",
    notifications: true
  }
};

function updateUserTheme(newTheme) {
  userProfile.preferences.theme = newTheme;
}

function toggleNotifications() {
  userProfile.preferences.notifications = !userProfile.preferences.notifications;
}

// Multiple functions modifying the same global state
updateUserTheme("light");
toggleNotifications();

console.log(userProfile); // State is unpredictable

로그인 후 복사

이 코드에는 몇 가지 문제가 있습니다.

전역 상태를 사용합니다
여러 함수로 동일한 데이터를 변경할 수 있습니다
변경 사항을 추적하기 어려워집니다
테스트가 복잡해짐

순수 기능을 갖춘 더 나은 솔루션

함수형 프로그래밍 원칙을 사용한 개선된 버전은 다음과 같습니다.

const createUserProfile = (name, email, theme, notifications) => ({
  name,
  email,
  preferences: {
    theme,
    notifications
  }
});

const updateTheme = (profile, newTheme) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    theme: newTheme
  }
});

const toggleNotifications = (profile) => ({
  ...profile,
  preferences: {
    ...profile.preferences,
    notifications: !profile.preferences.notifications
  }
});

// Usage
const initialProfile = createUserProfile(
  "Alice Johnson",
  "alice@example.com",
  "dark",
  true
);

const updatedProfile = updateTheme(initialProfile, "light");
const finalProfile = toggleNotifications(updatedProfile);

console.log(initialProfile); // Original state unchanged
console.log(finalProfile);   // New state with updates

로그인 후 복사

실제 예: 파일 작업

함수형 프로그래밍을 사용하여 파일 작업에서 필요한 부작용을 처리하는 방법은 다음과 같습니다.

// Separate pure business logic from side effects
const createUserData = (user) => ({
  id: user.id,
  name: user.name,
  createdAt: new Date().toISOString()
});

const createLogEntry = (error) => ({
  message: error.message,
  timestamp: new Date().toISOString(),
  stack: error.stack
});

// Side effect handlers (kept at the edges of the application)
const writeFile = async (filename, data) => {
  const serializedData = JSON.stringify(data);
  await fs.promises.writeFile(filename, serializedData);
  return data;
};

const appendFile = async (filename, content) => {
  await fs.promises.appendFile(filename, content);
  return content;
};

// Usage with composition
const saveUser = async (user) => {
  const userData = createUserData(user);
  return writeFile('users.json', userData);
};

const logError = async (error) => {
  const logData = createLogEntry(error);
  return appendFile('error.log', JSON.stringify(logData) + '\n');
};

로그인 후 복사

함수형 프로그래밍으로 부작용 처리

순수함수

   // Pure function - same input always gives same output
   const calculateTotal = (items) => 
     items.reduce((sum, item) => sum + item.price, 0);

   // Side effect wrapped in a handler function
   const processPurchase = async (items) => {
     const total = calculateTotal(items);
     await saveToDatabase(total);
     return total;
   };

로그인 후 복사

기능구성

   const pipe = (...fns) => (x) => 
     fns.reduce((v, f) => f(v), x);

   const processUser = pipe(
     validateUser,
     normalizeData,
     saveUser
   );

로그인 후 복사

데이터 변환

   const transformData = (data) => {
     const addTimestamp = (item) => ({
       ...item,
       timestamp: new Date().toISOString()
     });

     const normalize = (item) => ({
       ...item,
       name: item.name.toLowerCase()
     });

     return data
       .map(addTimestamp)
       .map(normalize);
   };

로그인 후 복사

순수 함수 테스트

순수 함수를 사용하면 테스트가 훨씬 간단해집니다.

describe('User Profile Functions', () => {
  const initialProfile = createUserProfile(
    'Alice',
    'alice@example.com',
    'dark',
    true
  );

  test('updateTheme returns new profile with updated theme', () => {
    const newProfile = updateTheme(initialProfile, 'light');

    expect(newProfile).not.toBe(initialProfile);
    expect(newProfile.preferences.theme).toBe('light');
    expect(initialProfile.preferences.theme).toBe('dark');
  });

  test('toggleNotifications flips the notifications setting', () => {
    const newProfile = toggleNotifications(initialProfile);

    expect(newProfile.preferences.notifications).toBe(false);
    expect(initialProfile.preferences.notifications).toBe(true);
  });
});

로그인 후 복사