전개연산자 Spread, 아이템을 전개하는 방법

🌲 전개연산자 Spread

배열데이터를 쉼표로 구분하는 아이템으로 전개

 

const fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits)
console.log(...fruits) // 전개연산자

 

🚨 전개연산자의 응용

배열데이터가 각각의 아이템으로 전개하여 객체데이터의 매개변수로

const fruits = ['Apple', 'Banana', 'Cherry']

function toObject(a, b, c) {
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))

 

✅ 전개연산자를 사용하지 않을 경우 인덱싱으로 하나하나 작성해야 함

console.log(toObject(fruits[0], fruits[1], fruits[2]))

 

✅ 전개연산자의 장점

매개변수에도 전개연산자(Rest Parameter : 나머지 매개변수)를 사용할 수 있다. 즉, 나머지 모든 인수를 받는다.

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] //배열데이터의 아이템 추가

function toObject(a, b, ...c) { //매개변수에 전개연산자 사용
  return {
    a: a,
    b: b,
    c: c
  }
}
console.log(toObject(...fruits))

나머지 매개변수는 배열 형태로 받아온다.

 

 

 

 

---

 

🚨 키속성과 매개변수의 이름이 같을 때 축약형으로 나타내기

key와 parameter의 이름이 같다면 한 번만 써도 된다.

 💜 매우 간편한 축약형!!  

위 함수를 화살표 함수로 바꾸면 최종 코드

const toObject = (a, b, ...c) => ({ a, b, c})