Залишкові параметри та синтаксис поширення

Багато вбудованих функцій JavaScript підтримують довільну кількість аргументів.

Наприклад:

• Math.max(arg1, arg2, ..., argN) – повертає найбільший з аргументів.
• Object.assign(dest, src1, ..., srcN) – копіює властивості з src1..N до dest.
• …і багато ще.

У цьому розділі ми дізнаємось, як зробити те саме. А також, як передати масиви таким функціям, як параметри.

Залишкові параметри ...

Функцію можна викликати з будь-якою кількістю аргументів, незалежно від того, як вона визначена.

Як тут:

function sum(a, b) {
  return a + b;
}

alert(sum(1, 2, 3, 4, 5));

Помилки “надмірних” аргументів у цьому випадку не буде. Але, звичайно, будуть враховані лише перші два.

Решту параметрів можна включити до визначення функції за допомогою трьох крапок ... що передують імені масиву, який їх міститиме. Точки буквально означають “зібрати решту параметрів у масив”.

Наприклад, щоб зібрати всі аргументи в масив args:

function sumAll(...args) { // args – це ім’я масиву
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

Ми можемо вибрати перші параметри як змінні, а зібрати у масив лише залишки.

У цьому прикладі перші два аргументи переходять у змінні, а решта – в масив titles:

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Юлій Цезар

  // решта параметрів переходять до масиву
  // titles = ["Консул", "Полководець"]
  alert( titles[0] ); // Консул
  alert( titles[1] ); // Полководець
  alert( titles.length ); // 2
}

showName("Юлій", "Цезар", "Консул", "Полководець");

function f(arg1, ...rest, arg2) { // arg2 після ...rest ?!
  // error
}

Змінна “arguments”

Існує також спеціальний об’єкт, подібний масиву arguments який містить усі аргументи за їх індексом.

Наприклад:

function showName() {
  alert(arguments.length);
  alert(arguments[0]);
  alert(arguments[1]);

  // це повторюване
  // for(let arg of arguments) alert(arg);
}

// показує: 2, Julius, Caesar
showName("Julius", "Caesar");

// показує: 1, Ilya, undefined (жодного другого аргументу)
showName("Ilya");

За старих часів залишкові параметри не існували в мові, єдиний спосіб отримати всі аргументи функції був за допомогою arguments. І він все ще працює, ми можемо знайти його в старому коді.

Але недоліком є те, що хоча arguments є одночасно масивом і ітерабельним, це не масив. Він не підтримує методи масиву, тому ми не можемо наприклад викликати arguments.map(...).

Крім того, він завжди містить усі аргументи. Ми не можемо отримати їх частково, як це було зроблено з параметрами залишку.

Тому, коли нам потрібні вбудовані методи, тоді краще використати параметри залишку.

function f() {
  let showArg = () => alert(arguments[0]);
  showArg();
}

f(1); // 1

Синтаксис розширення

Ми тільки що побачили, як отримати масив зі списку параметрів.

Але іноді нам потрібно зробити зворотнє.

Наприклад, є вбудована функція Math.max що повертає найбільше число зі списку:

alert( Math.max(3, 5, 1) ); // 5

Тепер припустимо, що у нас є масив [3, 5, 1]. Як нам викликати Math.max з цим?

Передати “як є” не вийде, бо Math.max очікує список числових аргументів, а не єдиний масив:

let arr = [3, 5, 1];

alert( Math.max(arr) ); // NaN

І, звісно ж, ми не можемо вручну перераховувати елементи в коді Math.max(arr[0], arr[1], arr[2]), тому що ми можемо не знати, скільки їх існує. Під час виконання нашого сценарію їх може бути багато, а може і не бути. І це було б потворно.

Нам допоможе синтаксис розширення! Він схожий на параметри залишку, також використовуються ..., але працює все навпаки.

Коли ...arr використовується у виклику функції, він “розширює” повторюванний об’єкт arr до списку аргументів.

Для Math.max:

let arr = [3, 5, 1];

