함수형 프로그래밍이란 무엇이며 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 



<p><strong>문제</strong>: </p>

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


<hr>

<h3>
  
  
  <strong>기능적 방법</strong>
</h3>

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

<pre class="brush:php;toolbar:false">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 명령형

Aspect	Imperative	Functional
Data Mutation	Mutates the original data (e.g., push, splice)	Avoids mutation; creates new data structures
Readability	Step-by-step, more verbose	Declarative and concise
Side Effects	More prone to unexpected side effects	Pure functions eliminate side effects
Focus	How to achieve a task (manual looping)	What to achieve (use higher-order functions)
Tools Used	Loops, conditionals	map, filter, reduce, spread operator

측면

---

필수

기능성 데이터 변형

원본 데이터를 변경합니다(예: push, splice) 돌연변이를 방지합니다. 새로운 데이터 구조 생성

가독성

단계별, 더욱 장황한 설명 선언적이고 간결함 부작용 예상치 못한 부작용이 발생할 가능성이 더 높음 부작용을 제거하는 순수 함수

초점

작업을 달성하는 방법(수동 반복)

무엇 달성(고차 함수 사용) 사용된 도구 루프, 조건 매핑, 필터, 축소, 확산 연산자

---

? 함수형 프로그래밍을 선택하는 이유는 무엇인가요?

코드를

추론하고 테스트하기가 더 쉬워집니다. 부작용을 피하면 버그가 발생할 가능성이 줄어듭니다. 더 간결

하고

선언적하여 정신적 부담을 줄여줍니다.

너: “알았어! 함수형 프로그래밍은 데이터를 변경하지 않고 예측 가능하고 깔끔한 코드를 작성하는 데 중점을 둡니다. 그리고 읽기도 더 편해요!” 나: 그렇죠! 필수적에서 기능적으로 전환하면 JavaScript의 진정한 힘을 발휘할 수 있습니다. 작게 시작하여 맵, 필터, 축소를 사용하면 곧 전문가처럼 기능적으로 코딩할 수 있게 됩니다. 한 번 시도해 볼 준비가 되셨나요? 미래의 당신은 당신에게 감사할 것입니다! ?

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