[JavaScript] ...에 대한 Spread 와 Rest

...

Spread

. . . 으로 나타낸다.

Array, Object들 안에 있는 요소(element)를 개별적으로 뽑아낼 수 있다.

뽑아낸 요소들로 새로운 Array, Object 만들기가 용이하다.

Spread는 변수를 가져가서 풀어 헤친다(Unpack)

 

[Array]

const number = [1, 2, 3]

//배열을 풀어 헤쳐서 개별 값들을 출력해줌
console.log(...number) //1 2 3
console.log(number) //[1, 2, 3]

const english = ['a', 'b']

//새 배열로 만들어 사용하기 편함
const newArr = [...number, ...english]
console.log(newArr) //[1, 2, 3, 'a', 'b']

 

 

[Object]

const gimbapObj = {
    name: "gimbap",
    price: 2000
}

const waterObj = {
    state: "Liquid ",
    capacity: "1.5L"
}

console.log({ ...gimbapObj, ...waterObj })
//{ name: 'gimbap', price: 2000, state: 'Liquid ', capacity: '1.5L' }

Spread 활용 - 요소 추가

//Array
const number = [1, 2, 3]
const newNumber = [...number, 4] //기존 number에 4를 추가하여 새로운 newNumber생성

console.log(newNumber) //[ 1, 2, 3, 4 ]


//Object
const login = { id: "id" }
console.log({ ...login, password: 1234 }); //{ id: 'id', password: 1234 }

Rest

Rest 또한 . . . 으로 나타낸다.

모든 값을 하나의 변수로 축소(Contract)한다.

//인자 값을 ...을 통해 rest로 받을 수 있다.

const args = (...rest) => console.log(rest);//[ 1, 'a', 'Hello', true, [ 1, 2, 3, 4 ] ]
args(1, 'a', 'Hello', true, [1, 2, 3, 4])


//rest는 다른 이름으로 나타내도 상관없지만, rest로 나타내는 것을 권장한다.

const parameter = (...something) => console.log(...something);//1 a Hello true [ 1, 2, 3, 4 ]
parameter(1, 'a', 'Hello', true, [1, 2, 3, 4])

Spread + Rest + Destructuring

Spread, Rest, Destructuring를 활용하면 다양한 방법으로 가능하다.

const user = {
    id: "id",
    age: 24,
    password: 1234
}

//...rest값만 return 해준다.
const killPassword = ({ password, ...rest }) => rest;

const cleanUser = killPassword(user)
console.log(cleanUser); //{ id: 'id', age: 24 }

---

참고 자료

https://velog.io/@chlwlsdn0828/Js-Spread-%EC%97%B0%EC%82%B0%EC%9E%90-Rest-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0

[Js] Spread 연산자, Rest 파라미터

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN