2018-09-22

JavaScriptで可変長引数

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);  
}  

猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy