Spread and Rest

JavaScript Spread vs Rest Overview

JavaScript spread and rest syntax both use three dots, but they work in different ways. The spread syntax expands arrays, objects, or iterable values, while the rest syntax collects multiple values into a single array or object.

Spread and rest are modern ES6 features commonly used in React props, function parameters, array copying, object merging, destructuring, API data processing, and state updates in JavaScript applications.

JavaScript Spread and Rest Example

// Spread syntax

const numbers = [1, 2, 3];

const moreNumbers = [...numbers, 4, 5];

console.log(moreNumbers);

// Rest syntax

function addNumbers(...values) {
  return values.reduce(function(total, value) {
    return total + value;
  }, 0);
}

console.log(addNumbers(10, 20, 30));

In this example, spread expands an existing array into a new array, while rest collects multiple function arguments into a single array called values.

Top 10 JavaScript Spread and Rest Examples

The following examples show common spread and rest patterns used in modern JavaScript projects, including arrays, objects, function parameters, destructuring, and React-style immutable updates.

Best Practices

• Use spread syntax to copy arrays and objects without mutating the original value.
• Use rest parameters when a function accepts a flexible number of arguments.
• Use object spread for clean state updates in React and modern JavaScript.
• Remember that spread creates a shallow copy, not a deep copy.
• Use rest destructuring to collect remaining properties or array items.
• Place rest parameters at the end of a function parameter list.
• Avoid spreading very large arrays into functions when performance matters.
• Use clear variable names such as remainingItems or otherProps.

Common Mistakes

• Confusing spread syntax with rest syntax because both use three dots.
• Expecting spread to create a deep copy of nested objects.
• Placing a rest parameter before other function parameters.
• Using object spread on unsupported older environments without transpilation.
• Accidentally overwriting object properties when merging objects.
• Using spread with non-iterable values in array contexts.
• Writing overly complex destructuring with rest syntax.

Key Takeaways

• Spread syntax expands values from arrays, objects, or iterables.
• Rest syntax collects multiple values into an array or object.
• Both spread and rest use three dots but serve opposite purposes.
• Spread is useful for copying, merging, and passing values.
• Rest is useful for flexible function parameters and destructuring.
• Spread creates shallow copies, so nested data still needs careful handling.