스프레드 문법

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 스프레드 문법이란

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

값을 만드는게 아니기 때문에 변수에 할당할 수 없다.

따라서 단독으로 사용될 수 없고 다음과 같이 사용될 수 있다.

• 함수 호출문의 인수 목록
• 배열 리터럴의 요소 목록
• 객체 리터럴의 프로퍼티 목록 (최신 버전)

이터러블에 한정되어 사용될 수 있다.

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

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(...["면", "계란", "스프"]); // 이건 스프레드 문법

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

3.1. concat

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

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

3.2. push

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

Array.prototype.push.apply(arr1, arr2); // arry1.push(arr2) 하면 배열 요소로 arr2가 들어가게 됨
console.log(arr1); // [1, 2, 3, 4]

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

3.3. 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]

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); // ['면', '멸치육수']

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

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

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

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 }

참고자료: poiemaweb.com