spread 문법

주로 배열을 풀어서 인자로 전달하거나,
배열을 풀어서 각각의 요소로 넣을 때에 사용한다

spread 예시

let arr = [1, 2, 3, 4, 5]; // 배열 선언
console.log(...arr) // 배열의 내부의 값을 출력
console.log(arr) // 배열 그대로 출력

function a(x, y, z) { // 함수 a에 인자값 (x,y,z)
  return x + y + z; // x + y + z 더한값 리턴
}

const numbers = [1, 2, 3];
a(...numbers) // 함수안의 식을 활용해 출력값 6

spread 활용

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [...arr1] // arr1 복사도 가능

rest 문법

파라미터를 배열의 형태로 받아서 사용할 수 있다
파라미터 개수가 가변적일 때 매우 유용하다
function 함수이름( ...배열 ) 로 작성

rest 예시

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

sum(1,2,3) // 결과값 6 출력
sum(1,2,3,4) // 결과값 10 출력

rest 활용

function myFun(a, b, ...manyMoreArgs) {
  console.log(manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
// 결과값 three 부터 six 까지 배열형태로 출력

구조분해할당

구조분해할당은 spread문법을 이용하여 값을 해제한 후,
개별 값을 변수에 새로 할당하는 과정을 말한다

구조분해할당 예제

let arr = [1, 2, 3, 4, 5]
let [a1, b1, ...rest] = arr

console.log(a1)
console.log(b1)
console.log(rest)

let obj = {a : 1, b : 2, c : 3, d : 4}
let {a1, b1, ...rest}

console.log(a1)
console.log(b1)
console.log(rest)

함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) // 결과값 jdoe is John 출력