可変長引数をデフォルト値として使用した場合の処理

Question

質問

javascriptの例文を見ていて、下記のコードの出力結果が何故答えのようになるのか理解できませんでした。
(x = { ...value })の部分の挙動がイマイチ理解できません。
引数xにはデフォルト値を代入していると思うのですが、引数を変えてみた場合
・{ ...value }　⇒　20, 20, 20, 40が出力
・{ value }　⇒　NaN, NaN, 20, 40が出力、
・value　⇒　20, 40, 80, 160が出力
という結果になります。
引数にこれらを取った場合の挙動の違いをご教授頂きたく。

例文の答え：
20, 20, 20, 40

const value = { number: 10 };
const multiply = (x = { ...value }) => {
console.log((x.number *= 2)); };

multiply();
multiply();
multiply(value);
multiply(value);

Answer 1

これは可変長引数ではなく、スプレッド構文です。別の形で書けば、(x = Object.assign({}, value))とほぼ同様な、コピーしたオブジェクトを作成しています。

• (x = { ...value })の場合、デフォルト引数での呼び出しでは毎回コピーしたオブジェクトを書き換えているので、デフォルト引数で何回呼び出しても20のままです。
• (x = { value })とした場合、xに入るオブジェクトは{ value: { number: 20 } }のようなものになります。x.valueは存在しないのでundefinedで、それを無理やり算術演算するとNaNになります。
• (x = value)とした場合、コピーではないので、x.number *= 2で元のvalue.numberも書き換わります。

Comments

[HoTo]

ありがとうございます！！

スプレッド構文なるものを知らなかったので混乱しました。。
各パターン丁寧に解説して頂いたのでBAに選ばせて頂きます。

Answer 2

{ ...value }はvalueのシャローコピーです。
Object リテラルで使う | スプレッド構文 - JavaScript | MDN

コピーなので、何度呼び出しても、元オブジェクトに影響はないため、20が返ってきます。

引数を渡した場合は、初期値が無視されるため、コピーではないオブジェクトが渡って、元オブジェクトの値が変更されるため、呼び出しごとに倍になります。console.log((x.number *= 2), x===value);として試してみればわかりやすいと思います。

Comments

[HoTo]

ありがとうございます！

ご教示頂いたlogを出してみたところ最初2回がシャローコピーになっていることが良く分かりました！
3回目以降はミュータブルなオブジェクトを引数で渡しているので値が書き換わっていたのですね。。。