Spread & Rest

uoayop·2021년 3월 6일
0

JavaScript

목록 보기
19/24
post-thumbnail

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는 퍼져있는 속성을 모으는 역할이다.

profile
slow and steady wins the race 🐢

0개의 댓글