Rest Parameters & Spread Syntax

Привет! Если вы хотите изучить или просто пересмотреть синтаксис REST Parameters & SPREAD, то этот блог для вас. Мы раскроем обе концепции JavaScript в простой и доступной для понимания манере.

Начнем с ПАРАМЕТРОВ REST

Представьте, что вы пишете функцию для сложения двух чисел на JavaScript. Она будет выглядеть примерно так

  function addTheNumbers (numberOne, numberTwo)  {
    return numberOne + numberTwo;
  }
  // PRINTING THE VALUES

  console.log(addTheNumbers(2,3)); // expected output : 5

Работает отлично, да! А что, если кто-то попросит вас создать функцию для сложения 5 чисел? Вручную добавлять параметр numbers до numerFive будет неудобно.

Вот тут-то и пригодятся REST-параметры…..

Давайте быстро перейдем к тому, как их использовать. REST-параметр может быть включен в определение функции с помощью трех точек ..., за которыми следует имя массива, который будет их содержать.

  function addTheNumbers (...args)  {
    let sum = 0;
    for (let arg of args){
        sum = sum + arg
    }
    return sum
  }

  // PRINTING THE VALUES

  console.log(addTheNumbers(1,2,3,4,1)); //expected output : 11

Точки буквально означают «собрать остальные параметры в массив».

Важное замечание — Параметры REST должны быть в конце.

Ниже приведен неправильный способ использования параметров REST

function f(arg1, ...rest, arg2) { // arg2 after ...rest is incorrect
}

Давайте рассмотрим еще один пример

const funcNames = (name, surname, ...args) => {
    console.log(name, surname, args);
}

funcNames("Raj", "Bhinde", "Dhaval","Bhinde")

Вывод — Raj Bhinde [ 'Dhaval', 'Bhinde' ]

Здесь мы увидели, что он взял имя, фамилию & затем сконденсировал все остальные параметры в один массив. Вы также можете получить доступ к индексу этих массивов, используя args[0].

Теперь, прежде чем мы перейдем к синтаксису Spread, рассмотрев вышеприведенные примеры, давайте вспомним, что синтаксис REST собирает несколько элементов и «сгущает» их в один элемент, как мы видели выше.

Синтаксис SPREAD противоположен синтаксису rest. Хотя синтаксис выглядит одинаково, они имеют немного разную семантику.

Прежде чем рассказать, что делает Spread, мы рассмотрим на примере, что делает SPREAD.

Допустим, у нас есть функция, которая умножает числа, переданные в качестве аргументов.

const muliplyTheNumbers = (x,y,z) => {
    return x*y*z
}

console.log(muliplyTheNumbers(1,2,3)); //expected output : 6

Это работало бы прекрасно, но теперь давайте предположим, что у нас есть массив чисел, которые мы хотели бы перемножить.

const arrayOfNumbers = [2,3,5,2,2];

Если вы передадите массив в вызове функции, она выдаст NaN. Это потому, что функция ожидает список числовых аргументов & а не один массив.

Вот когда синтаксис Spread приходит на помощь!

console.log(muliplyTheNumbers(...arrayOfNumbers));

Когда в вызове функции используется …arrayOfNumbers, он «расширяет» итерируемый объект arrayOfNumbers в список аргументов.

Мы также можем передавать несколько массивов с помощью синтаксиса Spread

const arrayOfNumbersTwo = [10,2]; может быть передано как muliplyTheNumbers(...arrayOfNumbers,...arrayOfNumbersTwo); & абсолютно корректно. Мы также можем добавлять обычные значения в начале/между/в конце вызова функции.

Синтаксис Spread также может быть использован для объединения двух массивов

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

console.log([...arr1,...arr2]); output: ['1', '2', '3', '4', '5']
console.log(...arr1,...arr2); output : 1 2 3 4 5

В приведенных выше примерах мы использовали массив, но spread работает с любым итерабельным массивом.

let stringValue = "TheBoys";
console.log([...stringValue]); output : ['T', 'h', 'e', 'B', 'o', 'y', 's']

Его также можно использовать для клонирования объекта, как здесь —

const obj1 = {
    firstName : "Raj"
}

const obj2 = {
    ...obj1,
    surname : "Bhinde"
}

console.log(obj2);// expected output : { firstName: 'Raj', surname: 'Bhinde' }

Аналогичным образом мы можем объединить два объекта.

Вот и все, друзья! Спасибо, что дочитали до конца. Я надеюсь, что это было хорошее чтение для вас.

Вот краткое резюме, чтобы не забыть разницу между REST & SPREAD

ОПЕРАТОР REST —

• Оператор REST известен для деструктуризации элементов, затем он собирает оставшийся элемент, превращая его в массив.
• Оператор REST должен быть в конце аргументов, иначе он не работает.

ОПЕРАТОР SPREAD —

• Оператор SPREAD извлекает собранные элементы в один элемент.
• SPREAD может быть использован в любом месте, независимо от его положения.