JavaScriptで可変長引数
create: 2018-9-22
JavaScript 新人向けTIPS

aruguments はもう古い? イマドキの可変長引数参照

JavaScript で何個来るかわからない、可変長引数を参照することってありますよね。
今まではargumentsを使っていたのではないでしょうか。

暗黙オブジェクト: arguments を使う

こんな感じで、引数に何が来るかわからないけれども使いたいときがあります。

function test() {
	console.log(arguments);
}

test(1,2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]

まあ 2 つの引数くらいなら黙って定義すればいいのですけれど。
関数をラップして呼び出すときとか、applyメソッドで呼び出しますよね。

// console.logの動作を変更する
!function() {
	let org = console.log

	console.log = function() {
		org('console.logを横取りしてから何事もなかったようにコール');
		org.apply(this, arguments);
	}
}();

console.log('hello!');
// console.logを横取りしてから何事もなかったようにコール
// hello!

でもこれだとapplyが出てきたりthisが出てきたりでやな感じですね。

可変長引数を使う

可変長引数で受け取ると簡単です!

// console.logの動作を変更する
!function() {
	let org = console.log

	console.log = function(...args) { // ← 注目!
		org('console.logを横取りしてから何事もなかったようにコール');
		org(...args); // ← 注目!
	}
}();

console.log('hello!');
// console.logを横取りしてから何事もなかったようにコール
// hello!

applythisが消えてスッキリしました!
もちろん、コンテキストthisを明示的に設定したい場合はこの限りではありません。

可変長引数のアクセス

もちろん引数に対して順番にアクセスもできます。
受け取った引数は配列としてアクセスできます。
args instanceof Arrayはもちろんtrueになります。

test(1,2,3);
function test(...args) { // ← 配列として扱われる
	console.log(args instanceof Array); // true
	console.log(args); // (3) [1, 2, 3]

	// Arrayなのでfor-of構文も使える!
	for(const arg of args)
		console.log(arg);
}