名前付き引数の中括弧の意味・中括弧（引数）の有無による関数挙動の違いについて

Question

JavaScriptの初学者で、現在 名前付き引数（ES2015)の使い方について学習しています

let getTriangle = ({ base = 1, height = 1 }) => {
    return base * height / 2;
}

上記のようなシンプルな関数（三角形の面積を計算する。底辺・高さに関する引数がなかった場合はデフォルトで1とする）を定義して、細かい挙動を確認したところ、以下については想定通りの挙動が確かめられました。

• 実行コマンド1：print(getTriangle({ base:5, height:4 }));
• 出力1：10
• 実行コマンド2：print(getTriangle({ base:5 }));
• 出力2：2.5

ただし、以下について実行コマンド3では、0.5がprintされることを期待していたのですが
Exception: TypeError: Right side of assignment cannot be destructuredというエラーに
なってしまいました。一方、実行コマンド4のようにしたところ、正常に関数が実行されました。

• 実行コマンド3：print(getTriangle());
• 出力3：Exception: TypeError: Right side of assignment cannot be destructured
• 実行コマンド4：print(getTriangle({}));
• 出力4：0.5
• 実行コマンド5：print(getTriangle(1));
• 出力5：0.5

冒頭のような関数定義の場合に、引数なしで実行した場合にエラーが生じてしまうのはなぜでしょうか。
ご教示いただけると幸いです。

Answer 1

冒頭のような関数定義の場合に、引数なしで実行した場合にエラーが生じてしまうのはなぜでしょうか。

関数を引数なしで渡すと、それはundefinedを渡したものとみなされます。そして、分割代入でundefinedからプロパティを参照しようとしても、デフォルト値を取得する前にプロパティ参照でエラーとなってしまいます。

このような事態を避けるために、オブジェクト自体のデフォルト値も別途で必要です。

let getTriangle = ({ base = 1, height = 1 } = {}) => {
    return base * height / 2;
}

Comments

[komicool]

簡潔でわかりやすい説明をありがとうございました。納得しました。