DEV Community

Cover image for ELI5 JavaScript: The Spread Operator
Nisarg Kapkar
Nisarg Kapkar

Posted on • Originally published at nisargkapkar.hashnode.dev

ELI5 JavaScript: The Spread Operator

One of the most useful features introduced in ES6 is the Spread Operator. It is denoted by three dots (...).

According to MDN Web Docs:

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.


Calculating Puzzled Gif

Sounds complex right?
Don't worry, read this article till the end, and I will make sure you know the ins and outs of the Spread Operator :)


Let's Begin Gif

As the name suggests, the spread operator is used to 'spread' out the elements of an iterable (string, array, etc.). Let's look at an example:

let arr = ["This", "is", "an", "array"]
console.log(arr) 
console.log(...arr) //with spread operator
Enter fullscreen mode Exit fullscreen mode
//output
["This", "is", "an", "array"]
This is an array
Enter fullscreen mode Exit fullscreen mode

Okay! Now let's look at some use cases of the spread operator.

Table of Content

  1. Passing arguments to functions

  2. Copying arrays/objects

    2.1 Arrays
    2.2 Objects

  3. Combining arrays/objects

    3.1 Arrays
    3.2 Objects

  4. String to characters

1. Passing arguments to functions

let num = [1, 2, 3 ,4]
console.log(Math.min(num[0], num[1], num[2], num[3]))
Enter fullscreen mode Exit fullscreen mode

Instead of passing each element separately, you can use the spread operator!

console.log(Math.min(...num))
Enter fullscreen mode Exit fullscreen mode

2. Copying arrays/objects

Use the spread operator to create copies of arrays & objects.

2.1 Arrays

let arr1=["a", "b", "c", "d"]
let arr2 = arr1 
let arr3 = [...arr1]
arr1.push("e")
console.log("arr1 = ", arr1)
console.log("arr2 = ", arr2)
console.log("arr3 = ", arr3)
Enter fullscreen mode Exit fullscreen mode

Can you guess the output?

//output 
"arr1 = " ["a", "b", "c", "d", "e"]
"arr2 = " ["a", "b", "c", "d", "e"]
"arr3 = " ["a", "b", "c", "d"]
Enter fullscreen mode Exit fullscreen mode

Let's understand what happened...

  • The assignment operator (=) creates a reference to the original array. So here, arr2 is just a reference to arr1. Both arr1 and arr2 point to the same array in memory!
  • To make a copy, we use the spread operator! By using the spread operator we make a new copy of the array in the memory. Now changes made to arr1 will not be reflected in arr3 (and vice-versa)

2.2 Objects

let obj1 = {
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Hashnode",
    twitter: "@nnkkaapp"
}
let obj2 = obj1 
let obj3 = {...obj1}
obj1.website = "Medium"
Enter fullscreen mode Exit fullscreen mode

Similar to arrays, changing obj1 changes obj2 but not obj3.

NOTE:
While copying arrays/objects, the spread operator only goes one level deep.

let num1 = [[1, 2], [3, 4], [5, 6]]
let num2 = [...num1]
num1[0][0] = 100
console.log(num1)
console.log(num2)
Enter fullscreen mode Exit fullscreen mode

Here, both num1 and num2 will be equal to [[100, 2], [3, 4], [5,6]].
A similar thing happens when you copy nested objects using the spread operator.
The nested arrays/objects inside an array/object are just references. So when you use the spread operator to copy, the nested arrays/objects are not copied (rather their references are copied)

3. Combining arrays/objects

Use the spread operator to combine arrays & objects (and insert elements in arrays & objects)

3.1 Arrays

let arr1 = [1, 2, 3, 4]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, 7, ...arr2, 8]
console.log(arr3)
Enter fullscreen mode Exit fullscreen mode

arr3 will contain 1, 2, 3, 4, 7, 4, 5, 6, 8 (arr1 elements+7+arr2 elements+8)

3.2 Objects

let obj1 = {
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Hashnode"
}
let obj2 = {
    twitter: "@nnkkaapp",
    website: "Medium"
}
let obj3 = {...obj1, ...obj2, dob: "23/12/2000"}
console.log(obj3)
Enter fullscreen mode Exit fullscreen mode
//output
{
    firstName: "Nisarg",
    lastName: "Kapkar",
    website: "Medium",
    twitter: "@nnkkaapp",
    dob: "23/12/2000"
}
Enter fullscreen mode Exit fullscreen mode

NOTE:
If there are multiple values for the same key (in the above example: 'website'), the last encountered value is assigned, and all the previous values are overwritten (in the above example, 'Hashnode' is overwritten by 'Medium')

4. String to characters

let firstName = "Nisarg" 
console.log([...firstName])
Enter fullscreen mode Exit fullscreen mode

Since a string is iterable, we can use the spread operator on it. The output of above code will be ["N", "i", "s", "a", "r", "g"]


Woooo! Thank you for reading 😄


wooo Gif

If you have any questions about the Spread Operator (or about JavaScript in general), feel free to ask them in the comments 👇


This article is part of my ELI5 JavaScript series.
If you want to read & learn more about JavaScript, don't forget to subscribe (more articles coming soon!)

Follow me 👇 for more content on full-stack development, software engineering & data structures/algorithms.

Thank you again :)
Have an awesome day and happy coding 😄

Discussion (0)