[JavaScript]Spread/Rest 정리(스프레드와 나머지)

 

Spread와 Rest

 

 

spread와 rest는 JavaScript에서 배열과 객체를 다룰 때 사용되는 문법이다. 이들은 ES6(ES2015)에서 도입되었으며, 배열이나 객체를 조작하고 전달하는 데 편리한 방법을 제공한다.

 

Spead 문법

 

Spread 연산자

• Spread는 펼치다라는 뜻이다.
• Spread 연산자를 이용하여 객체, 배열등 반복 가능한 객체를 펼칠 수 있다.
• Spread 연산자는 기존의 객체에 영향을 끼치지 않는다.

 

펼친다는 것은?

객체를 펼친다는 것은 개별 요소로 분리할 수 있다는 것을 의미한다.

아래 코드를 확인해보자.

 

배열 예시

//don't use spread
let arr1 = [1, 2, 3];
let arr2 = [arr1, 4, 5, 6];
console.log("스프레드 연산자 X : ", arr2);

// use spread
let arr3 = [1, 2, 3];
let arr4 = [...arr1, 4, 5, 6];
console.log("스프레드 연산자 O : ", arr4);

출력값

스프레드 연산자 X : [ [ 1, 2, 3 ], 4, 5, 6 ]
스프레드 연산자 O : [ 1, 2, 3, 4, 5, 6 ]

 

보다시피 스프레드 연산자를 사용했을 시 각 개별 요소로 분리되어 배열에 들어갔다. 그러나 스프레드 연산자를 사용하지 않을 시 배열이 통째로 삽입되었다.(자바 스크립트는 배열 내의 타입들이 달라도 괜찮다.)

 

객체 예시

//don't use spread
let p1 = {
    name:"에이미",
    age:24
}

let p2 = {
    p1
}

console.log(p2);

// use spread
let p3 = {
    name:"제키",
    age:25
}

let p4 = {
    ...p3
}
console.log(p4);

출력값

{ p1: { name: '에이미', age: 24 } }
{ name: '제키', age: 25 }

 

객체의 경우도 동일하게 각 요소가 펼쳐져서 할당되었다.

 

Rest 문법

 

Rest 문법

• rest는 나머지를 의미한다.
• rest문법은 함수 매개변수나 배열, 객체의 요소를 수집하여 나머지 부분을 변수로 할당 하는 데에 사용한다.
• spread연산과 마찬가지로 ‘…’ 기호를 사용한다.
• 추출 값의 이름이 꼭 rest일 필요는 없다.

 

나머지 부분이라는 것은?

나머지 부분이라는 것은 파라미터, 배열 요소 등에 포함되지 않은 것을 의미한다.

 

배열 예시

let arr = [1, 2, 3, 4, 5];

let [first, second, ...rest] = arr;
console.log(first);
console.log(second);
console.log(rest);//[ 3, 4, 5 ]

출력값

1
2
[ 3, 4, 5 ]

 

배열을 구조분해 할당 할 때, 앞의 두 요소만 받고 …rest로 나머지를 받았다.

rest에는 나머지인 [3, 4, 5]가 할당되어있음을 알 수 있다.

 

 

객체 예시

let obj = {
    name:"mimi",
    age:18,
    hobby:"swimming"
}

let {name, ...rest} = obj;
console.log(name);
console.log(rest);//{ age: 18, hobby: 'swimming' }

출력값

mimi
{ age: 18, hobby: 'swimming' }

 

객체를 구조분해할당 할 때 name을 받았다. 그리고 …rest를 이용하여 나머지를 모두 rest로 할당하였다.

 

객체 배열 예시

let obj = {
    name:"mimi",
    age:18,
    hobby:"swimming"
}
let obj2 = {
    name:"zero",
    age:18,
    hobby:"swimming"
}
let obj3 = {
    name:"ziho",
    age:20,
    hobby:"walking"
}
let arr = [obj, obj2, obj3];
let [first, ...rest] = arr;

console.log(first);
console.log(rest);

출력값

{ name: 'mimi', age: 18, hobby: 'swimming' }
[
{ name: 'zero', age: 18, hobby: 'swimming' },
{ name: 'ziho', age: 20, hobby: 'walking' }
]

 

객체 배열 역시 배열이므로, 앞선 배열처럼 각 요소별로 나누어 …rest를 적용할 수 있다!