JavaScript Spread Operator

The JavaScript Spread operator (…) allows an iterable, such as an array or string, to be expanded. In case of an object the spread syntax enumerates the properties of an object (expands properties and corresponding values as key-value pairs).

For example, spread operator when used with an array.

const nums = [1, 2, 3, 4];
console.log(nums);  // displays [1, 2, 3, 4]
console.log(...nums); // displays 1 2 3 4

With the use of spread operator (…nums) array is expanded.

Don't try to spread an object as done in case of array in the above example as that will result in an error because plain objects are not iterable. We'll see later how to use spread operator with objects.

const person = {id: 1, name: 'John', age: 42};
console.log(...person); // ERROR

This results in an error-

Spread syntax requires ...iterable[Symbol.iterator] to be a function

Spread operator examples

There are many places where use of spread operator is very convenient.

1. In function calls

If you want to pass array elements as arguments to a function you can use spread operator to expand array into zero or more arguments.

function sum(a, b, c){
  return a + b + c;
}

const nums = [10, 20, 30];
console.log(sum(...nums)); // 60

2. Creating a new array using an existing array.

With spread operator in JavaScript it is very easy to create a new array using an existing array.

const nums = [3, 4, 5];
const newNums = [1, 2, ...nums, 6]
console.log(newNums); // [1, 2, 3, 4, 5, 6]

3. Copy an array

const nums = [3, 4, 5];
const newNums = [...nums]
console.log(newNums); //[3, 4, 5]

4. Concatenating two or more arrays into a single array.

Again, by using spread operator with arrays that has to be concatenated it becomes quite easy to do it.

let num1 = [1, 2, 3];
const num2 = [4, 5, 6, 7];
num1 = [...num1, ...num2]
console.log(num1); // [1, 2, 3, 4, 5, 6, 7]

Spread operator with objects

You can merge object using spread operator.

const person1 = {id: 1, name: 'John', age: 42};
const person2 = {id: 1, name: 'John', age: 43, city: 'London'};

const mergedObj = {...person1, ...person2}
console.log(mergedObj);

Using Spread operator in React

One usage of spread operator in React is to pass props to a component. For example, suppose you have a Movie component that expects two values: title and genre.

function App() {
  return <Movie title='Dirty Rotten Scoundrels'  genre='comedy'/>
}

Same thing can be written as given below using Spread operator.

function App() {
  const movie = {title: 'Dirty Rotten Scoundrels', genre: 'comedy'};
  return <Movie {...movie} />
}

When you need to pass all the properties of an object to the Child component using spread operator is quite convenient.

That's all for this topic JavaScript Spread Operator. If you have any doubt or any suggestions to make please drop a comment. Thanks!

---

Related Topics

1. JavaScript let and const With Examples
2. JavaScript Arrow Function With Examples
3. JavaScript Import and Export
4. JSX in React

You may also like-

1. Angular Project Structure With File Description
2. Lambda expressions in Java 8
3. How HashMap internally works in Java