## Spread Syntax vs. Rest Parameters: What\'s the Difference and How Do They Work?

Understanding Spread Syntax and Rest Parameters in ES2015 / ES6

The introduction of ES2015 introduced two new syntaxes, spread syntax and rest parameters, to facilitate flexible data handling in JavaScript. While both superficially resemble ellipsis operators, they serve distinct purposes.

Spread Syntax

Spread syntax, denoted by three dots (...var), expands an iterable (such as an array) into individual elements. It is primarily used in three scenarios:

• Combining arrays: Merge multiple arrays into a single array:

  <code class="js">var abc = ['a', 'b', 'c'];
  var def = ['d', 'e', 'f'];
  var alpha = [ ...abc, ...def ];
  console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f']</code>

• Passing arguments to functions: Spread an array of arguments over function parameters:

  <code class="js">function sum(...args) {
  return args.reduce((total, val) => total + val, 0);
  }
  const values = [1, 2, 3, 4];
  console.log(sum(...values)); // 10</code>

• Creating shallow object copies: Expand object keys into a new object:

  <code class="js">const person1 = { name: 'John', age: 30 };
  const person2 = { ...person1, city: 'New York' };</code>

Rest Parameters

Unlike spread syntax, rest parameters are only used in function definitions. They are denoted by three dots and a variable name (...var). Rest parameters collect an indefinite number of arguments into an array.

<code class="js">function logRest(...args) {
  console.log(args); // args == [ 'a', 'b', 'c', 'd', 'e' ]
}
logRest('a', 'b', 'c', 'd', 'e');</code>

Key Differences

• Usage: Spread syntax expands arrays, whereas rest parameters collect arguments.
• Context: Spread syntax is used in expressions, while rest parameters are used in function definitions.
• Output: Spread syntax produces individual elements, while rest parameters produce arrays.

Conclusion

Spread syntax and rest parameters enhance JavaScript's data manipulation capabilities, providing convenient ways to create new arrays, spread arguments, and collect arguments in functions. Understanding their distinct uses enables developers to leverage these syntaxes effectively for greater code flexibility and conciseness.

The above is the detailed content of ## Spread Syntax vs. Rest Parameters: What\'s the Difference and How Do They Work?. For more information, please follow other related articles on the PHP Chinese website!