Spread

Spread 연산자는 배열이나 문자열 같이 반복가능한(Iterable) 객체에 사용하여 객체 내부 데이터들을 개별 요소로 분리 한다.

Spread 사용방법

사용 방법은 해당 배열이나 문자열 같이 반복가능한 객체 앞에 ...을 붙인다.

function sum(x, y, z){
  return x+y+z;
}

const numbers=[1, 2, 3];

console.log(sum(...numbers));  //  expected output : 6

Spread 연산자를 배열에서 이용하면 기존 배열을 참조가 아닌 얕은 복사가 된다.

Spread 연산자는 어느 위치에도 쓸 수 있으며 여러번도 사용 가능하다.

Rest

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

Rest 사용방법

사용 방법은 파라미터 앞에 ...을 붙인다.

Rest는 Spread 연산자와 다르게 사용방법에 조건이 있다.
Rest 연산자는 항상 제일 마지막 파라미터로 있어야 한다.

function sum(...theArgs){
  return theArgs.reduce( (previous,current)=>{
    return previous+current;
  });
}

console.log(sum(1,2,3));  //  expected output : 6

Rest는 객체와 배열에서 사용 할 때는 구조 분해(비구조화) 할당 문법과 함께 사용해서 원하는 값을 밖으로 꺼내고 나머지 값을 Rest안에 넣는다.

구조 분해(비구조화) 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS의 표현식이다.

let foo = ["one", "two", "three"];

let [red, yellow, green] = foo;
console.log(red);  //  expected output : "one"
console.log(yellow);  //  expected output : "two"
console.log(green);  //  expected output : "three"