1. spread

• spread : 펼치다, 퍼뜨리다
  • 객체 또는 배열을 펼칠 수 있음

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

  const cuteSlime = {
    name: '슬라임',
    attribute: 'cute',
  }

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

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

spread 문법 사용

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

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

  const purpleCuteSlime = {
    ...cuteSlime,
    color: 'purple',
  }

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

배열에도 spread 문법 사용 가능

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

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]

2. 배열에서의 rest

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

  const [one, ...rest] = numbers

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

• 배열 비구조화 할당을 통해 원하는 값을 밖으로 꺼냄
• 나머지 값을 rest 안에 넣음

3. 함수 파라미터에서의 rest

• rest를 함수파라미터에서 사용 가능
• 파라미터로 넣어준 모든 값을 합해 주는 함수 만든다고 가정

function sum(a, b, c, d, e, f, g) {
    let sum = 0
    if (a) sum += a
    if (b) sum += b
    if (c) sum += c
    if (d) sum += d
    if (e) sum += e
    if (f) sum += f
    if (g) sum += g
    return sum
  }

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

• sum 함수는 7개의 파라미터를 받아오는데, 6개만 사용할 경우
  • g 값이 undefined가 되어 NaN이 됨
  • 함수에서느 하나하나 유효한 값인지 확인해야 함
• 함수의 파라미터가 몇개가 될지 모르는 상황 -> rest 파라미터를 사용하면 유용
• rest로 코드 수정

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

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

• 파라미터들이 들어가있는 배열 받고, 모두 더하기

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

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

reduce 함수

• 합을 구하는 함수

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

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

• reduce 함수에는 두개의 파라미터 전달
  • 첫번째 파라미터 : accumulator와 current를 파라미터로 가져와서 결과를 반환하는 콜백함수
    • accumulator는 누적된 값
  • 두번째 파라미터 : reduce 함수에서 사용할 초깃값

function sum(...rest) {
    return rest.reduce((accumulator, current) => {
      console.log({ accumulator, current })
      return accumulator + current
    }, 0)
  }

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

• 배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백 함수가 호출
  • 가장 처음에 accumulator값 = 0
  • 값이 0인 이유 : 두번째 파라미터인 초깃값을 0으로 설정했기 때문
  • 처음 콜 백함수가 호출 -> 0 + 1을 해서 1이 반환

4. 함수 인자와 spread

함수 인자

const myFunction(a) { // a: 파라미터
    console.log(a) // a: 인자
  }

  myFunction('hello world') // 'hello world'는 인자

• 파라미터 : 함수에서 값을 읽을때의 값
• 인자 : 함수에서 값을 넣어줄때의 값

배열 안에 있는 원소들을 모두 파라미터로 넣는다고 가정

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)

• ...numbers로 간단하게 가능

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)

해당 내용은 다음 자료를 참고했습니다.
https://learnjs.vlpt.us/useful/07-spread-and-rest.html