spread, rest 문법

spread 연산자

 

... 을 활용한 연산자

...slime 을 하면 해당 내용이 담긴다

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

const cuteSlime = {
  ...slime,
  attribute: 'cute'
};

const blueCuteSlime = {
  ...cuteSlime,
  color: 'blue'
};

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

 

배열에서도 사용 가능하다

 

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);

 

rest

color를 제외한 것들이 ...rest에 담긴다

const blueCuteSlime = {
  name: '슬라임',
  attribute: 'cute',
  color: 'blue'
};

const { color, ...rest } = blueCuteSlime;
console.log(color);
console.log(rest);

 

배열에서도 rest적용이 가능하다

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

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

console.log(one);
console.log(rest);

rest의 활용 

function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3, 4, 5, 6);
console.log(result);

함수의 파라미터가 몇개가 될지 모를때 rest 파라미터를 사용하면 유용하다 

 

rest의 활용

 

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

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(
  numbers[0],
  numbers[1],
  numbers[2],
  numbers[3],
  numbers[4],
  numbers[5]
);
console.log(result);

 

위의 식을 spread를 활용해서 단축시킬수 있다.

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

const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers);
console.log(result);

 

예시: 함수에 n개의 숫자들이 파라미터로 주어졌을떄 가장 큰값을 

알아내기

function max(...numbers) {
  return numbers.reduce(
    // acc 이 current 보다 크면 결과값을 current 로 하고
    // 그렇지 않으면 acc 가 결과값
    (acc, current) => (current > acc ? current : acc)
  );
}

const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);