Оператор spread … у JavaScript

Оператор spread ... було представлено у специфікації ES6. Він переважно використовується для розкладання ітерабельних об’єктів, таких як масиви, на окремі елементи:

const letters = ['а', 'b', 'c'];

console.log(letters); // [ 'а', 'b', 'c' ]
console.log(...letters); // а b c

Оператор spread дає змогу ефективно об’єднувати та копіювати масиви, або передавати елементи масиву у функції, без потреби явного ітераційного перебору.

Базовий синтаксис та використання

Оператор spread визначається трьома крапками ... . Розглянемо приклад поверхневого копіювання для масиву та об’єкту:

// Example arrays
const numbers = [1, 2, 3];
const updatedNumbers = [...numbers, 4, 5, 6];

console.log(updatedNumbers); // [1, 2, 3, 4, 5, 6]

// Example objects
const person = { name: 'Alice', age: 25 };
const updatedPerson = { ...person, city: 'New York' };

console.log(updatedPerson); // { name: 'Alice', age: 25, city: 'New York' }

Створення копій масивів, об’єктів

Створення поверхневої копії масиву за допомогою оператора spread:

const original = [1, 2, 3];
const copу = [...original];

console.log(copу); // [1, 2, 3]

Поверхневе копіювання створює новий масив, але елементи всередині нього є посиланнями на оригінальні елементи. Це означає, що зміни в одному масиві, відображатимуться в іншому. Розглянемо приклад:

const personOne = { name: 'Alice', age: 25 };
const personTwo = { name: 'Jhon', age: 30 };

const persons = [personOne, personTwo];
const personsCopy = [...persons];

console.log(persons);
console.log(personsCopy);
// [ { name: 'Alice', age: 25 }, { name: 'Jhon', age: 30 } ]
// [ { name: 'Alice', age: 25 }, { name: 'Jhon', age: 30 } ]

persons[0].name = 'Kendra';

console.log(persons);
console.log(personsCopy);
// [ { name: 'Kendra', age: 25 }, { name: 'Jhon', age: 30 } ]
// [ { name: 'Kendra', age: 25 }, { name: 'Jhon', age: 30 } ]

В прикладі вище, зміна одного з елементів оригінального масиву persons[0].name = 'Kendra', призвела до зміни в поверхневій копії цього масиву personsCopy, отриманій за допомогою оператора spread.

Поверхневі копії об’єктів можна створити подібно до масивів:

const original = { name: 'Alice', age: 25 };
const copy = { ...original };

console.log(copy); // { name: 'Alice', age: 25 }

Об’єднання (Merging) масивів, об’єктів

Оператор spread можна використовувати для об’єднання масивів:

const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
const mergedArray = [...arrayOne, ...arrayTwo];

console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

Схожий синтаксис використовується для об’єднання об’єктів:

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

console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

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

Оператор spread можна використовувати для передачі елементів масиву, в якості окремих аргументів у функцію:

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

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log('Result:', result); // Result: 6

Замість того, щоб вказувати кожен аргумент окремо, можна за допомогою оператора spread розпакувати масив значень у параметри функції. Це може бути корисним для спрощення процесу передачі аргументів змінної довжини у функцію.

Підсумок

Оператор spread – є корисним інструментом у JavaScript. Незалежно від того, чи ви об’єднуєте масиви, копіюєте об’єкти або передаєте аргументи у функцію, оператор spread спрощує деякі поширені завдання, роблячи код простішим.

Мітки: