Spread/Rest 문법

• Spread/Rest 문법, 구조 분해 할당을 할 수 있어야한다.

Spread 문법

배열을 풀어서 인자로 전달하거나, 풀어서 각각의 element로 넣어줄때 사용한다

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

const numbers = [1, 2, 3];

sum(...numbers) // 질문 : 어떤 값을 리턴하나?

Rest 문법

Parameter를 배열의 형태로 받아서 사용할 수 있다. Parameter의 개수가 가변적일 때 유용하다.

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

sum(1, 2, 3) // 어떤값 리턴?
sum(1, 2, 3, 4) // 어떤 값 리턴? 

배열에서 사용할 때

Spread 문법은 배열에서 힘을 발휘한다

1. 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

// lyrics의 값은?

2. 배열 복사

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

let newarr = [...parts, ...lyrics];

// Spread문법은 기존 배열을 변경하지 않으므로 immutable하다. 

객체에서 사용할 때

let obj1 = { foo: 'bar', x: 42};
let obj2 = { foo: 'baz', y: 13};

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

// clonedObj, mergedObj의 값은?

함수에서 나머지 Parameter 가져오기

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

myFun("one", "two", "three", "four", "five", "six");

// 콘솔은 순서대로 찍히는가? 

구조분해 (Destructing)

구조 분해 할당은 Spread 문법을 이용해서 값을 해체한 후 , 개별 값을 변수에 새로 할당해주는 과정을 말한다.