How Three Dots Manipulate Arrays in JavaScript
By: Amy J. Andrews
Tags: Arrays, Web Development, ES6, Javascript Development, Javascript Tips

How Three Dots Manipulate Arrays in JavaScript

The spread operator is one of the great features in ES6. It comes with some benefits to simplify your codebase.

In this article, you will know how the simple three dots (…) can manipulate arrays better than other methods. Keep reading.

1. Clone Array

Junior developers who jump into the JavaScript world in the first place might think cloning an array is damn easy. Just assign the value of the given array to another variable like this:

let names = [‘Amy’, ‘James’, ‘Joey’];

let clonedNames = names;

console.log(clonedNames); // [“Amy”, “James”, “Joey”]

Big mistake.

Because arrays in JavaScript are reference types, the above example is about two variables pointing to the same memory address. If you change the value of one of them, the other will change as well.

clonedNames[0] = ‘David’;

console.log(clonedNames); // [“David”, “James”, “Joey”]

console.log(names); // [“David”, “James”, “Joey”]

As you can see, we change the value of the first element of clonedNames , the first one in the original array is changed as well. So, it’s not cloning.

Let’s fix it:

let names = [‘Amy’, ‘James’, ‘Joey’];

let clonedNames = [...names];

clonedNames[0] = ‘David’;

console.log(clonedNames); // [“David”, “James”, “Joey”]

console.log(names); // [“Amy”, “James”, “Joey”]

This time, we use the three dots (…) . The actual values are now copied to the `clonedNames` variable, not the memory address anymore. Changing values of `clonedNames` doesn’t affect the original array values.

2. Convert Node Lists to Arrays

This one is very useful when you need to handle html DOM.

let nodes = document.querySelectorAll(‘ul’);

console.log(nodes); // object NodeList

let array = [...nodes];

console.log(array); // [<ul elements>]

3. Convert Strings to Arrays

Converting a string to an array couldn’t be easier with the spread operator:

let name = ‘Joey’;

let nameArray = [...name];

console.log(nameArray);

No extra method. No complicated algorithm. Just three simple dots (…)

4. Merge Arrays

We have a few ways to merge arrays. Using spread is the easiest and fastest way.

let languages1 = [‘JavaScript’, ‘Python’, ‘C#’];

let languages2 = [‘C++’, ‘Kotlin’, ‘PHP’, ‘Ruby’];

let mergedLanguages = [...languages1, ...languages2];

console.log(mergedLanguages); //[“JavaScript”, “Python”, “C#”, “C++”, “Kotlin”, “PHP”, “Ruby”]

Or you even can insert arrays at any index of a given array.

let languages1 = [‘JavaScript’, ‘Python’, ‘C#’];

let languages2 = [‘C++’, ‘Kotlin’, ...languages1, ‘PHP’, ‘Ruby’];

console.log(languages2); // [“C++”, “Kotlin”, “JavaScript”, “Python”, “C#”, “PHP”, “Ruby”]

5. Convert Sets to Arrays

If you are given a Set and need to work with an indexed collection rather than a keyed collection, you have to convert that Set to an Array. Spread operator can help you complete that task easily.

let set = new Set([2, 0, 3, 1]);

let array = [...set];

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

6. Convert Maps to Arrays

let map = new Map().set(‘key1’, 1).set(‘key2’, 2).set(‘key3’, 3);

let array = [...map];

console.log(array); // [[“key1”, 1], [“key2”, 2], [“key3”, 3]]

Or just map keys/values:

let keys = [...map.keys()];

console.log(keys); // [“key1”, “key2”, “key3”] let values = [...map.values()];

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

7. Pass Arguments as Arrays

Some built-in functions JavaScript can be called with any number of arguments like Math.min() . You have an array but you can’t just pass that array directly to the function because it takes arguments individually, not in the whole array.

let numbers = [2, 5, 1, 7, 4, 3];

let min = Math.min(numbers);

console.log(min); // NaN

As you can see in the example above, it doesn’t work. Fortunately, spread operator can solve the problem.

let numbers = [2, 5, 1, 7, 4, 3];

let min = Math.min(...numbers);

console.log(min); // 1

Conclusion

There are many ways to solve an array problem in JavaScript. Take merging arrays for example, we can use .concat() , .push() , or .apply() functions. But the cleanest way is using the spread operator. It’s not thing much but three simple dots (…)

Hope you can apply the usages above to your projects.