[JS] 스프레드 연산자

1. push()

const arr = [ 'fatfish', 'medium' ]
arr.push.apply(arr, [ 'JavaScript', 'NodeJs' ])
=> arr.push(...[ 'JavaScript', 'NodeJs' ])
console.log(arr) // ['fatfish', 'medium', 'JavaScript', 'NodeJs']

2. 배열 복사

const arr = [ 'fatfish', 'medium', 'JavaScript', 'NodeJs' ]
const copyArr1 = arr.slice(0) // [ 'fatfish', 'medium', 'JavaScript', 'NodeJs' ]
=> const copyArr2 = [ ...arr ] // [ 'fatfish', 'medium', 'JavaScript', 'NodeJs' ]

3. 배열 중복값 제거

const arr = [ 'fatfish', 'fatfish', 'medium', 'medium' ]
const uniqueArray = [ ...new Set(arr) ]
console.log(uniqueArray) // ['fatfish', 'medium']

4. 복수 배열 연결하기

const arr1 = [ 'fatfish', 'medium' ]
const arr2 = [ 'JavaScript', 'NodeJs' ]
const arr = [ ...arr1, ...arr2 ]
console.log(arr) // ['fatfish', 'medium', 'JavaScript', 'NodeJs']

5. NodeList 배열로 변환

// $divs는 NodeList입니다
const $divs = document.querySelectorAll('div')

// $arrayDivs는 Array입니다
const $arrayDivs = [ ...$divs ]

console.log(Array.isArray($divs), Array.isArray($arrayDivs)) // false, true

6. 구조 분해 할당

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

객체의 구조 분해 할당

const obj = { name: 'fatfish', age: 100, luckyNumber: 6 }
const { name, ...other } = obj
console.log(name) // fatfish
console.log(other) // { age: 100, luckyNumber: 6 }

7. 문자열을 배열로 변환

const name = 'fatfish'
const nameArray = [ ...name ] // ['f', 'a', 't', 'f', 'i', 's', 'h']

https://javascript.plainenglish.io/7-es6-spread-operator-tricks-every-developer-should-know-f162d602c9d6
https://velog.io/@jonghunbok/%EB%B2%88%EC%97%AD-%EB%AA%A8%EB%93%A0-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-ES6-%EC%8A%A4%ED%94%84%EB%A0%88%EB%93%9C-%EC%97%B0%EC%82%B0%EC%9E%90-%ED%8A%B8%EB%A6%AD