[ES6] Spread(연산자), Rest parameter

Spread, Rest parameter

이터러블 오브젝트(Iterable object)의 엘리먼트를 하나씩 분리하여 전개한다. 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다.

표현방식[…iterable]변수 앞에 ‘…’을 찍어서 선언합니다.

Array Spread

let test = [1,2];
let post = [8,9];
let spread = [0,...test,3,4,5,6,7,...post];
​
console.log(spread);
//[0,1,2,3,4,5,6,7,8,9];

String Spread

let sSpread =[..."JAVASCIRPT"]
console.log(sSpread);
//[ 'J','A','V','A','S','C','I','R','P','T']

Object Spread

let sObj = [{name:1} , {name:2}];
let bObj = [{name:3}, ...sObj];
console.log (sObj); // [ { name: 1 }, { name: 2 } ]
console.log (bObj); // [ { name: 3 }, { name: 1 }, { name: 2 } ]

function Spread

const value = [10,20,30]; 
function abc( a,b,c){ 
console.log(a,b,c); }; 
abc(...value); // 10 20 30

Rest Parameter

Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태Rest파라미터를 사용하면함수의 파라미터로 오는 값들을 배열로 전달받을 수 있다.

특징

다시 정의하자면함수를 호출할 때 spread 연산자로 파라미터를 작성한 형태를Restparameter라고 한다. 함수안의 코드를 확인하지 않고도 호출문의 형태만 보더라도 Rest parameter 의 범위를 확인할 수 있어 가독성이 높아진다. 또한 Rest parameter는 Array, 즉 배열이므로 Array 오브젝트의 메서드를 사용할 수 있다. 그리고 arrow funtion에서도 사용 가능하다.

표현방식파라미터 앞에 ‘…’을 찍어서 사용

console.log("===========");
function foo(x,y,z){
  console.log(x);
  console.log(y);
  console.log(z);
}
const arr=[1,2,3];
foo(...arr);  // foo -> 1,2,3 담는다.
​
let price =[12,20,18]   // 직접 하나씩 담아서 넣었던 방식이라면
Math.max(12,20,18);
​
​
let result =Math.max.apply(Math,price);
console.log(result);
console.log(Math.max(22,20,18));
​
let maxResult = Math.max(...price); //한번에 spread로 쉽게 넣는다.
console.log(maxResult);         // 같은 거라도 조금 더 가독성에도 도움이된다.
​
//function
​
let getElementByRestWithParam = (param, ...rest) => {
    console.log(param);
    console.log(rest);
}
console.log(getElementByRestWithParam.length); // 일단 1
console.log("======================");
const values = [10, 21, 30,40,50];
getElementByRestWithParam(...values); //10 \n [21,30,40,50]

Rest parameter와 arguments의 차이

arguments도 Array-like object이기 때문에 for statement로 전개할 수 있다.하지만 Array 오브젝트의 메서드를 사용할 수 없다.이것이 치명적인 단점인 것이다. 또 arrow function에서는 arguments를 사용할 수 없다.Rest parameter에 익숙해지기만 하면 arguments를 통해 인자를 받는 것보다 유연한 코드를 작성할 수 있다.