Three useful dots – the rest and the spread in JavaScript

Rest parameters

The rest syntax allows us to represent an indefinite number of arguments as an array. Take a look at a function that adds up all the arguments passed.

const sum = (...args) => args.reduce((prev, current) => prev + current);

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

Spread syntax

The spread operator allows us to expand iterable objects into individual elements. This functionality is opposite to what we achieved with the rest parameters. It can be applied to all iterables, such as arrays, objects, sets, maps, etc.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

Three dots in real use cases

Copying an array

The spread syntax effectively goes one level deeper while copying an array. One level means that the first level of references is copied.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Creating an array of unique elements

Create the Set which stores only unique elements and convert its back to an array.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

Concatenate arrays

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Slicing an array

const [firstElement, ...newArray] = [1, 2, 3, 4];

console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]

We can also remove n first elements with comma.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

Inserting an array at the beginning of another array

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

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

Generating an array of numbers from 0 to n

const array = [...Array(10)].map((_, i) => i);

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

Destructuring an object

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Creating a copy of an object

let person = {
  name: 'John',
  age: 25,
  wallet: {
    sum: 500,
    currency: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
//   name: 'John',
//   age: 25,
//   wallet: {
//     sum: 500,
//     currency: 'USD'
//   }
// }

Note that the copy of the object that is created is a new object with all the original object’s properties but none of its prototypal information.

person.age = 20;

console.log(person.age); // 20
console.log(personCopy.age); // 25

Notice that spread syntax creates ‘shallow’ copy of the object, so ‘wallet’ property will be copied only as a reference to the original sub-object. For deep-cloning you can use JSON stringify/parse approach or ‘cloneDeep’ method provided by Lodash depending on your object’s complexity. In some cases this method can be helpful as well:

let personCopy = { ...person, wallet = {...person.wallet}}; 

Conditionally adding properties to objects

We can conditionally add properties to a new object that we are creating by making use of the spread operator along with short circuit evaluation.

const colors = {
  red: '#ff0000',
  green: '#00ff00',
  blue: '#0000ff'
};
const black = {
  black: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
//   red: '#ff0000',
//   green: '#00ff00',
//   blue: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
//   red: '#ff0000',
//   green: '#00ff00',
//   blue: '#0000ff'
//   black: '#000000'
// }

Splitting a string to characters

This is similar to calling the split method with an empty string as the parameter.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Read more:

3 Common Challenges of Software Product Development for Startups

The Best Type of Projects for Java

How not to kill a project with bad coding practices?