1. 스프레드 문법
ES6에서 도입된 전개 문법으로, 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값의 목록으로 만드는 것을 의미함!
스프레드 문법은 Array, String, Map, Set, DOM 컬렉션 등과 같이 for ... of 문으로 순회가 가능한 이터러블에 한정되서 사용이 가능하다.
스프레드 문법의 결과는 단순한 하나의 값이 아닌 값들의 목록이기 때문에
변수에 할당할 수 없다.
스프레드는 아래와 같이 쉼표로 구분한 값의 목록을 사용하는 문맥에서만 사용할 수 있다.
1. 함수 호출문의 인수 목록
2. 배열 리터럴의 요소 목록
3. 객체 리터럴의 프로퍼티 목록
2. 함수 호출문의 인수 목록에서 사용하는 경우
var arr = [1, 2, 3];
// apply 함수의 2번째 인수(배열)는 apply 함수가 호출하는 함수의 인수 목록임.
// 따라서 배열이 펼쳐져서 인수로 전달되는 효과가 있음.
var max = Math.max.apply(null, arr); // => 3
// ---------------------------------------------------------------------------- //
const arr = [1, 2, 3];
// 스프레드 문법을 사용하여 배열 arr을 1, 2, 3으로 펼쳐서 Math.max에 전달함.
// Math.max(... [1, 2, 3])은 Math.max(1, 2, 3)과 같음.
const max = Math.max(...arr); // => 3스프레드 문법을 사용하면 조금 더 간결하고 가독성이 좋도록 작성 가능하다.
또한, Rest 파라미터와 형태가 비슷하기에 혼동의 우려가 있어 주의해야 한다.
Rest 파라미터의 경우
함수에 전달된 인수들의 목록을 하나의 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙이고,
스프레드 문법의 경우
여러개의 값이 하나로 뭉쳐있는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록의 만드는 것이다.
두가지의 차이점은 아래와 같다.
1)
Rest 파라미터는 함수 정의 시 사용하지만,스프레드 문법은 함수 호출 시 사용.
2)Rest 파라미터는 여러개의 인수를 하나의 배열에 모으지만,스프레드 문법은 배열이나 이터러블을 개별 요소로 펼침(spread).
따라서, Rest 파라미터와 스프레드 문법의 서로 반대되는 개념이라고 불 수 있다.
3. 배열 리터럴 내부에서 사용하는 경우
스프레드 문법을 배열 리터럴에서 사용 시 ES5의 방식보다 더욱 간결하고 가독성 좋게 표현이 가능함.
1) concat
2개의 배열을 1개의 배열로 결합.
var ES5 = [1,2].concat([3,4]); // => [1, 2, 3, 4]
const ES6 = [...[1,2], ...[3.4]]; // => [1, 2, 3, 4]2) splice
배열의 중간에 다른 요소들을 추가/제거.
var ES51 = [1,4];
var ES52 = [2,3];
ES51.splice(1,0,...ES52);
// ES51에 ES52의 배열 자체가 추가됨.
// [1, [2, 3], 4]
Array.prototype.slice.apply(ES51, [1,0].concat(ES52));
// ---------------------------------------------------- //
const ES61 = [1,4];
const ES62 = [2,3];
ES61.splice(1,0,...ES62); // [1, 2, 3, 4]3) 배열복사
말 그대로 배열을 복사.
이때 원본 배열의 각 요소를 얕은 복사(shallow copy)하여 새로운 복사본을 생성.
// ES5
var origin = [1,2];
var copy = origin.skice();
console.log(copy); // [1, 2]
console.log(copy === origin); // false (얕은복사)
// ES6
const origin = [1,2];
const copy = [...origin];
console.log(copy); // [1, 2]
console.log(copy === origin); // false (얕은복사)4) 이터러블을 배열로 변환
이터러블 -> 배열 변환
단, 이터러블이 아닌 유사배열 객체는 스프레드 문법의 대상이 될 수 없다.
5. 객체 리터럴 내부에서 사용하는 경우
스프레드 프로퍼티를 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법을 사용할 수 있음.
스프레드 문법의 대상은 이터러블이어야 하지만, 스프레드 프로퍼티 제안은 일반 객체를 대상으로도 스프레드 문법의 사용을 허용함.
스프레드 프로퍼티가 제안되기 이전에는 ES6에서 도입된 Object.assign 메서드를 사용해서 여러개의 객체를 병합 or 특정 프로퍼티를 변경/추가 하였음.
따라서, 스프레드 프로퍼티는 Object.assign 메서드를 대체할 수 있는 간편한 문법임.
