Операції rest та spread

9.1 Spread (оператор розпакування)

Операції rest і spread у JavaScript надають широкі можливості для роботи з масивами, об'єктами та функціями. Ці операції допомагають спростити код, роблячи його більш виразним і гнучким. У цій лекції ми детально розглянемо основні поняття rest і spread, а також їх приклади використання.

Оператор spread (...) дозволяє «розпаковувати» масиви та об'єкти в місцях, де очікуються нуль або більше елементів. Це може бути корисним при копіюванні, об'єднанні масивів або об'єктів, а також при передачі аргументів у функції.

Приклад 1: Копіювання масиву

У цьому прикладі copiedArray є копією originalArray.

Тут оператор … розпаковує масив у вигляді списку змінних, а оператор [] запаковує набір змінних у новий масив:

    
      const originalArray = [1, 2, 3];
      const copiedArray = [...originalArray];

      console.log(copiedArray); // Виведе: [1, 2, 3]
    
  

Приклад 2: Об'єднання масивів

У цьому прикладі два масиви array1 та array2 об'єднуються в один масив combinedArray.

Тут оператор … розпаковує обидва масиви у вигляді списку змінних, а оператор [] запаковує набір змінних у новий масив:

    
      const array1 = [1, 2, 3];
      const array2 = [4, 5, 6];
      const combinedArray = [...array1, ...array2];

      console.log(combinedArray); // Виведе: [1, 2, 3, 4, 5, 6]
    
  

Приклад 3: Передача аргументів у функцію

У цьому прикладі масив numbers розпаковується у три аргументи для функції sum():

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

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Виведе: 6
    
  

Приклад 4: Копіювання об'єкта

У цьому прикладі copiedObject є копією originalObject:

    
      const originalObject = { a: 1, b: 2 };
      const copiedObject = { ...originalObject };

      console.log(copiedObject); // Виведе: { a: 1, b: 2 }
    
  

Приклад 5: Об'єднання об'єктів

У цьому прикладі два об'єкти obj1 та obj2 об'єднуються в один об'єкт combinedObject:

    
      const obj1 = { a: 1, b: 2 };
      const obj2 = { c: 3, d: 4 };
      const combinedObject = { ...obj1, ...obj2 };

      console.log(combinedObject); // Виведе: { a: 1, b: 2, c: 3, d: 4 }
    
  

9.2 Rest (оператор залишкових параметрів)

Оператор rest (...) дозволяє збирати кілька елементів у масив. Це особливо корисно при роботі з функціями, які приймають змінну кількість аргументів, а також при деструктуризації масивів та об'єктів.

Приклад 1: Залишкові параметри у функціях

У цьому прикладі функція sum() приймає будь-яку кількість аргументів і сумує їх:

    
      function sum(...numbers) {
        return numbers.reduce((acc, num) => acc + num, 0);
      }

      console.log(sum(1, 2, 3)); // Виведе: 6
      console.log(sum(4, 5, 6, 7)); // Виведе: 22
    
  

Приклад 2: Деструктуризація масивів з rest

У цьому прикладі перші два елементи масиву присвоюються змінним first і second, а решта елементів збираються в масив rest:

    
      const [first, second, ...rest] = [1, 2, 3, 4, 5];

      console.log(first);  // Виведе: 1
      console.log(second); // Виведе: 2
      console.log(rest);   // Виведе: [3, 4, 5]
    
  

Приклад 3: Деструктуризація об'єктів з rest

У цьому прикладі властивості a та b витягуються в окремі змінні, а решта властивостей збираються в об'єкт rest:

    
      const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };

      console.log(a);  // Виведе: 1
      console.log(b);  // Виведе: 2
      console.log(rest); // Виведе: { c: 3, d: 4 }
    
  

9.3 Використання rest та spread в реальних задачах

Приклад 1: Об'єднання масивів з умовою

У цьому прикладі користувацькі налаштування userSettings перевизначають значення за замовчуванням defaultSettings:

    
      const defaultSettings = { theme: 'dark', showNotifications: true };
      const userSettings = { showNotifications: false, fontSize: 14 };
      const settings = { ...defaultSettings, ...userSettings };

      console.log(settings); // Виведе: { theme: 'dark', showNotifications: false, fontSize: 14 }
    
  

Приклад 2: Поділ масиву на частини

У цьому прикладі масив numbers поділяється на дві частини після вилучення перших двох елементів:

    
      const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [first, second, ...rest] = numbers;
      const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
      const secondHalf = rest.slice(Math.floor(rest.length / 2));


      console.log(firstHalf); // Виведе: [3, 4, 5, 6]
      console.log(secondHalf); // Виведе: [7, 8, 9, 10]