Colevate Online Tech Tutorials

The spread syntax is an elegant and readable way to concatenate or merge multiple arrays into a single new array.

Example 1: Basic Array Merging

// Two separate arrays of numbers
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// Merge the two arrays using spread syntax
const mergedArray = [...array1, ...array2];

// Log the newly merged array
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

Explanation

This example provides a clear demonstration of merging two arrays. The spread syntax expands the elements of array1 and array2 sequentially into the mergedArray, resulting in a single, combined array.

Example 2: Merging Multiple Arrays

// Three separate arrays of strings
const groupA = ['A', 'B'];
const groupB = ['C', 'D'];
const groupC = ['E', 'F'];

// Merge all three arrays
const combinedGroups = [...groupA, ...groupB, ...groupC];

// Log the result
console.log(combinedGroups); // Output: ['A', 'B', 'C', 'D', 'E', 'F']

Explanation

The power of the spread syntax is shown here by merging more than two arrays in a single, clean expression. Each array is expanded in order, creating the combinedGroups array.

Example 3: Merging with Additional Elements

// Two arrays of numbers
const firstHalf = [10, 20];
const secondHalf = [40, 50];

// Merge arrays with an element in between
const withMiddleElement = [...firstHalf, 30, ...secondHalf];

// Log the new array
console.log(withMiddleElement); // Output: [10, 20, 30, 40, 50]

Explanation

This code shows the flexibility of the spread syntax. You can intersperse individual elements while merging arrays, allowing for dynamic construction of a new array from multiple sources.

Example 4: Merging to Create a Unique Set of Values

// Arrays with some duplicate values
const list1 = [1, 2, 3, 4];
const list2 = [3, 4, 5, 6];

// Merge using Set to automatically handle duplicates
const uniqueMerged = [...new Set([...list1, ...list2])];

// Log the array with only unique values
console.log(uniqueMerged); // Output: [1, 2, 3, 4, 5, 6]

Explanation

This advanced example first merges list1 and list2. The resulting array is then used to create a Set, which by its nature only stores unique values. The spread syntax is then used again to convert the Set back into an array.

Example 5: Merging Arrays from an Object

// An object containing arrays
const categories = {
  fruits: ['apple', 'banana'],
  vegetables: ['carrot', 'broccoli']
};

// Merge the arrays from the object's properties
const allProduce = [...categories.fruits, ...categories.vegetables];

// Log the final array
console.log(allProduce); // Output: ['apple', 'banana', 'carrot', 'broccoli']

Explanation

This illustrates merging arrays that are stored as properties of an object. The spread syntax is used on categories.fruits and categories.vegetables to combine them into the allProduce array.

Example 6: Merging with an Empty Array

// An array and an empty array
const primaryColors = ['red', 'yellow', 'blue'];
const secondaryColors = [];

// Merging with an empty array has no effect on the content
const colors = [...primaryColors, ...secondaryColors];

// Log the result
console.log(colors); // Output: ['red', 'yellow', 'blue']

Explanation

This example demonstrates that spreading an empty array into another does not add any elements or cause an error. This can be useful when one of the arrays to be merged might be empty depending on application logic.

Example 7: Conditional Array Merging

// A base array and a conditional one
const baseItems = [1, 2, 3];
const hasExtraItems = true;
const extraItems = [4, 5];

// Conditionally merge the extraItems array
const finalItems = [...baseItems, ...(hasExtraItems ? extraItems : [])];

// Log the final array
console.log(finalItems); // Output: [1, 2, 3, 4, 5]

Explanation

This code snippet shows how to conditionally include an array for merging. A ternary operator checks the hasExtraItems flag; if true, extraItems is spread, otherwise, an empty array is spread, effectively adding nothing.

JavaScript

Merging Arrays