TypeScript - 関数 - 引数の初期値と引数の省略
公開日:2019-02-08 更新日:2019-05-14
1. 概要
関数の引数の初期値と引数の省略についてです。
//引数の省略 ↓ 変数名の後ろに「?」を付けます
function 関数名(引数1の変数名?: 引数1の型): 戻り値の型 { 処理(); }
//引数の初期値 ↓
function 関数名(引数1の変数名: 引数1の型 = 初期値): 戻り値の型 { 処理(); }
2.1 サンプル - 引数の省略(その1)
引数名の後ろに「?」をつけると、引数を省略できます。
以下の例で value3 の「?」を削除すると、add(1, 2) は引数不一致でビルドエラーとなります。
以下の例で value3 の「?」を削除すると、add(1, 2) は引数不一致でビルドエラーとなります。
// 省略可能な引数
function add(value1: number, value2: number, value3?: number): number {
if (value3 === undefined) {
return value1 + value2;
} else {
return value1 + value2 + value3;
}
}
console.log(add(1, 2)); //3
console.log(add(1, 2, 3)); //6
2.2 サンプル - 引数の初期値と引数の省略(その2)
引数が未指定 or undefined だった場合の、初期値を指定することができます。
引数の初期値を指定して引数の省略ができますが、関数の処理としては、全て引数が指定されている状態の処理となるため、無駄な処理を実行している場合があります。
例えば、上記の add(10, 20) は、内部では 10 + 20 + 0 となり、「+ 0」と言う余分な処理を実行しています。
そのため、処理速度や記述量を考えて、「?」を使った引数省略と使い分ける必要があります。
// 引数の初期値
function add(value1: number, value2: number, value3: number = 0): number {
return value1 + value2 + value3;
}
console.log(add(10, 20, undefined)); //30
console.log(add(10, 20)); //30
console.log(add(10, 20, 30)); //60
引数の初期値を指定して引数の省略ができますが、関数の処理としては、全て引数が指定されている状態の処理となるため、無駄な処理を実行している場合があります。
例えば、上記の add(10, 20) は、内部では 10 + 20 + 0 となり、「+ 0」と言う余分な処理を実行しています。
そのため、処理速度や記述量を考えて、「?」を使った引数省略と使い分ける必要があります。