[자바스크립트] Javascript Spread(...) 연산자

 

Spread(...) 연산자를 사용해서 함수의 매개변수의 값들을 배열로 전달받을 수 있다.

setArray의 아규먼트(argument)에 1, 2, 3, 4, 5의 값을 입력하면 ...array의 파라미터가 값들을 배열로 전달받게 된다.

Array.isArray(array)로 파라미터의 값을 console.log에 찍어보면 true값이 나오는 것을 확인할 수 있다.

 

function setArray(...array) {
  console.log(Array.isArray(array);
  console.log(array);
}

setArray(1, 2, 3, 4, 5);
> (5) [1, 2, 3, 4, 5]
  true

 

주의할 점은 Spread(...) 를 사용할 때는 매개변수의 제일 마지막에 사용해야 한다.

Rest parameter를 제일 마지막에 사용하라는 에러가 발생한다.

Uncaught SyntaxError: Rest paramter must be last formal parameter

function array(...array, val1, val2) {
  console.log();
  ...
}
> Uncaught SyntaxError: Rest paramter must be last formal parameter

function array(val1, val2, ...array) {
  console.log();
  ...
}

 

 

...array를 console.log에 찍어보면 배열이 아닌, 배열의 값을 분해해서 보여주고 있다.

 

const array = [1, 2, 3, 4, 5];
console.log(al);
> (3) [1, 2, 3, 4, 5]

console.log(...al);
> 1, 2, 3, 4, 5