[JS] JavaScript 전개 연산자(Spread) 정리

 

📒 JS 전개 구문

 

• 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를
• 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여,
• 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

전개 구문 | MDN

 

// 전개 연산자 (Spread)

const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] // 배열 데이터
console.log(fruits)
// ... : 전개 연산자 : 하나의 배열 데이터를 쉼표로 구분하는 각각의 아이템으로 전개
console.log(...fruits)
// console.log('Apple', 'Banana', 'Cherry)

// toObject 
// rest parameter : 매개변수에서 전개 연산자를 사용하면 나머지의 모든 인수를 받아내는 역할을 함
function toObject(a, b, ...c) {
  return {
    // 속성의 이름과 데이터의 이름이 같다면 하나만 작성해주어도 됨.
    // return { a, b, c}
    a,
    b: b,
    c: c // 배열 데이터로 저장됨.
  }
}
// 화살표 함수를 사용해서 간단하게 축약형으로 작성 가능.
// const toObject = (a, b, ...c) => ({ a, b, c})
// c는 따로 새로운 배열로 생성되어 뒤로오는 인수들을 담음.

// 전개연산자를 사용하지 않는 다면 인덱싱으로 하나씩 작성해서 출력해야함.
console.log(toObject(...fruits))