例#

1
// グローバル変数を変更する関数
2
function add(x, y) {
3
  globalVar += x + y;
4
}
5

6
// ファイル入出力を行う関数
7
function readFile(path) {
8
  const data = fs.readFileSync(path);
9
  return data;
10
}
11

12
// DOM を操作する関数
13
function changeColor(element) {
14
  element.style.color = "red";
15
}
16

17
// 状態変数を更新する関数
18
function updateState(state) {
19
  state.count++;
20
}

上記のコード例では、

• add 関数はグローバル変数 globalVar を変更します。
• readFile 関数はファイルを読み込み、その内容を返します。
• changeColor 関数は DOM 要素の色を変更します。
• updateState 関数は状態変数 state の count プロパティを更新します。

これらの関数はすべて、副作用を持っています。

サイドエフェクトを持つ関数の注意点#

サイドエフェクトを持つ関数を使用する場合は、以下の点に注意する必要があります。

• テストやデバッグが困難になる
• 意図しない副作用が発生する可能性がある
• コードの理解が難しくなる

副作用を持つ関数は、必要最低限に留め、純粋関数と組み合わせることで、コードの品質を向上させることができます。

純粋関数#

純粋関数とは、副作用を持たず、入力値のみを元に決定的出力を返す関数です。純粋関数は、テストやデバッグが容易で、意図しない副作用が発生する可能性がないという利点があります。

1
// 純粋関数
2
function add(x, y) {
3
  return x + y;
4
}
5

6
// 純粋関数
7
function filter(array, predicate) {
8
  return array.filter(predicate);
9
}

まとめ#

サイドエフェクトを持つ関数とは、関数自身が返す値以外の状態を変化させる関数です。サイドエフェクトを持つ関数を使用する場合は、テストやデバッグが困難になる、意図しない副作用が発生する可能性がある、コードの理解が難しくなるなどの点に注意する必要があります。副作用を持つ関数は、必要最低限に留め、純粋関数と組み合わせることで、コードの品質を向上させることができます。

関連記事#

Tree Shaking とは？