79 lines
2.8 KiB
Markdown
79 lines
2.8 KiB
Markdown
|
---
|
||
|
|
id: 587d7b8e367417b2b2512b5e
|
||
|
|
title: 関数型プログラミングを使用してミューテーションや副作用を回避する
|
||
|
|
challengeType: 1
|
||
|
|
forumTopicId: 301228
|
||
|
|
dashedName: avoid-mutations-and-side-effects-using-functional-programming
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
まだ気づいていない方もいるかもしれませんが、 前回のチャレンジには `tabClose()` 関数の `splice` 呼び出しに問題がありました。 残念ながら、`splice` は呼び出しの対象となる元の配列を変更します。そのため、2 つ目の呼び出しでは変更後の配列が使用され、予期しない結果をもたらしました。
|
||
|
|
|
||
|
|
これははるかに大きなパターンの小さな一例にすぎません。変数、配列、またはオブジェクトに対して関数を呼び出すと、関数によってオブジェクトの変数などが変更されます。
|
||
|
|
|
||
|
|
関数型プログラミングの基本原則の一つは、何も変更を加えないことです。 変更はバグにつながります。 関数の引数やグローバル変数なども含めて「自分の関数は何も変更を加えない」という認識を持ちながらバグを防ぐ方が簡単です。
|
||
|
|
|
||
|
|
前の例では複雑な操作はありませんでしたが、`splice` メソッドによって元の配列が変更され、バグが発生しました。
|
||
|
|
|
||
|
|
すでに説明しましたが、関数型プログラミングでは、何らかの変更が生じることを<dfn>ミューテーション</dfn>と呼び、その結果のことを<dfn>副作用</dfn>と呼びます。 関数は、理想的には<dfn>純粋な関数</dfn>、つまり、副作用を起こさない関数でなければなりません。
|
||
|
|
|
||
|
|
この原則を実践して、コード内の変数やオブジェクトを変更しないようにしましょう。
|
||
|
|
|
||
|
|
# --instructions--
|
||
|
|
|
||
|
|
関数 `incrementer` のコードを記述して、グローバル変数 `fixedValue` の値を 1 増やして返してください。
|
||
|
|
|
||
|
|
# --hints--
|
||
|
|
|
||
|
|
関数 `incrementer` は `fixedValue` の値 (`4`) を変更してはいけません。
|
||
|
|
|
||
|
|
```js
|
||
|
|
incrementer();
|
||
|
|
assert(fixedValue === 4);
|
||
|
|
```
|
||
|
|
|
||
|
|
`incrementer` 関数は、`fixedValue` 値よりも 1 大きい値を返す必要があります。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const __newValue = incrementer();
|
||
|
|
assert(__newValue === 5);
|
||
|
|
```
|
||
|
|
|
||
|
|
`incrementer` 関数は、グローバル変数 `fixedValue` の値に基づいて値を返す必要があります。
|
||
|
|
|
||
|
|
```js
|
||
|
|
(function () {
|
||
|
|
fixedValue = 10;
|
||
|
|
const newValue = incrementer();
|
||
|
|
assert(fixedValue === 10 && newValue === 11);
|
||
|
|
fixedValue = 4;
|
||
|
|
})();
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```js
|
||
|
|
// The global variable
|
||
|
|
let fixedValue = 4;
|
||
|
|
|
||
|
|
function incrementer() {
|
||
|
|
// Only change code below this line
|
||
|
|
|
||
|
|
|
||
|
|
// Only change code above this line
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```js
|
||
|
|
let fixedValue = 4
|
||
|
|
|
||
|
|
function incrementer() {
|
||
|
|
return fixedValue + 1
|
||
|
|
}
|
||
|
|
```
|