[모던 자바스크립트 딥다이브] 35장 스프레드 문법

스프레드 문법

스프레드 문법(전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전재, 분산하여, spread) 개별적인 값들의 목록으로 만든다.

스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션 등등 for...of 문으로 순회할 수 있는 이터러블에 한정된다.

// ...[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

...[1,2,3]은 이터러블인 배열을 펼쳐서 요소들을 개별적인 값들의 목록 1 2 3으로 만든다. 이때 1 2 3은 값이 아니라 값들의 목록이다. 스프레드 문법의 결과는 값이 아니다. 스프레드 문법의 결과는 변수에 할당할 수 없다.

함수 호출문의 인수 목록에서 사용하는 경우

요소들의 집합인 배열을 펼쳐서 개별적인 값들의 목록으로 만든 후, 이를 함수의 인수 목록으로 전달해야 하는 경우가 있다.

매개변수 개수를 확정할 수 없는 가변 인자 함수다.
Math.max()
배열을 펼쳐서 요소들을 개별적인 값들의 목록으로 만든 후 인수로 전달해야 한다.

const arr = [1,2,3] 

const max = Math.max(...arr); // 3

Rest 파라미터와 스프레드 문법은 서로 반대의 개념

• Rest 파라미터
  • 함수에 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 이름 앞에 ...을 붙이는 것
• 스프레드 문법
  • 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것

// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest){
	console.log(rest); // 1,2,3 -> [1,2,3]
}

// 스프레드 문법은 배열과 같은 이터러블을 개별적인 값들의 목록을 만든다.
// [1,2,3] -> 1, 2, 3
foo(...[1,2,3])

배열 리터럴 내부에서 사용하는 경우

concat

// ES5
var arr = [1,2].concat([3,4]);
console.log(arr); // [1,2,3,4]
// ---------------------------------------------
// ES6
const arr = [...[1,2], ...[3,4]];
console.log(arr); // [1,2,3,4]

splice

// ES5
var arr1 = [1,4];
var arr2 = [2,3];

// 세 번째 인수 arr2를 해체하여 전달해야 한다.
// 그렇지 않으면 배열 자체가 추가된다.
arr1.splice(1, 0, arr2);
console.log(arr1); // [1,[2,3],4] 기대값은 -> [1,2,3,4]
//---------------------------------------------------
// aplly
var arr1 = [1,4];
var arr2 = [2,3];

Array.prototype.slice.apply(arr1, [1,0].concat(arr2));
console.log(arr1); [1,2,3,4]

스프레드 문법을 사용하면 간결하고 가독성 좋게 표현할 수 있다.

// ES6

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

arr1.splice(1,0, ...arr2);
console.log(arr1); // [1,2,3,4]

배열 복사

// ES5
var origin = [1,2];
var copy = origin.slice();

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

원본 배열의 각 요소를 얕은 복사 하여 새로운 복사본을 생성한다. 이는 slice 메서드도 마찬가지다.

객체 리터럴 내부에서 사용하는 경우

스프레드 프로퍼티

// 스프레드 프로퍼티
// 객체 복사(얕은 복사)
const obj = { x: 1, y: 2 };
const copy = { ...obj };
console.log(copy); // { x: 1, y: 2 }
console.log(copy === obj);; // false

// 객체 병합
const merged = { x: 1, y: 2, ...{ a: 3, b: 4 } };
console.log(merged); // { x: 1, y: 2, a: 3, b: 4 }
// -------------------------------------------------
// 프로퍼티가 중복되는 경우 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged); // { x:1, y: 10, z: 3 }

// 특정 프로퍼티 변경
const changed = { ...{x: 1, y: 2}, y: 100 };
console.log(changed); // { x: 1, y: 100 }

// 프로퍼티 추가
const added = { ...{ x: 1, y: 2 }, z: 3 };
// added = { ...{ x: 1, y: 2 }, ...{ z: 3 }  };
console.log(added); // { x:1 , y: 2, z: 3 }