freeCodeCamp/curriculum/challenges/japanese/02-javascript-algorithms-an.../functional-programming/avoid-mutations-and-side-ef...

2.8 KiB

id title challengeType forumTopicId dashedName
587d7b8e367417b2b2512b5e 関数型プログラミングを使用してミューテーションや副作用を回避する 1 301228 avoid-mutations-and-side-effects-using-functional-programming

--description--

まだ気づいていない方もいるかもしれませんが、 前回のチャレンジには tabClose() 関数の splice 呼び出しに問題がありました。 残念ながら、splice は呼び出しの対象となる元の配列を変更します。そのため、2 つ目の呼び出しでは変更後の配列が使用され、予期しない結果をもたらしました。

これははるかに大きなパターンの小さな一例にすぎません。変数、配列、またはオブジェクトに対して関数を呼び出すと、関数によってオブジェクトの変数などが変更されます。

関数型プログラミングの基本原則の一つは、何も変更を加えないことです。 変更はバグにつながります。 関数の引数やグローバル変数なども含めて「自分の関数は何も変更を加えない」という認識を持ちながらバグを防ぐ方が簡単です。

前の例では複雑な操作はありませんでしたが、splice メソッドによって元の配列が変更され、バグが発生しました。

すでに説明しましたが、関数型プログラミングでは、何らかの変更が生じることをミューテーションと呼び、その結果のことを副作用と呼びます。 関数は、理想的には純粋な関数、つまり、副作用を起こさない関数でなければなりません。

この原則を実践して、コード内の変数やオブジェクトを変更しないようにしましょう。

--instructions--

関数 incrementer のコードを記述して、グローバル変数 fixedValue の値を 1 増やして返してください。

--hints--

関数 incrementerfixedValue の値 (4) を変更してはいけません。

incrementer();
assert(fixedValue === 4);

incrementer 関数は、fixedValue 値よりも 1 大きい値を返す必要があります。

const __newValue = incrementer();
assert(__newValue === 5);

incrementer 関数は、グローバル変数 fixedValue の値に基づいて値を返す必要があります。

(function () {
  fixedValue = 10;
  const newValue = incrementer();
  assert(fixedValue === 10 && newValue === 11);
  fixedValue = 4;
})();

--seed--

--seed-contents--

// The global variable
let fixedValue = 4;

function incrementer() {
  // Only change code below this line


  // Only change code above this line
}

--solutions--

let fixedValue = 4

function incrementer() {
  return fixedValue + 1
}