spread, rest

spread 문법

배열 또는 객체 안에 있는 내용물들을 전개하는 역할을 한다

배열에 스프레드 구문을 사용할 경우, 배열을 감싸는 대괄호가 사라지고 내용물만이 반환된다

배열 스프레드를 이용하여 배열 합치기

let arr1 = [var1, var2, var3];
let arr2 = [...arr, var4, var5]; //[var1, var2, var3, var4, var5]
let arr3 = [...arr, ...arr] //[var1, var2, var3, var1, var2, var3];

스프레드 구문은 한 배열을 만들 때 여러 번 사용 가능하다

객체 스프레드를 이용하여 객체 합치기

let obj1 = {
    var1: 'hello',
    var2: 'good afternoon',
    var3: 'byebye',
};

let var4 = 'see you again';

let obj2 = {
    ...obj1,
    var4,
    var5: "end",
}

// obj2 = {
//         var1: 'hello',
//     var2: 'good afternoon',
//     var3: 'byebye',
//     var4: 'see you again',
// }

obj1 객체를 전개하여 obj2에 넣고, var4와 var5를 추가하였다

함수 인자가 여러 값을 받을 때 배열 스프레드로 한번에 넣기

let arr1 = [var1, var2, var3];
foo(...arr1); // (var1, var2, var3);

함수 인자가 값을 여러 개 받을 때 일일히 변수명을 입력하지 않아도 스프레드 문법을 통해 한번에 여러 개의 변수를 대입할 수 있다

rest 문법

spread와 비슷하지만, spread는 배열을 전개하는 데에 주 목적이 있었다면 rest는 구조분해 할당 시에 각 변수로 반환하고 남은 변수들을 묶어서 반환한다

구조분해 할당과 많이 이용된다

rest를 이용하여 배열 분해하기

let arr1 = [var1, var2, var3];
let [var4, ...arr2] = arr1; 
//var4 = var1
//arr2 = [var2, var3]

var4에는 같은 인덱스를 가진 var1의 값이 저장되고, 나머지 변수들인 var2, var3은 rest 구문에 의해 arr2에 반환된다

rest 요소는 배열의 맨 마지막에만 올 수 있다

참고자료

07. spread 와 rest 문법