Streamlining Arrays in JavaScript with Rest and Spread

How Three Dots Changed Everything

Photo by Bekky Bekks on Unsplash

Working with arrays in JavaScript has often involved messy, complex syntax for handling multiple parameters to functions, combining and splitting arrays, accessing elements, and more.

With ES6, the introduction of rest and spread operators — three magic dots (…) — has dramatically simplified array manipulation in JS.

These operators provide intuitive shortcuts for common array operations. The rest operator condenses elements into an array, while the spread operator expands an array into elements. Let’s explore what rest and spread allow us to achieve.

Meet the Rest Operator

The rest operator, indicated by three dots … before a parameter, collects multiple values and condenses them into a JavaScript array.

For example, here is how you would implement a function that takes unlimited numbers of arguments without rest:

function myFunc(){
  return arguments; 
}
myFunc(1, 2, 3, 4, 5); // { '0': 1, '1': 2, '2': 3, ... }

The arguments object contains all params, but isn’t a real array. With rest we instead get a proper array:

function myFunc(...numbers){
  return numbers;
}
myFunc(1, 2…