デフォルト引数 (default parameter)

引数の値がundefinedのとき、代わりの値を指定できるのがデフォルト引数(default parameter)です。

デフォルト引数の構文

JavaScriptのデフォルト引数は、引数の右に=とデフォルト値を書きます。

js
// 関数宣言
function 関数名(引数 = デフォルト値) {}
// アロー関数
(引数 = デフォルト値) => {};

js
// 関数宣言
function 関数名(引数 = デフォルト値) {}
// アロー関数
(引数 = デフォルト値) => {};

TypeScriptで、型注釈とデフォルト引数の両方を書く場合は、型注釈のほうを先に書きます。

ts
// 関数宣言
function 関数名(引数: 型 = デフォルト値) {}
// アロー関数
(引数: 型 = デフォルト値) => {};

ts
// 関数宣言
function 関数名(引数: 型 = デフォルト値) {}
// アロー関数
(引数: 型 = デフォルト値) => {};

undefinedのときデフォルト値が使われる

JavaScriptの引数は省略するとundefinedになります。

js
function foo(x) {
  console.log(x);
}
foo();
undefined

js
function foo(x) {
  console.log(x);
}
foo();
undefined

デフォルト引数は、引数がundefinedのときに、その値が変わりに代入されます。たとえば、次の例の関数呼び出しは、引数を渡していないのでxはundefinedです。そのため、デフォルト値1が代入されます。

ts
function foo(x = 1) {
  console.log(x);
}
foo();
1

ts
function foo(x = 1) {
  console.log(x);
}
foo();
1

次のように、引数にundefinedを渡す場合も、デフォルト値が代入されます。

ts
foo(undefined);
1

ts
foo(undefined);
1

引数がnullのときは、デフォルト引数は適用されません。ご注意ください。

js
function foo(x = 1) {
  console.log(x);
}
foo(null);
null

js
function foo(x = 1) {
  console.log(x);
}
foo(null);
null

引数リストの途中に書ける

JavaScriptのデフォルト引数は、デフォルト値を持たない引数の前に書くこともできます。

js
function foo(x, y = 2, z) {
  console.log(x, y, z);
}
foo(1, undefined, 3);
1 2 3

js
function foo(x, y = 2, z) {
  console.log(x, y, z);
}
foo(1, undefined, 3);
1 2 3

初期化処理が書ける

JavaScriptのデフォルト値には式が書けます。

js
function foo(x = 2 * 2) {}

js
function foo(x = 2 * 2) {}

式が書けるので、関数呼び出しも書けます。

js
function foo(x = parseInt("1.5")) {}

js
function foo(x = parseInt("1.5")) {}

非同期処理は書けない

ただし、awaitを使って、非同期関数を呼び出すような処理は書けません。

ts
async function foo(x = await Promise.resolve(1)) {}
'await' expressions cannot be used in a parameter initializer.2524'await' expressions cannot be used in a parameter initializer.

ts
async function foo(x = await Promise.resolve(1)) {}
'await' expressions cannot be used in a parameter initializer.2524'await' expressions cannot be used in a parameter initializer.

型推論が効く

TypeScriptでは、デフォルト引数があると、引数の型推論が効きます。そのため、デフォルト引数が型注釈を省略することもできます。

ts
function foo(x = 1) {}
            
(parameter) x: number

ts
function foo(x = 1) {}
            
(parameter) x: number

学びをシェアする

・JavaScriptのデフォルト引数は引数がundefinedのとき使われる値
・構文: function 関数名(引数: 型 = デフォルト値) {}
・nullのときはデフォルト値にならない
・引数の途中に書ける
・簡単な初期化処理も書ける
・TypeScriptでは型推論が効く

『サバイバルTypeScript』より

この内容をXにポストする