Javascript

1. Spread

• ''퍼뜨리다'' 라는 뜻

• 이전에 만들었던 객체를 사용해서 새로운 객체를 만들고 싶을 때 사용한다.

• ⭐️ spread를 사용해서 서로 다른 객체를 가리키게 되고, 독립적으로 작업할 수 있게된다.

• spread와 기존 코드의 순서에 유의해서 작성하도록 하자.

  Spread > 기존 코드 : 덮어씌워질 수도 있다.

const slime = {
  name: '슬라임'
}

const cuteSlime = {
  //slime이 가지는 모든 속성이 가지고 와진다.
  ...slime,
  attribute: 'cute'
}

const purpleCuteSlime = {
  //cuteSlime이 가지는 모든 속성이 가지고 와진다.
  ...cuteSlime,
  color: 'purple'
}

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

• 배열에서도 사용 가능하다.

const animal = ['개','고양이','참새'];

const anotherAnimals = [...animal,'비둘기'];
// animal.concat('비둘기'); 와 같은 코드이다.

console.log(anotherAnimals);
//["개", "고양이", "참새", "비둘기"]

• spread를 여러번 사용할 수도 있다.

const animal = ['개','고양이','참새'];

const anotherAnimals = [...animal,'비둘기', ...animal];

console.log(anotherAnimals);
//["개", "고양이", "참새", "비둘기", "개", "고양이", "참새"]

2. rest

객체, 배열, 함수의 파라미터에서 사용한다.

• 🔥 rest는 반드시 맨 뒤에 위치 해야한다.
• spread와 비슷하게 생겼지만 역할이 반대라고 생각하면 된다.

객체의 rest

//비구조 할당
const {color, ...rest} = purpleCuteSlime;
console.log(color);
//출력: purple

console.log(rest);
//color를 제외한 속성이 들어와있다.
//출력: {name: "슬라임", attribute: "cute"}

const purpleCuteSlime = {
  name: '슬라임',
  attribute:'cute',
  color: 'purple'
}

const {color, ...cuteslime} = purpleCuteSlime;
console.log(color);
//출력: purple
console.log(cuteslime);
//출력: {name: "슬라임", attribute: "cute"}

const {attribute, ...slime} = cuteslime;
console.log(slime);
//출력: {name: "슬라임"}

배열의 rest

const nums = [1,2,3,4,5];

const [one,two, ...rest] = nums;

console.log(one,two);
//출력: 1 2

console.log(rest);
//출력: [3, 4, 5]

함수의 rest

• 파라미터 몇 개가 들어올지 모를 때 유용하다⭐️
  • 파라미터 : 함수에서 받아오는 값

function sum(...params){
  return params.reduce((acc,cur) => acc + cur,0);
}

console.log(sum(1,3,5,7,2));
// 출력: 18

• 함수의 인자
  • 인자 : 함수를 사용할 때 넣어주는 값

function sum(...params) {
  return params.reduce((acc, cur) => acc + cur, 0);
}

const numbers = [1, 2, 3, 4, 5];
console.log(sum(10, ...numbers));
// 출력: 25

정리✨

spread가 특정 객체 안에 배열 안에 다른 객체나 배열을 퍼뜨리는 역할을 한다면, rest는 퍼져있는 속성을 모으는 역할이다.