What is Array Spread Syntax?

The spread syntax (...) is a powerful feature in JavaScript introduced in ES6 (ECMAScript 2015). It allows you to expand iterable objects (like arrays, strings, and even NodeList objects) into places where zero or more arguments (for function calls) or elements (for array literals) are expected. Think of it as "unpacking" the contents of an iterable. It provides a more concise and readable way to work with arrays compared to older methods.

Copying Arrays

Using the spread syntax provides a concise and efficient way to create a shallow copy of an array. Unlike directly assigning one array to another (which creates a reference), the spread syntax creates a new array with the same elements.

 const originalArray = [1, 2, 3];
        const copiedArray = [...originalArray]; // Creates a new array with the same elements

        console.log(copiedArray); // Output: [1, 2, 3]
        console.log(originalArray === copiedArray); // Output: false (different arrays) 

Important: It is a shallow copy. If the original array contains nested objects or arrays, the copied array will still hold references to those same nested objects/arrays. Modifying the nested object in one will affect the other.

Concatenating Arrays

The spread syntax makes concatenating arrays much simpler and more readable than using concat().

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

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

You can also easily insert elements or other arrays in between:

 const array3 = [7, 8, 9];
        const complexArray = [...array1, 0, ...array2, ...array3, 10];

        console.log(complexArray); // Output: [1, 2, 3, 0, 4, 5, 6, 7, 8, 9, 10] 

Passing Array Elements as Function Arguments

The spread syntax allows you to pass elements of an array as individual arguments to a function. This is particularly useful when a function expects a specific number of arguments and you have those arguments stored in an array.

 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 

Spread Syntax vs. Rest Parameters

It's important not to confuse spread syntax with *rest parameters*. While they both use ..., their purpose is the opposite. Spread syntax *expands* an iterable into individual elements, while rest parameters *collect* multiple arguments into an array.

 function myFunc(firstArg, ...restOfArgs) {
          console.log("First argument:", firstArg);
          console.log("Rest of the arguments:", restOfArgs);
        }

        myFunc(1, 2, 3, 4, 5);
        // Output:
        // First argument: 1
        // Rest of the arguments: [2, 3, 4, 5]