alert( Math.max(...arr) ); // 5 (перетворює масив у список аргументів)

Таким чином, ми також можемо передати кілька ітерацій:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(...arr1, ...arr2) ); // 8

Ми навіть можемо поєднати синтаксис розширення з нормальними значеннями:

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];

alert( Math.max(1, ...arr1, 2, ...arr2, 25) ); // 25

Також синтаксис розширення можна використовувати для об’єднання масивів:

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, then arr, then 2, then arr2)

У наведених вище прикладах ми використовували масив для демонстрації синтаксису розширення, але підходить будь-який повторюванний об’єкт.

Наприклад, тут ми використовуємо синтаксис розширення, щоб перетворити рядок у масив символів:

let str = "Hello";

alert( [...str] ); // H,e,l,l,o

Синтаксис розширення внутрішньо використовує ітератори для збору елементів так само, як це робить for..of.

Отже, для рядка, for..of повертає символи так само ...str повертає "H","e","l","l","o". Список символів передається в ініціалізатор масиву [...str].

Для цього конкретного завдання ми також могли б використовувати Array.from, тому що він перетворює ітерабельний об’єкт (як рядок) на масив:

let str = "Hello";

// Array.from перетворює ітерабельний об'єкт в масив
alert( Array.from(str) ); // H,e,l,l,o

Результат такий самий як [...str].

Але між Array.from(obj) та [...obj] є тонка різниця:

• Array.from працює як з масиво-подібними об’єктами, так і з об’єктами, що ітеруються.
• Синтаксис розширення працює тільки з ітераторами.

Отже, для завдання перетворити щось на масив Array.from буде більш універсальним.

Створити копію масива/об’єкта

Пригадайте, коли ми говорили Object.assign() в минулому розділі?

Те ж саме можна зробити і з синтаксисом розширення.

let arr = [1, 2, 3];

let arrCopy = [...arr]; // розширить масив у список параметрів
                        // а потім помістіть результат у новий масив

// чи мають масиви однаковий вміст?
alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true

// чи масиви однакові?
alert(arr === arrCopy); // false (не однакові посилання)

// зміна нашого початкового масиву не змінює копію:
arr.push(4);
alert(arr); // 1, 2, 3, 4
alert(arrCopy); // 1, 2, 3

Зауважте, що те ж саме можна зробити, щоб зробити копію об’єкта:

let obj = { a: 1, b: 2, c: 3 };

let objCopy = { ...obj }; // розширить об'єкт у список параметрів
                          // потім поверне результат у новий об’єкт

// чи однаковий вміст мають об’єкти?
alert(JSON.stringify(obj) === JSON.stringify(objCopy)); // true

// чи однакові об’єкти?
alert(obj === objCopy); // false (не однакові посилання)

// зміна нашого початкового об'єкта не змінює копію:
obj.d = 4;
alert(JSON.stringify(obj)); // {"a":1,"b":2,"c":3,"d":4}
alert(JSON.stringify(objCopy)); // {"a":1,"b":2,"c":3}

Цей спосіб копіювання об’єкта набагато коротший, ніж let objCopy = Object.assign({}, obj) чи для масиву let arrCopy = Object.assign([], arr) тому ми вважаємо за краще використовувати його, коли це можливо.

Підсумки

Коли ми бачимо "..." у коді це або залишкові параметри, або синтаксис розширення.

Існує простий спосіб відрізнити їх:

• Коли ... находиться в кінці параметрів функції, це “залишкові параметри” і він збирає решту переданих аргументів у масив.
• Коли ... виникає під час виклику функції чи чогось подібного, це називається “синтаксисом розширення” і розширює масив у список.

Використовуйте паттерни:

• Залишкові параметри використовуються для створення функцій, які приймають будь-яку кількість аргументів.
• Синтаксис розширення використовується для передачі масиву у функції, які зазвичай вимагають список із багатьох аргументів.

Разом вони допомагають легко переміщатися між списком та масивом параметрів.

Усі аргументи виклику функції також доступні в “олдскульному” ітерабельному об’єкті arguments.