[JS] spread 사용법

Spread는 주로 배열과 같이 반복가능한곳에 사용된다.
배열의 원소에 접근할 수 있는데, 이를 통해 배열을 합칠때 사용된다.

기본 문법은 ...배열이름

const arr1=[1,2,3,4]

console.log(...arr1)
console.log(arr1)

//결과
1 2 3 4
[ 1, 2, 3, 4 ]

spread문법을 통해 배열속 요소만 가져올수 있다.

let obj=[{
    id : 1,
    name : "성민"
}]
const obj2={
    id : 2,
    name : "주현"
}

obj4=[...obj,...obj2]

//결과
obj4=[...obj,...obj2]
                ^

TypeError: obj2 is not iterable

일반 객체에 Spread를 사용하니 에러가 발생하는걸 볼 수 있다.

let obj=[{
    id : 1,
    name : "성민"
}]
const obj2=[{
    id : 2,
    name : "주현"

obj3=[...obj,obj2]         //첫번째
obj4=[...obj,...obj2]      //두번째
console.log(obj3)
console.log(obj4)

// 결과

[ { id: 1, name: '성민' }, [ { id: 2, name: '주현' } ] ]
[ { id: 1, name: '성민' }, { id: 2, name: '주현' } ]

obj1,obj2은 객체 배열이다.

첫번째는 obj2를 바로 붙이는것이고

두번째는 spread를 이용해 obj2를 obj1에 붙인다.

첫번째 결과는 배열안에 배열이 그대로 들어갔고

두번째는 원하는대로 배열의 원소가 붙어서 들어갔다.

배열 속 원소를 다른 배열에 붙이고 싶다면 spread를 사용해야한다.