JavaScript Spread Syntax – Proper Understanding and Usage

😄 This post is based on the content from coding.courses.

Definition and Usage

The spread syntax in JavaScript allows you to individually expand (spread) the items of an object that can be iterated over by value—such as arrays, strings, or DOM collections.
The Spread Syntax is also known as the 'Spread Operator'.
Using the Spread Syntax allows you to easily copy or merge items from arrays or objects.
It enables you to write more concise and simpler code, making it very convenient.

Spread Syntax Format

The Spread Syntax is very simple.
It takes the form of three dots (...) followed by an object that can be iterated over by value—such as an array, string, or DOM collection.

Basic Example

The following example demonstrates how to easily merge two arrays using the Spread Syntax. As shown in the example, the Spread Syntax allows you to easily copy or merge arrays or objects, enabling you to write shorter and simpler code.

const arr1 = [1, 2];
const arr2 = [3, 4];
const mergedArr = [...arr1, ...arr2];  // Merging arrays

console.log(mergedArr);  // [1, 2, 3, 4]

Targets for Using the Spread Syntax

The spread syntax can only be used on objects that can be iterated over by value.
Objects that can be iterated over by value—that is, the targets on which the spread syntax can be used—are as follows:

• Arrays, strings, Map, Set, and other objects with Iteration Protocols applied
• HTMLCollection and NodeList objects, which are DOM collections
• Certain array-like objects such as arguments
• User-defined objects with Iteration Protocols applied

# Using the Spread Syntax with Object Literals

Plain objects, such as those created with object literals, can be iterated over by their keys, but not by their values.

This means they are not direct targets for the spread syntax. However, starting from ECMAScript 2018 (ES9), the spread syntax can be used inside object literals to expand the properties of another object literal for merging or copying.

Practical Examples

# Extending Arrays

The Spread Syntax is very convenient for merging or expanding the elements of an array. You can easily copy elements from an existing array to a new array, add new elements, or merge with another array.

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

// Merging two arrays
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

// Expanding the array by adding new elements
const extendedArray = [...arr1, 4, 5];
console.log(extendedArray); // Output: [1, 2, 3, 4, 5]

# Passing Arguments to Functions

You can use the Spread Syntax to pass arrays or argument lists when calling functions. This allows you to pass individual arguments from an array, even when the function accepts a variable number of arguments.

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

const numbers = [1, 2, 3];

const result = sum(...numbers); // Equivalent to sum(1, 2, 3)
console.log(result); // Output: 6

# Handling DOM with NodeList

Using the Spread Syntax, beginners can more easily work with DOM objects like NodeList. NodeList is a collection of DOM elements that has an array-like object that has an array-like structure, but due to certain behaviors (such as not directly supporting array methods), it can be tricky for beginners.

The Spread Syntax simplifies converting a NodeList into an array or merging it with other arrays.

// Select all elements with the .item class in the HTML document
const items = document.querySelectorAll(".item");  // Returns a NodeList

// Convert the NodeList to an array using the Spread Syntax
const itemsArray = [...items];  

// Now that itemsArray is an array, you can use array methods
itemsArray.forEach(item => {
    console.log(item.textContent);  // Output text content of each .item element
});

// Merging with another array
const newItems = ["New Item 1", "New Item 2"];
const allItems = [...itemsArray, ...newItems];  // Merging the NodeList with the new array

console.log(allItems);  // NodeList + new array

References

JavaScript Spread Syntax – Proper Understanding and Usage - codingCourses

The spread syntax (also called the "spread operator") in JavaScript allows you to individually expand (spread) the items of an object that can be iterated over by value—such as arrays, strings, or DOM collections.

coding.courses