Spread 문법

Spread 문법인 … 는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 iterable이어야 한다.

함수의 인수로 사용하는 경우

 function spread(x,y,z){
            console.log(x,y,z); // 1 , 2, 3
   			//[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }
            console.log(arguments); 
          }
 const arr =[1,2,3,4];
 spread(...arr);  
       

• Spread문법을 사용한 인수를 함수에 전달하면 배열이 분해되어 파라메터로 전달

배열에서 Spread 사용

concat의 기능

const arr1 =[1,2,3];
const arr2 =[4,5,6];

console.log([...arr1, ...arr2]);

• concat :기존의 배열의 요소를 새로운배열의 일부로 추가하고 싶을때 사용
• concat을 쓰지 않고 Spread를 사용해 간편하게 두개의 배열을 합칠 수 있다.

push 기능

const arr3 =[1,2,3];
const arr4 =[4,5,6];
arr3.push(...arr4); // arr4배열을 개별 요소로 분리
console.log(arr3);  // [ 1, 2, 3, 4, 5, 6 ]

splice 기능

const arr3= [1,2,3,6];
const arr4= [4,5];
arr3.splice(3,0,...arr4); [1,2,3,4,5,6]

slice 기능

const arr2 =[1,2,3,6];
const copy2 = [...arr2]; // copy by value
arr2.push(8);
console.log(arr2);  //[1,2,3,6,8]
console.log(copy2); // [1,2,3,6]

• copy2는 arr2의 값 자체를 할당받기 때문에 arr2의 요소값이 추가되더라도 copy2는 변화가 없다.

객체에서의 Spread 사용

객체에서 객체 리터럴 분해,병합

        // 객체 병합
       const merged ={...{x:1,y:2}, ...{z:3}};
       console.log(merged); // { x: 1, y: 2, z: 3 }
		//객체 특정 프로퍼티 변경
       const changed ={...{x:1,y:2}, y:100};
       console.log(changed); // { x: 1, y: 100 }
		// 객체 프로퍼티 추가
       const added ={...{x:1,y:2}, z:3};
       console.log(added); // { x: 1, y: 2, z: 3 }

Rest parameter

함수의 매개변수 이름 앞에 Spread 문법을 붙여서 정의한 매개변수로 함수에 전달된 인수들을 배열로 전달 받는다.

Rest parameter의 특징

1. Rest파라미터는 반드시 마지막 파라미터여야 한다.

function restParameter( ...rest, param1, param2) { }

restParameter(1, 2, 3, 4, 5);
// SyntaxError: Rest parameter must be last formal parameter

2. Rest파라미터는 함수 객체의 length프로퍼티에 영향을 주지 않는다.

function bar(x, ...rest) {}
console.log(bar.length); //  매개변수 갯수 :1

Rest parameter를 사용한 고차함수 활용

function sum(...args){
    return args.reduce((pre,cur)=> pre +cur,0);
  }
  console.log(sum(1,2,3,4,5)); // 15

• sum의 인수들을 배열로 받아서 reduce 고차함수 수행