Amongst the many scary operations in programming, the Spread operator can be difficult to understand as a newbie trying to saddle the deep waters of software development. Especially, if you do not have a background in computer science.

In this post, you will learn what the Spread operator is, and its uses in JavaScript and ReactJS. So you can start enjoying your learning journey as a software developer.

Let's dive in.

The Spread operator is a Javascript operator that can be used when all elements from an object or array need to be included in a list of some kind. It offers you access to the internals of an iterable.

The word “iterable” refers to a group of data types in computer science. Arrays, object literals, and strings, to be specific.

In a simpler term, a Spread operator allows us to quickly copy all or part of an existing array or object into another array or object. It is an ES6 syntax represented with a three-dot (…).

The Rest operator, like the Spread operator, adopts the three-dot syntax. In contrast to the Spread operator, the Rest operator works in the other direction. i.e, While the Spread operator expands an iterable into its elements, the Rest operator reduces a set of elements to a single array.

Five(5) Uses of the Spread Operator (…)

Below are the different ways you can apply the JavaScript Spread operator.

1. Concatenating iterable Objects and Arrays: There are different ways to concatenate or merge objects in javaScript. However, the Spread operator is the easiest way to merge two or more objects into a new one that contains the properties of the merged objects.

const bucketList = {
       car: 'bentley',
       holiday: 'paris',
       jewelry: 'diamond',
}

const wishList = {
       house: 'duplex',
       country: 'dubai',
       designer: 'gucci',
}

const myDreams = { ...bucketList, ...wishList }

console.log(myDreams); 
// { car: 'bentley', holiday: 'paris', jewelry: 'diamond', house: 'duplex', country: 'duabi', designer: 'gucci'}

From the above example, the existing objects in bucketList and wishList have been merged into the new object in myDreams with the Spread operator.

2. Duplicating an Array:

const items = [
  'phone',
  'book',
  'cup'
];

const tools = [...items]; // the three dots "..." are the spread operator syntax!
console.log(tools);
// ['phone', 'book', 'cup'];

In the example above we can see that the spread operator unpacks the elements of the items array.

3. Constructing Array literals: When you need to add a new item to a local data store or display all previously stored items along with a new addition, the spread operator comes in handy.

const numbers = [50, 60];

const total = [...numbers, 70, 80, 90];

console.log(total); // [50, 60, 70, 80, 90]

4. On strings: The Spread operator when used on strings, separates each character of the string into individual characters.

const vocab = ["Adequate"];

const letter = [...vocab];

console.log(letters); // ["A", "d", "e", "q", "u", "a", "t", "e"]

5. Passing Props in React: Passing props down to a child component is perhaps the most common use of the spread operator in a React app. If the object you’re spreading contains all of the properties that the child component requires, the child component will use those and ignore the rest. Instead of splitting out each attribute that the kid inherits from the parent, this allows for considerably more simple code.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

In the example above, both components are equivalent.

In conclusion, the JavaScript Spread operator is a very simple and powerful tool that will save you a few lines of code and enhance maintainability in a React application.