【JS】【TS】Rest引数 (可変長引数)

TypeScript JavaScript

■ はじめに

TypeScript と JavaScript の可変長引数 について扱う
Rest引数(Rest Parameters; 可変長引数)っていうらしい。

目次

【１】TypeScript の場合
【２】JavaScript の場合

【１】TypeScript の場合

１）構文

// 変数名の前に「...」を付与
function 関数名(...引数の変数名: 引数の型): 戻り値の型 {
  // 処理
}

２）サンプル

public deploy(...params: string[]) {
  params.forEach(param => {
    console.log(`test - ${param}`)
  })
}

deploy("xxx", "yyy")

【２】JavaScript の場合

* arguments で行う

https://takamints.hatenablog.jp/entry/varg-on-es6-modern-javascript

補足：argumentsについて 

* arguments は、配列ではなく、オブジェクト
* Java/C#などの可変長引数とは異なり、
　arguments には、すべての引数の値が含まれている。
   (以下のサンプルで「if (index == 0) { continue; }」しているのは、
　第一引数"sample1"まで含まれてしまっている)

１）サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<form>
<div id="sample1">Result</div>
<input id="fire" type="button" value="click me!">
</form>
<script type="text/javascript">
$("#fire").click(function(event){
  sampleFunction("sample1", 1, 2, 3, 4, 5);
  
});

function sampleFunction(id) {
  var result = "";

  for (var index in arguments) {
    if (index == 0) {
      continue;
    }
    result += arguments[index] + " ";
  }
  document.getElementById(id).innerHTML = result;
}
</script>
</body>
</html>

出力結果 

1 2 3 4 5

関連記事

TypeScript ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/21/180904
TypeScript ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/02/15/000000