DEV Community

Patkul Shah
Patkul Shah

Posted on

4

Spread Syntax (ES6) (Must know for React)

JavaScript is becoming more powerful every day (thanks to ES6 and Babel), new syntax and tools allow us to write concise code and the less code we have to write the less errors. This is for my skill reinforcement purpose but you if can learn valuable knowledge from this then be the force with you!

Let's start from examples:

Example 1: Combining/Intersecting two arrays

In this code, we will use the old way of combining two arrays using concat then the second way is using the spread syntax.

There is not much of a difference here as we are just putting two arrays together but where things get interesting is when we want to insert an array in the middle of another array.

Example 2 — You can also use the spread operator on objects, this makes it very easy to make a copy of an object and not worry about object references and mutability which can lead to unexpected behavior.

Example 3 — Combining two objects - Notice the spread syntax which is separated by a comma in order to combine!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →