본문 바로가기
프론트엔드/JavaScript

JS 데이터 - 전개 연산자 (Spread)

by step 1 2021. 5. 31.
반응형

전개연산자: 배열데이터를 문자형태로 바꿔서 출력해주는 기능

 

문법: (... 배열이름)

// 전개 연산자 (spread)
const fruits = ['Apple', 'Banana', 'Cherry']
// 배열 데이터 출력됨
console.log(fruits)
// 문자 데이터 형태로 출력됨
console.log(...fruits)
// console.log('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]))

 

매개변수에도 전개 연산자를 사용할 수 있다(나머지 매개변수).

function toObject2(a, b, ...c) {
  return {
    a: a,
    b: b,
    c: c
  }
}

 

축약형(key, value 명칭이 같기 때문에 한번만 써도 된다.)

function toObject2(a, b, ...c) {
  return {
    a,
    b,
    c
  }
}

 

화살표 함수로 변환

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

 

결과 값은 모두 동일

반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

JS 데이터 - 복사  (0) 2021.06.01
JS 데이터 - 불변성  (0) 2021.06.01
JS 데이터 - 구조 분해 할당  (0) 2021.05.31
JS 데이터 - 객체  (0) 2021.05.31
JS데이터 - 배열 2  (0) 2021.05.29