JavaScript JS-Rest Parameter&SSpread Operator&arguments


📖Review (21.04.02)


Rest Parameter


Rest ParameterはSpread演算子(...)関数パラメータを記述する形式を使用します。

すなわち、Rest Parameterを使用して、関数パラメータ(パラメータ)としての値を配列に渡すことができます.
function f(a, b, ...theArgs) {
  // ...
}
関数の最後のパラメータに...(ユーザ提供)を追加し、残りのすべてのパラメータを標準JavaScript配列で置き換えます.最後のパラメータのみが「Rest Parameter」になります.
ex)
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

arguments vs Rest Parameter


ArgumentsとRest Parameterの違いは何ですか?

答えから、argumentsは類似の配列の対象であり、Rest Parameterは配列されている.
類似配列オブジェクト(array-like object)は、単純な遍歴性(iterable)と長さ値が既知の特徴を有する.つまり、配列のように使えるオブジェクトです.argumentsは類似配列オブジェクトであるため、Arrayオブジェクトの方法は使用できない.
逆にRest ParameterではArrayオブジェクトのメソッドを使用できます.
ex)
// Rest 파라미터 이전에, "arguments" 는 다음을 사용해 일반적인 배열로 변환될 수 있음

function f(a, b) {

  var normalArray = Array.prototype.slice.call(arguments);
  // -- 또는 --
  var normalArray = [].slice.call(arguments);
  // -- 또는 --
  var normalArray = Array.from(arguments);

  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
  var first = arguments.shift(); // ERROR (arguments 가 일반적인 배열이 아님)

}

// 이제 rest 파라미터를 사용해 쉽게 일반적인 배열에 접근할 수 있음

function f(...args) {
  var normalArray = args;
  var first = normalArray.shift(); // OK, 첫 번째 인수를 반환
}

Spread Operator


Spread Operatorは、演算子のターゲット配列または反復可能(iterable)を「単一」要素に分離します.

// 배열
console.log(...[1, 2, 3]); // -> 1, 2, 3
 
// 문자열
console.log(...'Helllo');  // H e l l l o
関数パラメータとしてのメソッド
function foo(x, y, z) {
  console.log(x); // 1
  console.log(y); // 2
  console.log(z); // 3
}
const arr = [1, 2, 3];
foo(...arr);// Array를 받아서 각 매개변수로 전달되었다.
関数宣言文のパラメータにSpread(...)演算子が使用されている場合、Rest Parameterは可変パラメータを配列として使用し、関数呼び出し文のパラメータにSpread(...)演算子が使用されている場合、配列はそれぞれ対応するパラメータにマッピングされます.