Rest Operator와 Spread Operator

es6를 사용하면서 보게된 Rest Operator와 Spread Operator에 대해 정리를 해보자.


Rest Operator

기존에 리터널 문법을 사용하여 객체나 배열의 값을 변수로 바인딩하여 사용할 수 있었다.
근데 object라는 객체의 값이 많은경우에는 여기서 값을 모두 하나하나 뽑아내는건 어렵기 때문에 하나의 객체로 뽑아낼때 사용한다.

// 기존에 하나씩 속성을 뽑아서 사용하던 방식
const object = {a : 'wedul', b : 'cjung', c : 'gglee', d : 'babo'};
const {a, b} = object;
console.log(a, b);
 
#출력
wedul, cjung
 
// Rest Operator 를 사용하여 여러 속성을 하나로 묶어서 진행
const object = {a : 'wedul', b : 'cjung', c : 'gglee', d : 'babo'};
const {a, b, ...obj} = object;
console.log(a, b, obj);
 
#출력
wedul cjung { c: 'gglee', d: 'babo' }
 
// 배열일때도 마찬가지로 사용가능한데 배열인 경우에는 뒤에 요소가 배열로 만들어진다.
// Rest Operator
const array = ['wedul', 'cjung', 'gglee', 'babo'];
const [a, b, ...obj] = array;
console.log(a, b, obj);
 
#출력
wedul cjung [ 'gglee', 'babo' ]

Spread Operator

배열이나 Object에 있는 내용들이 열거되어 사용할 수 있도록 해주는 기능
아래의 예에서는 입력된 배열의 요소들이 getlternalTest() 함수수의 내용들이 name, age, address 순서대로 열거된다.

getleternalTest(name, age, address) {
  console.log(name, age, address);
  #출력 결과 cjung 23 seoul
}
 
 
#테스트
it('liternal test', () => {
  // array
  test.getleternalTest(...['cjung', 23, 'seoul']);
});
 

Push로 기존에 배열에 데이터를 추가할 수도 있다.

let data = ['dd', 'cg', 'zz', 'cjung'];
data.push(…data);
console.log(data);
-> [“dd", "cg", "zz", "cjung", "dd", "cg", "zz", "cjung"] 

Object도 동일하게 사용가능

궁금사항으로 이렇게 복사된 항목들은 깊은복사가 될까였다. 그래서 테스트를 해봤다.
-> 테스트 결과 해당 객체가 만들어질때 데이터가 값이 복사가 되기 때문에 서로 별개로 동작하게 된다. 아래 예를 보면 동작이 이해가 가능하다.

> copyBabo // babo 오브젝트에서 복사된 copyBabo의 항목
< {name: "cjung", age: 23, addr: "seoul"}
 
// copyBabo name 속성 변경
> copyBabo.name = 'gglee';
 
> babo // babo의 속성을 확인했을 때 바뀌지 않은걸 알 수있다.
< {name: "cjung", age: 23, addr: "seoul"}