Newer versions of JavaScript have brought improvements to the language in terms of expressiveness and ease of development and writing code. In this article, you will be learning about one of such improvements called, Spread operator.
What is a Spread operator?
Spread Operator allows an expression to be expanded in places where zero or multiple variables or arguments are expected. For example, create two arrays. You have to insert the elements of the first array in the middle of the second array. Doing below is not sufficient.
To know more about arrays in JavaScript, you can read the blog on Learn About Arrays in JavaScript.
let fist = [3, 4]; let second = [1, 2, first, 5, 6]; console.log(second); // [1, 2, [3, 4], 5, 6]
In the above snippet of code, the first array is inserted in the second array as an array and not its values. This is called nesting of arrays. By using the spread operator, you can solve the current problem we have.
// using spread operator let fist = [3, 4]; let second = [1, 2, ...first, 5, 6]; console.log(second); // [1, 2, 3, 4, 5, 6]
The … is called spread syntax and is often. In the above example, as you can see, when we create the second array and use the spread operator on the first array, instead of just being inserted, the first array expands. Each element in the first array is inserted into the second array. This means that instead of nested arrays, we are left with a simple array of numbers ranging from 1 to 6.
In below, you are going to learn different scenarios where you can use a Spread operator.
Combining Two Arrays
Spread operator saves a lot of boilerplate when it comes to combining two arrays. If you want to combine two arrays using spread syntax and place elements at any point within the array, you can do as follows:
let arr1 = ['two', 'three']; let arr2 = ['one', ...arr1, 'four', 'five']; // ["one", "two", "three", "four", "five"]
Copying Arrays
Shallow copying of two arrays can be done using Spread Operator.
let arr = [1, 2, 3]; let arr2 = [...arr];
By shallow copy, it is meant that you are copying reference one array two another on each index position.
Using With Math Functions
The spread operator expands an array into different arguments so any function where the spread is used as the argument can be used by functions that can accept any number of arguments. In the example below, we use spread syntax with two math functions: min and max. min is used to find a minimum value in the existing or given input. max is used to find the largest value in the given input. In the case below, the provided input is an array with four different numbers.
let numbers = [9, 4, 7, 1]; Math.min(...numbers); // Output: 1 Math.max(...numbers); // Output: 9
Spread Operator for Objects
The Spread syntax lets you do the equivalent of Object.assign which means copying the values of an object into a new one. Object.assign() does require some amount of boilerplate code. Using the below technique, you can surely save a line or two.
const obj1 = { a: 'a', b: 'b' };
const obj2 = { c: 'c', ...obj1 };
console.log(obj2);
// Output: {a: 'a', b: 'b', c: 'c'}
Converting a String to an Array
You can also use spread syntax to convert an existing string into an array. Each character of the string will be represented by a unique index value in that array. To do so, just use the spread syntax within a pair of square brackets []. For example:
var str = 'hello'; var chars = [...str]; console.log(chars); // ["h", "e", "l", "l", "o"]
Conclusion
Spread operator syntax in JavaScript is an essential addition with other ES6 features. It is now available to be used without any third party transpilation such as Babel.
In order to understand spread operators, arrays, functions and other core concepts of JavaScript, you can explore The Complete Modern Javascript Online Tutorial with ES6 (2019).
