함수형 프로그래밍이란 무엇이며 JavaScript로 어떻게 할 수 있나요?

당신: “안녕하세요, 함수형 프로그래밍에 대해 계속 듣고 있어요. 멋있게 들리지만 실제로는 무엇이며, 이미 JavaScript로 하고 있는 것과 어떻게 다릅니까?”

나: 좋은 질문이네요! 단계별로 나누어 함수형 프로그래밍(FP)과 전통적인 명령형 프로그래밍 코딩

? 기능형과 명령형의 차이점은 무엇인가요?

명령형 프로그래밍에서는 작업을 수행하는 방법에 대한 단계별 지침을 작성합니다. 이는 변수 업데이트, 루프 사용, 상태 직접 수정 등 일련의 작업에 관한 것입니다.

함수형 프로그래밍에서는 하고 싶은 일에 집중합니다. 순수 함수를 사용하고 직접적인 변형을 피하며 매핑, 필터, 축소와 같은 선언적 도구를 활용합니다.

사용자 목록 관리를 위한 CRUD(생성, 읽기, 업데이트, 삭제) 시나리오를 사용하는 나란한 예시를 통해 이를 살펴보겠습니다.

?️ 예시 1: 사용자 추가

필수적 방법

다음은 원래 배열을 변경하는 명령형 예입니다.

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

문제:

1. 변형: push() 메서드는 원래 배열을 수정합니다.
2. 부작용: 코드의 다른 부분이 사용자에 따라 달라지면 예상치 못한 영향을 받을 수 있습니다.

기능적 방법

다음은 배열을 변경하는 대신 새 배열을 반환하는 함수형 접근 방식입니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

혜택:

1. 변형 없음: 원래 사용자 배열은 그대로 유지됩니다.
2. 예측 가능: 순수 함수를 사용하면 동작을 쉽게 이해할 수 있습니다.

?️ 예 2: 사용자 업데이트

필수적 방법

다음은 배열 내부의 객체를 직접 변경하는 예입니다.

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function updateUser(users, id, newName) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].id === id) {
      users[i].name = newName; // Directly mutates the object
      break;
    }
  }
}

updateUser(users, 1, 'Alicia');
console.log(users);

문제:

1. Mutation: 배열 내부의 객체가 직접 업데이트됩니다.
2. 상세: for 루프는 사용자를 업데이트하는 방법을 컴퓨터에 명시적으로 알려줍니다.

기능적 방법

맵과 불변성을 사용하여 기능적으로 수행하는 방법은 다음과 같습니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

혜택:

1. 변형 없음: 새 배열을 반환하고 원본은 그대로 둡니다.
2. 선언적: map은 루프를 명시적으로 관리하지 않고 우리가 원하는 무엇에 초점을 맞춰 배열을 변환합니다.

?️ 예시 3: 사용자 삭제

필수적 방법

다음은 루프와 직접 수정을 사용하는 명령형 버전입니다.

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

문제:

1. 변형: splice()는 원래 배열을 수정합니다.
2. 복잡성: 수동 반복으로 인해 읽기가 더 어려워집니다.

기능적 방법

필터를 사용하면 다음과 같이 의도를 선언적으로 표현할 수 있습니다.

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

혜택:

1. 변형 없음: 필터가 새 배열을 생성합니다.
2. 깨끗하고 읽기 쉽습니다: 코드는 의도를 명확하게 전달합니다. 즉, 지정된 ID를 가진 사용자를 제외하고 사용자를 유지합니다.

? 요약 표: 기능적 vs 명령형

위 내용은 함수형 프로그래밍이란 무엇이며 JavaScript로 어떻게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!