こんにちは、Reiです。
プログラムを書いていると、
本来渡されるはずのデータが渡されず、
結果が undefined（値が入っていない状態）になってしまうことがあります。
例えば、
・関数に値を渡し忘れてしまう
・オブジェクトの中に必要なデータが入っていない
・外部データの一部が欠けている
といった場面です。
こうしたときに役立つのが
「デフォルト値（Default Value）」 です。
デフォルト値とは、
値が渡されなかったときに使われる 予備の値 です。
あらかじめ設定しておくことで、
データが足りない場合でも処理が止まらない
安定したプログラムを書くことができます。
JavaScriptではいくつかの設定方法がありますが、
まずは基本となる書き方から整理していきましょう！
デフォルト値が必要な理由
まずは、
デフォルト値を使わない場合を見てみましょう。
const sayHello = (name) => { console.log(こんにちは、${name}さん`);};
sayHello();このコードでは、name に値が渡されていないため
こんにちは、undefinedさん
と表示されてしまいます。
このように、
値が渡されないと undefined が表示されてしまうことがあります。
値が渡されないときの「予備の値」を設定する
デフォルト値は、
関数の引数で設定することができます。
書き方は次のようになります。
const 関数名 = (引数 = デフォルト値) => {
処理
};
このように書くことで、
引数が渡されなかったときに自動で使われる値 を設定することができます。
コードサンプルで理解する
const sayHello = (name = "ゲスト") => {
console.log(`こんにちは、${name}さん！`);
};
sayHello("田中");
sayHello();
このコードでは、引数あり だと次のような処理が行われます。
① 関数を呼び出すsayHello("田中")
② 引数に値が渡されるname = "田中"
③ メッセージを表示
こんにちは、田中さん！
次に、引数なし だと次のような処理が行われます。
① 引数なしで関数を呼び出すsayHello()
② 引数が undefined のためデフォルト値が使われるname = "ゲスト"
③ メッセージを表示
こんにちは、ゲストさん！
このように、
引数が undefined の場合だけ
デフォルト値が使われます。
分割代入でデフォルト値を設定する
デフォルト値は、
分割代入と組み合わせて使うこともできます。
オブジェクトの中に
特定のデータがない場合に便利です。
const user = {
name: "佐藤"
};
const { name, age = 20 } = user;
console.log(`${name}さんの年齢は${age}歳です`);
このコードでは、user オブジェクトの中に age が存在しません。
そのため、
分割代入で設定した デフォルト値 20 が age に代入されます。
その結果、
佐藤さんの年齢は20歳です
と表示されます。
このように、
オブジェクトに値が存在しない場合でも
デフォルト値を使って安全に処理を続けることができます。
デフォルト値が使われるのは undefined のときだけ
ここで、
ひとつ重要なポイントがあります！
デフォルト値は
値が undefined の場合だけ 使用されるということです。
次のコードを見てみましょう。
const testFunc = (value = "初期値") => {
console.log(value);
};
testFunc(null);
この場合、結果は null と表示されます。なぜでしょうか？
JavaScriptでは、
undefined → 値が設定されていない状態null → 意図的に空の値が入っている状態
と扱われるためです。
デフォルト値は、
「値が設定されていない場合」にだけ適用される仕組みになっています。
そのため、
「未設定ならデフォルト値を使う」
というルールでコードを書くことが大切です。
デフォルト値を設定するメリット
デフォルト値を設定しておくと、
プログラムをより安全に書くことができます。
例えば、
・値の渡し忘れによるバグを防げる
・データが欠けていても処理が止まりにくい
・コードの意図が分かりやすくなる
といったメリットがあります。
特に、
外部データを扱うプログラムでは
「値が必ずあるとは限らない」場面がよくあります。
そのため、
デフォルト値を設定する習慣をつけておくと
安定したコードを書くことができます。
まとめ
ここまで、JavaScriptの デフォルト値 を見てきました。
デフォルト値は、
値が渡されない場合の「予備の値」を設定する仕組みです。
＼＼ 今回のまとめ ／／
・ デフォルト値は「値がないときに使う予備の値」
・ 関数の引数で 引数 = 値 と書くことで設定できる
・ 分割代入と組み合わせて使うこともできる
・ デフォルト値が使われるのは undefined のときだけ
・ 値の渡し忘れによるバグを防ぐことができる
デフォルト値を使えるようになると、
予期しない undefined によるエラーを減らすことができます。
コードを書きながら、
どの場面でデフォルト値を使うとよいか
少しずつ意識してみましょう！
次は、
オブジェクトや配列をコピーしたり、
データをまとめたりできる便利な書き方「スプレッド構文（Spread構文）」を見ていきましょう！
コメント