LoginSignup
3
3

「JS」パラメータに再び値を割り当ててはいけない

Posted at

背景 

以下のようなコードを書きましたが、書いてはいけないと言われたので、その理由について調べてみました。

function test(value) { // value パラメータ
  value = 13;          // パラメータ再び割り当て
  return value;
}
test(30);

関数内でパラメータの再割り当てるコードを書いてみました。どんな結果が出るか予測してみましょう。

var makePerson = function(favoriteColor, name, age) {
if (arguments.length < 3) {
    favoriteColor = "green";
    name = arguments[0];
    age = arguments[1];
}

return {
            name: name,
            age: age,
            favoriteColor: favoriteColor
        };
};

var person = makePerson("Joe", 18);
console.log(JSON.stringify(person));

結果は下のように出力されるようですが

{"name":"Joe","age":18,"favoriteColor":"green"}

実際はこのように出力されます。

{"name":"green","age":"green","favoriteColor":"green"}

関数パラメータとArgumentsオブジェクトの要素は同じメモリー住所を参照しているため、どちらかを変更すると両方が影響を受けるからです。

この例は良い例ではありませんが、パラメータに値を再割り当てすると予期しない動作をする可能性があることを示したかったのです。

結論

関数内でのパラメータの再割り当ては、以下の理由から避けるべきです。

  • 予期せぬ動作を引き起こす可能性があります。
  • 意図しない挙動をする可能性があります。
  • パラメータの変更を認知できない可能性があります。

そのため、関数内でパラメータに再割り当てを行う代わりに、新しい変数を使用することをお勧めします。


[参考]

  1. https://eslint.org/docs/latest/rules/no-param-reassign
  2. https://spin.atomicobject.com/javascript-don-t-reassign-your-function-arguments/
3
3
9

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3