Spread syntax is one of the most useful features introduced in ECMAScript 2015 (ES6). It allows us to easily extract elements from arrays or properties from objects and insert them into new arrays or objects. This can greatly simplify our code and make it more readable.
In this guide, we’ll explore everything you need to know about spread syntax in JavaScript, including its syntax, use cases, and best practices.
Syntax
The spread syntax is denoted by three dots ... followed by an expression in parentheses (). The expression inside the parentheses should evaluate to either an array or an object. Here are some examples:
const numbers = [1, 2, 3];
const anotherNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]const person = { name: 'John', age: 30 };
const updatedPerson = { ...person, location: 'New York' }; // {name: 'John', age: 30, location: 'New York'}In the first example, we used spread syntax to create a new array called anotherNumbers, which contains all the elements of the original numbers array along with two additional values, 4 and 5.
