ES6（デフォルト引数）

はじめに

　デフォルト引数、名前の通り引数(実パラメータ)に値を入れなくてもパラメータ(仮パラメータ)にデフォルト（初期値）として設定されている引数のことです。コンストラクター関数からクラスで書くほうが直感的でわかりやすかったのと同様に、デフォルト引数が使えるまで（ES6 が導入されるまで）の違いを以下のコードで確認しましょう。

//旧
function multiply(a) {
  if (a === undifined) {
    a === 5;
  }
  return a * a;
}
console.log(multiply())  //25

//新（デフォルト引数）
function multiply(a = 5) {
  return a * a;
}
console.log(multiply())  //25

}

デフォルト引数の基本的な使い方は上記のコードで話が終わってしまいますが、ここでは少し応用した例を見ていきます。

①引数から引数を扱う

function numbers(n, m = n * 3, l = n + m) {
  console.log(n,m,l);
}
numbers(3) //3 9 12

このようにnの値をnumbersの引数に入れるだけでmやlの値が自動的に評価されます。

②分割代入との利用

const obj = {
  prop1: "naruto",
  prop3: "sakura",
};

function chara({ prop1, prop2 = "sai", prop3 }) { //prop2にはデフォルト引数で'sai'と初期値を与えている。
  return `${prop1} ${prop2} ${prop3}`;
}
const cha = chara(obj);
console.log(cha); //naruto sai sakura

①、②のようにデフォルト引数を使うと、引数に対しかなり自由を利かすことができます。