TypeScript - 関数 - 引数の初期値と引数の省略

公開日:2019-02-08 更新日:2019-05-14

1. 概要

関数の引数の初期値と引数の省略についてです。

//引数の省略                ↓ 変数名の後ろに「?」を付けます
function 関数名(引数1の変数名?: 引数1の型): 戻り値の型 { 処理(); }

//引数の初期値                              ↓
function 関数名(引数1の変数名: 引数1の型 = 初期値): 戻り値の型 { 処理(); }

2.1 サンプル - 引数の省略(その1)

引数名の後ろに「?」をつけると、引数を省略できます。
以下の例で 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 だった場合の、初期値を指定することができます。

//                                                      引数の初期値
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」と言う余分な処理を実行しています。
そのため、処理速度や記述量を考えて、「?」を使った引数省略と使い分ける必要があります。