関数型プログラミングとは何ですか?JavaScript でどのように実行できるのですか?

あなた: 「関数型プログラミングについてよく聞きます。クールに聞こえますが、実際には何ですか? JavaScript ですでに行っていることとどう違うのですか?」

私: 素晴らしい質問ですね!段階的に説明し、関数型プログラミング (FP) と従来の命令型コーディングを比較してみましょう。

---

? 関数型と命令型の違いは何ですか?

命令型プログラミングでは、何かを行う方法について段階的な指示を書きます。変数の更新、ループの使用、状態の直接変更など、一連のタスクがすべてです。

関数型プログラミングでは、何をしたいに焦点を当てます。純粋関数を使用し、直接の変更を避け、map、filter、reduce などの宣言型ツールを活用します。

ユーザーのリストを管理するための 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. Mutation: 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. 変更なし: 元の users 配列は変更されません。
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. 宣言型: マップはループを明示的に管理せずに、必要な内容、つまり配列の変換に焦点を当てます。

---

?️ 例 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. Mutation: 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 を持つユーザー以外のユーザーを保持するという意図を明確に伝えています。

---

? 概要表: 関数型と命令型

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

アスペクト

---

命令的

機能 データの変更

元のデータを変更します (プッシュ、スプライスなど) 突然変異を回避します。新しいデータ構造を作成します

可読性

ステップバイステップ、より詳細 宣言的で簡潔 副作用 予期せぬ副作用が発生しやすい 純粋な関数は副作用を排除します

フォーカス

タスクを達成する方法 (手動ループ)

何を達成するか (高階関数を使用) 使用したツール ループ、条件 マップ、フィルター、リデュース、スプレッド演算子

---

? 関数型プログラミングを選ぶ理由

コードの

推論とテストが容易になります。 副作用を回避するとバグが発生する可能性が低くなります。 より簡潔

かつ

宣言的なので、精神的な負担が軽減されます。

あなた: 「分かった！関数型プログラミングは、データを変更せずに、予測可能なクリーンなコードを書くことに重点を置いています。そして読みやすくなりました！」 私: その通りです! 命令型から機能型に移行することで、JavaScript の真の力を解き放つことができます。マップ、フィルター、リデュースを使用して、小さなことから始めれば、すぐにプロのように機能的にコーディングできるようになります。 試してみる準備はできましたか?未来のあなたはあなたに感謝するでしょう！ ?

以上が関数型プログラミングとは何ですか?JavaScript でどのように実行できるのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。