ES6 Rest, Spread Operator

2021/12/12

Rest Operator

• 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다.
• 함수의 인자 중 나머지를 가리킨다.
• 배열의 나머지 인자를 가리킨다.
• 객체의 나머지 필드를 가리킨다.

함수 인자 Rest Operator

function findMin(...rest) {
  return rest.reduce((a, b) => (a < b ? a : b));
}

findMin(7, 3, 5, 2, 4, 1); // 1

• 함수 인자 rest operator는 인자들을 배열로 묶는다.
• rest에는 숫자들이 배열로 담긴다.
• reduce 함수로 min 값을 리턴한다.

객체 Rest Operator

const o = {
  name: "Daniel",
  age: 23,
  address: "Street",
  job: "Software Engineer",
};

const { age, name, ...rest } = o;
findSamePerson(age, name);

• 객체의 rest operator는 지정된 필드 외의 나머지 필드를 객체로 묶는다.
• age, name을 제외한 나머지 필드는, rest변수로 할당된다.

배열 Rest Operator

function sumArray(sum, arr) {
  if (arr.length === 0) return sum;
  const [head, ...tail] = arr;
  return sumArray(sum + head, tail);
}

sumArray(0, [1, 2, 3, 4, 5]);

• 배열의 rest operator는 나머지 인자를 다시 배열로 묶는다.
• sumArray의 tail 변수는, 첫 번째 원소 head를 제외한 나머지 값들을 다시 배열로 묶는다.
• tail은 하나씩 줄어들게 되며, 길이가 0이 되면 합을 반환한다.

Spread Operator

• 묶인 배열 혹은 객체를 각각의 필드로 변환한다.
• 객체는 또 다른 객체로의 spread를 지원한다.
• 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다.

객체 Spread Operator

const o = {
  name: "Daniel",
  age: 23,
  address: "Street",
  job: "Software Engineer",
};

let o2 = { ...o, name: "Tom", age: 24 };

let o3 = { name: "Tom", age: 24, ...o };

o2.job; // Software Engineer
o3.name; // Daniel

• spread operator의 등장 순서에 따라, 객체의 필드가 덮어씌워 질 수 있다.
• ...o 가 뒤에 등장하면, 기존의 name 필드가 나중에 등장하여 앞의 name:"Tom"을 덮어 씌운다.

배열 Spread operator

function findMinInObject(o) {
  return Math.min(...Object.values(o));
}

let o1 = { a: 1 };
let o2 = { b: 3 };
let o3 = { c: 7 };

findMinInFields(mergeObjects(o1, o2, o3)); // 1

• mergeObjects는 주어진 객체들의 필드를 합친다.
• findMinInObject에서는 객체의 필드들 최솟값을 반환한다.
• Object.values는 객체 값들의 배열을 반환한다.
• 배열 spread operator로 Math.min의 인자를 넘긴다.