✏️Achievement Goals

✅ Spread/Rest 문법, 구조 분해 할당을 사용할 수 있다.

📝summary

Spread 문법

spread 의 의미 : 펼치다, 퍼뜨리다

spread 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있고
주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다

// 객체

const dog = {
  name: '망고'
};

const cutedog = {
  name: '망고',
  attribute: 'cute'
};

const whiteCuteDog = {
  name: '망고',
  attribute: 'cute',
  color: 'white'
};

console.log(dog); // {name: "망고"}
console.log(cutedog); // {name: "망고", attribute: "cute"}
console.log(whiteCuteDog); //{ name: "망고", attribute: "cute", color: '"white"}

기존의 것을 수정하지 않고 새로운 것을 추가할 경우에 spread 문법을 밑과 같이 작성할 수 있다

// 객체에서 Spread

const dog = {
  name: '망고'
};

const cutedog = {
  ...dog,
  attribute: 'cute'
};

const whiteCuteDog = {
  ...cutedog,
  color: 'white'
};

console.log(dog); 
console.log(cutedog);
console.log(whiteCuteDog);

// 배열에서 Spread

const numbers = [1, 2, 3, 4, 5];
const anotherNumbers = [...numbers, '6'];
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(anotherNumbers); // [1, 2, 3, 4, 5, 6]

// 배열에서 Spread 여러번 사용도 가능하다
const numbers = [1, 2, 3, 4, 5];

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

Rest 문법

rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다
Spread와 비슷하지만 여러 인자들을 하나의 배열로 반환한다

// 객체에서 Rest

const whiteCuteDog = {
  name: '망고',
  attribute: 'cute',
  color: 'white'
};

const { color, ...rest } = whiteCuteDog;
console.log(color); // white
console.log(rest); // { name: "망고", attribute: "cute"}

// rest 안에 color 값을 제외한 값이 출력된다

// rest대신 다른 이름을 사용할 수도 있다
const { color, ...cutedog } = whiteCuteDog;
console.log(color); // white
console.log(cutedog); // { name: "망고", attribute: "cute"}

//배열에서의 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one); // 0
console.log(rest); // [1, 2, 3, 4, 5, 6]
// 원하는 값을 밖으로 꺼내고 나머지 값을 rest안에 넣을 수 있다

const [..rest, last] = numbers; // error
//이렇게는 사용 할 수 없다

// 함수의 파라미터에서 rest
// 파라미터 개수가 가변적일 때 유용하다
// 파라미터를 배열의 형태로 받아서 사용할 수 있다. 
function sum(...rest) {
  return rest.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 6
sum(1,2,3,4) // 10