Three Dots in JavaScript

Three Dots in JavaScript (…) – Spread in Array Literals explained!

If you came across some code with three dots in JavaScript in combination with arrays and you have no clue what that means, you came to the right place. I will give you a thorough explanation. The three dots in JavaScript are a spread operator and there are two use cases where they are used: Arrays and Objects. In this article, we are looking at spread in array literals. Another separate article will cover spread in object literals.

The three dots in JavaScript, or the spread operator in array literals, was introduced with ES6, so if you have only worked with older versions of JavaScript, this might be your first encounter with the spread operator.

What are the three dots used for in JavaScript arrays?

The three dots in JavaScript are used to concatenate two or multiple arrays. The spread operator was introduced to make this job easier, or better said, make the code shorter.

The classic JavaScript method: concat()

The classic method of combining two arrays in JavaScript was the concat() method. Let’s say we have two arrays with car brands and we want to create another variable that combines those two arrays, so we know which cars are available for sale in our dealership.

let bmw = [ '330', '550', 'E36' ];
let audi = [ 'A4', 'A5', 'A6' ];

To use the classic way, we would have to write something like this.

let availableCars = bmw.concat(stale);
console.log(availableCars);

The resulting output would be:

[ '330', '550', 'E36', 'A4', 'A5', 'A6' ]

The ES6 spread in array literals method

Using the new spread method, it would look something like this:

let availableCars = [ ...bmw, ...audi ];
console.log(availableCars);

With the resulting output of:

[ '330', '550', 'E36', 'A4', 'A5', 'A6' ]

Why would this be useful?

It becomes useful once we build functions with it. Let’s assume we want to choose a random car from the audi array and remove it from the array. After that, we want to update availableCars again to represent a list of remaining vehicles ready for sale in our store.

First, we need a function to choose a random car (we can also just choose a car we want to be removed, but let’s have a bit more fun here, try this on your own before looking up the solution below for a little challenge!).

The “choose a random item from the array” function

function choice(items) {
  let idx = Math.floor(Math.random() * items.length);
  return items[idx];
}

This will return a random item from the array we pass to it.

Next, we need a function to slice the randomly selected car model out of our existing array and then add both arrays together, showing the remaining cars.

Using the spread method in array literals

function remove(item, items) {
  for (let i = 0; i < items.length; i++) {
    if (items[i] === item) {
      return [ ...items.slice(0, i), ...items.slice(i + 1) ];
    }
  }
}

Now we have to put it all together, call our functions and return our results.

function remove(item, items) {
  for (let i = 0; i < items.length; i++) {
    if (items[i] === item) {
      return [ ...items.slice(0, i), ...items.slice(i + 1) ];
    }
  }
}

function choice(items) {
  let idx = Math.floor(Math.random() * items.length);
  return items[idx];
}

let bmw = [ '330', '550', 'E36' ];
let audi = [ 'A4', 'A5', 'A6' ];

let randomCar = choice(audi);

console.log(`The Random Car that is going to be removed is: ${randomCar}`);

let availableCars = remove(randomCar, audi);

let remainingCars = [ ...availableCars, ...bmw ];

console.log(remainingCars);

The result of running this code is:

The Random Car that is going to be removed is: A5
[ 'A4', 'A6', '330', '550', 'E36' ]

Conclusion

As you can see, concatenating arrays back together using the spread method is easy. You don’t need to think too much about syntax because the three dots in JavaScript are easy to remember.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: