Spread Syntax "Three-dots" Tricks You Can Use Now
This articles is created based on my own tweet posted on May 22, 2020
ES6 (ECMAScript 2015, the 6th edition) was finalized 5 years ago, and brought us a significant amount of new syntax and features to help you write complex code better and simpler.
I am assuming that many of you have consumed more calories from the syntactic sugar by adopting new features like class declarations,
const, and arrow function expression, and so on, but how about some of the lesser-known Spread operator?
Here, I would like to share some good usages of spread operator, a.k.a three-dots that I’ve found while I was coding (and StackOverflowing, I don’t lie about how I code!).
What do Three Dots do?
First, there are two “three-dots” sugars introduced in ES6. One is Rest parameter, which allows us to use an arbitrary number of arguments, and another is Spread operator, which also has the similar syntax with three dots, but it is more like the reversed version- it takes the array itself, not arguments.
In this article, I am showing tricks that uses spread syntax. Looking at the practical examples may be far easier to understand what it does than by reading the definitions!
You say “cat” so I say meow.
Let’s concatenate two arrays. Here we have two arrays that represent cat fur coat colors:
const arr1 = ['solid', 'bicolor', 'tabby']; const arr2 = ['calico', 'tortoiseshell'];
This is how we traditionally did before ES6 using
var conCats = arr1.concat(arr2); // ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']
Now you can simply write with the ES6 spread syntax like this:
const conCats = [...arr1, ...arr2]; // ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']
Convert a string to array
Have you been asked to reverse a string, or check if a string is a palindrome at job interviews? The questions you got may be more complex, but these are pretty common interview questions for software engineers.
Anyway, the first step to solve the question is likely to convert the given string to an array.
You have a given string:
const str = 'kitty';
split() to get each letter in an array:
var newArr = str.split(''); // ['k', 'i', 't', 't', 'y'];
Now with the ES6 spread syntax, you can achieve the same as:
const newArr = [...str]; // ['k', 'i', 't', 't', 'y'];
Find Max or Min
Let’s say, you have a given set of numbers,
10, 9, 6, 12
To find the largest (or smallest) number from the set of numbers, you can use
Math.min()) and pass the given numbers as input parameters like this:
var max = Math.max(10, 9, 6, 12);
Now with the ES6 spread syntax, you can pass an array of numbers:
const nums = [10, 9, 6, 12]; const max = Math.max(...nums); // 12
Copy an Array
You can also create a shallow copy of an array with the spread syntax.
You have an array,
const allCatNames = ['chewie', 'leia', 'yoda', 'chewie', 'luke', 'leia'];
And onne way to get a shallow copy of the array with the pre-ES6 is using
var allCatNamesCopy = allCatNames.slice();
Now with ES6 spread syntax, you can simply do:
const allCatNamesCopy = [...allCatNames];
Remove Dups from an Array
allCatNames above has some duplicated values (
You probably would iterate the array. And at each loop, map each value in an object to track if the key in the object is unique, and if yes, the value is pushed to a new array. Then at the end of the loop, you have the new array only with unique values.
You can actually achieve this in one line of code with spread syntax by creating a new array with combination of the spread syntax with the
const catNames = [...new Set(allCatNames)]; // ['chewie', 'leia', 'yoda', 'luke'];
Ta-da, this saves a lot of code!
Collecting HTML Elements in an Array
Let’s say, when you re trying to grab every element with the class name,
.cat, you probably use
querySelectorAll() to get the collection of the DOM nodes.
document.querySelectorAll('.cat') returns a static NodeList, which is an array-like, but not exactly an array that you can iterate over it.
So in some occasions, you need to convert a NodeList to Array. Traditionally, you probably have been writing code like this, which doesn’t seem so intuitive:
var catElementArray = .slice.call(document.querySelectorAll('.cat'));
Now with the spread syntax, you can rewrite as followings:
const catElementArray = [...document.querySelectorAll('.cat')];
This looks more intuitive, doesn’t it?
Well, if you like the three-dots notation or not, now you see that the spread operator can be quite handy when you work with arrays and objects.
I would be happy if I just convinced you to use the three-dots in your daily code from now on. Surely, there are more clever ways to write code with using the spread operator, so if you know the tricks, please share with me and the rest of the JS community!
Wants to find out more about ES.Next?
San Francisco virtual) in July and Web Directions ( Sydney virtual) in September, so I hope you can catch my talk! 🐱
comments powered by