Zenn
🟨

サイドエフェクトを持つ関数とは？

2024/04/03に公開
JavaScript
tech

サイドエフェクトを持つ関数とは、関数自身が返す値以外の状態を変化させる関数を指します。具体的には、以下のいずれかに該当する関数です。

  • グローバル変数や静的変数を変更する関数
  • ファイル入出力を行う関数
  • DOM を操作する関数
  • 状態変数を更新する関数

これらの関数は、呼び出すたびに状態が変化するため、テストやデバッグが困難になることがあります。また、意図しない副作用が発生する可能性もあります。

例 

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

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

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

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

上記のコード例では、

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

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

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

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

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

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

純粋関数

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

例 

// 純粋関数
function add(x, y) {
  return x + y;
}

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

上記のコード例では、

  • add 関数は入力値 x と y を元に、常に同じ出力を返します。
  • filter 関数は入力値 array と predicate を元に、常に同じ出力を返します。

これらの関数はどちらも、純粋関数です。

まとめ

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

関連記事

Tree Shaking とは？

https://zenn.dev/btc/articles/240403_tree_shaking

Discussion