모던 자바스크립트 Deep Dive - 35장

스프레드 문법

ES6에서 도입된 스프레드 문법(spread syntax) ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 적용할 수 있는 대상은 순회할 수 있는 이터러블에 한정된다. 

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
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

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

딥다이브의 예제를 보면 이렇게  Array, String, Map, Set 의 값들을 펼쳐서 개별적인 값들의 목록으로 만들어줄 수 있는데, 일반 객체같은경우는 타입에러가 나오는걸 확인 할 수 있다. 하지만 이 값들의 목록은 값이 아니다. 그래서 변수에 할당을 못할 뿐더러, 값을 생성하는 연산자가 아님을 의미한다. 

---

그렇다면 스프레드 문법을 어디에 사용할까 

1. 함수 호출문의 인수 목록에 사용할 때

Math.max같은 메소드는 인자를 배열로 받을 수 없다. 그렇기 때문에 NaN을 반환하게 되는데, 여기서 스프레드 연산자로, 배열을 찢고 값들을 목록으로 만들어서 전달하면 정상적으로 출력이 나오는 것을 볼 수 있다. 여기서 Rest 파라미터와 형태가 동일해서 혼동할 수가 있는데 차이는 명확합니다. Rest 파라미터는 인수의 목록을 배열로 만들기위해 사용이 되고, 스프레드 문법은 배열을 값들의 목록으로 바꾸기 위해서 사용한다. 서로 사용 용도가 정반대이지만 같은 형태라는게 아이러니하다. 

 

2. 배열 리터럴 내부에서 사용할 때

 

2-1 concat 대체 

 

보통은 두개의 배열을 하나로 합칠때는 concat 메소드를 많이 사용했지만 스프레드 문법을 사용하면 메소드사용없이 바로 합칠수가 있다.

 

 

 

2-2 splice와의 사용 

 

splice 메소드로 배열 인덱스 구간 사이에 다른 배열의 요소를 넣으려고 하면 배열을 우선 해체해서 전달을 해야하기 apply메소드까지 사용해야하는 번거로움이 있지만, 스프레드 문법이면 저렇게 뚝딱 똑같은 효과를 얻을 수 있다. 

 

 

 

2-3 배열복사

 

 

 

저렇게 slice() 메소드를 통해 얕은 복사를 진행해서 배열을 복사하는 방법도 있지만 스프레드 문법을 통해서도 같은 얕은복사가 진행이 가능하다. 

 

 

 

 

 

 

3. 객채 리터럴 내부에서 사용하는 경우 

https://github.com/tc39/proposal-object-rest-spread

GitHub - tc39/proposal-object-rest-spread: Rest/Spread Properties for ECMAScript

원래 스프레드 문법의 대상은 이터러블이어야 하지만 스프레드 프로퍼티 제안으로 인해 일반 객체를 대상으로 스프레드 문법의 사용을 허용하게 되었다. 위에 링크는 한번 찾아보니까 이미 ES9부터 완전히 적용된 것 같다. 

물론 Object.assign() 메소드로 객체 프로퍼티 병합 및 추가, 변경이 가능하지만 스프레드를 사용하면 코드를 더 줄일 수 있고, 가독성도 괜찮은 것 같아보인다. 

 

 

 

후기

- 지금까지 아무생각없이 Rest 파라미터와 스프레드 문법이 비슷하다고 생각을 했었지만, 아니나 다를까 완전히 개념이 달랐던 것...

   1. Rest 파라미터 : 인수의 목록을 배열로 반환

   2. Spread 문법 :  배열을 값들의 목록으로 반환 

 

- Spread 문법 사용할 수 있는 대상은 앞에서 배운 iterable의 대상들.. 아무생각없이 정해져 있다고 생각했던 나를 반성.. 

- 내가 지금까지 사용해왔던 이유를 왜 이걸 왜 사용했는지 설명할 수 있게 된거 같다.