How to use Destructuring and the Spread Operator?

How to use Destructuring and the Spread Operator?

An in depth analysis of how to use destructuring and the spread operator with objects and arrays.

An in depth analysis of how to use destructuring and the spread operator with objects and arrays.

JavaScript is constantly evolving with new features being added every year. The biggest set of these changes was when JavaScript ES6 was released. ES6 changed JavaScript completely, and made it a much more modern language with tons of nice features. One of these amazing features, which I use every day, is destructuring and the spread operator. In this article I will show you exactly what both of these are, how you can use them with arrays and objects, and most importantly when to use these features.

If you prefer to learn visually, check out the video version of this article:

What Is Destructuring?

In simple terms destructuring is a fancy way in JavaScript to break apart arrays and objects. It generally allows you to get individual pieces of arrays and objects in less code and opens up a multitude of possibilities. This doesn’t really sound like much more than syntactical sugar, but this small change actually makes doing many tasks significantly easier. Destructuring in arrays and objects is very similar, but it is slightly easier to understand with arrays so I will start by explaining how to destructure arrays.

Destructuring An Array

Imagine you want to get the first element out of an array. Normally you would do this by accessing the element at index 0.

const array = ['A', 'B', 'C', 'D', 'E']
const first = array[0]

console.log(first)
// A

This is pretty straightforward, but what if you now want the first two elements? You will need to write another line of code to get that element.

const array = ['A', 'B', 'C', 'D', 'E']
const first = array[0]
const second = array[1]

console.log(first)
// A
console.log(second)
// B

Again this is not really a big deal, but this can be slightly simplified with destructuring. Instead of getting each element we want individually we will get all elements at once.

const array = ['A', 'B', 'C', 'D', 'E']
const [first, second] = array

console.log(first)
// A
console.log(second)
// B

This syntax probably looks really confusing, but it is actually quite a bit simpler than it looks. Essentially to denote we are doing array destructuring and trying to get elements from an array, we need to wrap our variables inside brackets. This is what we do when we wrap first and second in brackets. Then we just set that group of bracketed variables ([first, second]) equal to the array we want to get the elements from.

This tells JavaScript to take the array on the right side of the equals sign and assign the first element to the first variable in the brackets on the left side of the equals sign. It does the same thing with the second element in the array and assigns it to the second variable in the brackets. This would then continue on until there were no more elements left in the brackets. If we wanted to get the first three elements of the array it is as simple as adding a new variable to the brackets.

const array = ['A', 'B', 'C', 'D', 'E']
const [first, second, third] = array

console.log(first)
// A
console.log(second)
// B
console.log(third)
// C

Also, if you want to skip an element, for example if you only want elements one and three, you would just leave out the name for the second variable, but keep the comma. This comma tells JS to just skip the second element.

const array = ['A', 'B', 'C', 'D', 'E']
const [first,, third] = array

console.log(first)
// A
console.log(third)
// C

Now this on its own is really not that useful since you don’t often need to access an array like this, but what if you want all elements in an array except the first two? This is where the spread operator comes in.

javascript es6 web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

9 ES6 Features Every JavaScript Developer Should Know

ES6 brings more amazing features to the JavaScript language. So without any further ado, let’s dive right in to see what are they and how they can help you write code more efficiently.

Web Design and Development Services

Get Best out from Web Design and Development Services from Vinew Technologies,We have a dedicated team of experienced and knowledgeable web developers, designers and testers. Therefore, we have proficiency in analyzing, developing and designing the necessity of intricate Website Development projects.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.