[JS] 스프레드 문법

스프레드 문법이란?

하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것.

• 값을 만드는게 아니기 때문에 변수에 할당할 수 없다.
• 이터러블에 한정되어 사용될 수 있다.
• 단독으로 사용될 수 없고 다음과 같이 사용될 수 있다.
  • 함수 호출문의 인수 목록
  • 배열 리터럴의 요소 목록
  • 객체 리터럴의 프로퍼티 목록 (최신버전)

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

const arr = [1, 2, 3];
const minValue = Math.min(...arr);
console.log(minValue);  // 1

※ Rest파라미터와는 다르다. Rest 파라미터는 여러개의 값을 동시에 받기 위해 사용한다.

function cook(param, ...rest) {
  // 레스트 파라미터
  console.log(param);  // 면
  console.log(rest);   // ['계란', '스프']
}

cook(...['면', '계란', '스프']);  // 스프레드 문법

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

concat

var arr = [1, 2].conat([3, 4]);
console.log(arr);  // [1, 2, 3, 4]

const arrS = [...arr, 5, 6];
console.log(arrS);

push

var arr1 = [1, 2];
var arr2 = [3, 4];
const arr3 = [5, 6];

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

// 스프레드 문법
arr1.push(..arr3);
console.log(arr1);  // [1, 2, 3, 4, 5, 6]

splice

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

// apply 메소드의 2번째 인수는 배열이다. 이것은 인수 목록으로 splice 메소드에 전달된다.
// [1, 0].concat(arr2) → [1, 0, 2, 3]
// arr1.splice(1, 0, 2, 3) → arr1[1]부터 0개의 요소를 제거하고
// 그자리(arr1[1])에 새로운 요소(2, 3)를 삽입한다.

Array.prototype.splice.apply(arr1, [1, 0].concat(arr2));

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

// 스프레드 문법
const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);

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

slice (배열 복사)

var origin = ["면", "스프"];
var copy = origin.slice();

console.log(copy); // ['면', '스프']
console.log(copy === origin); // false

// 스프레드 문법
const origin2 = ["면", "멸치육수"];
const copy2 = [...origin2];

console.log(copy2); // ['면', '멸치육수']

유사 배열 객체를 배열로 변환

function isRamen() {
  var args = Array.prototype.slice.apply(arguments);

  return args.some((item) => item === "스프");
}

console.log(isRamen("면", "계란", "스프")); // true

// 스프레드 문법
function isRamen2() {
  var args = [...arguments];

  return args.some((item) => item === "스프");
}

console.log(isRamen2("면", "계란", "스프")); // true

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

const merged = Object.assign({}, { x: 1, y: 2 }, { y: 10, z: 3 });
console.log(merged); // { x: 1, y: 10, z: 3 }

// 스프레드 문법
const merged2 = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged2); // { x: 1, y: 10, z: 3 }