5.31 Dev.Feedback(Spread 문법, Rest 문법)

Spread 문법

주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용한다.

Spread 문법의 대상은 Iterable이어야 한다.

순회 가능한(iterable)

 

이터레이터는 '반복자'라는 의미로, 이터러블(Iterable, 순회 가능한 자료구조)의 요소를 탐색하기 위한 포인터로서 next()함수를 가지고 있는 객체다.  '내부의 요소들을 반복하여 볼 수 있게 하는 객체' 

Array, String, Map, Set, DOM이 이터러블이고, 이런 것을 반복할 수 있게 하는 것이 이터레이터다.

사용법은 ...을 변수 앞에 넣어주면 된다.

// 문자열은 이터러블이다.
console.log(...'Hello');  // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']]));  // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3]));  // 1 2 3

// 이터러블이 아닌 일반 객체는 Spread 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

 

배열에서 사용하는 방법

 

1. 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

위의 결과 값은

let lyrics = ['head', 'shoulders', 'knees', 'and', 'toes'];

풀어서 그 배열 내부에 넣어주는 것을 확인할 수 있다.

 

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

**중요한 Point : spread 문법은 깊은 복사를 한다. 그렇기에 arr1에 새로운 값을 할당해준 것!
arr1 = [0, 1, 2, 3, 4, 5];

2. 배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사하지만, arr.slice는 얕은 복사, spread는 깊은복사

console.log(arr2) // [1, 2, 3];
arr2.push(4);

arr2 = [1, 2, 3, 4];

!!!Rest/Spread 프로퍼티!!!

 

위에서 볼 수 있듯, Spread 문법의 대상은 iterable 이어야 하는데,

Rest/Spread 프로퍼티는 일반 객체에 Spread 문법의 사용을 허용한다.

Rest/Spread 프로퍼티를 사용하면 객체를 손쉽게 병합 또는 변경할 수 있다.

객체에서 사용하는 방법

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

console.log(clonedObj) // { foo: 'bar', x: 42 };
console.log(mergeObj) // { foo: 'baz', x:42, y: 13 }; 

동일한 키가 있으면 키에 새로운 값이 추가가 되는 걸 볼 수 있다.

Rest 문법 

Rest문법은 spread문법과 생김새는 동일하지만, 사용하는 방법은 다르다.

객체와 배열에서 사용할 때는 비구조화 할당 문법과 함께 사용한다. 일반적으로 ...rest를 사용하여 협업하는 사람들에게

잘 인식이 되게 해주는 것이 좋다.

const swimSkills = {
  first: '자유영',
  second: '배영',
  third: '평영',
  fourth: '접영'
};

const { first, ...rest } = swimSkills;
**point** 
rest 는 객체와 배열에서 사용 할 때는 위와 같이 비구조화 할당 문법과 함께 사용된다.

console.log(first); // 자유형
console.log(rest); // {second: '배영', third: '평영', fourth: '접영'}

//first를 했을 때는 값만 나오는 것을 볼 수 있는데,
rest문법을 썼을 때는 첫 번째 property를 제외한 나머지 property들이 
객체 내부에 출력된 것을 볼 수 있다. // 

함수에서의 Rest 문법 

 

함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 유용하다.

 

function sum(...rest) {
  return rest;
}

const result = sum(1, 2, 3, 4, 5);
console.log(result); // result = [1, 2, 3, 4, 5];

...rest문법을 쓰는 함수를 하나 작성하고 새롭게 변수를 선언하여 값을 할당해준 뒤

인자에 값을 넣어주면, 배열로 return해주는 것을 볼 수 있다.

 

이렇게 배열로 리턴된 값을 원하는 값에 따라 배열 메소드를 적용해주면 된다.

function sum(...rest) {
  return rest.reduce((acc, current) => acc + current, 0);
}

const result = sum(1, 2, 3, 4, 5);
console.log(result); // 15