DEV Community

Deepa Chaurasia
Deepa Chaurasia

Posted on • Edited on

7 3

Destructuring in Javascript

Destructutring is act of unpacking elements in an array or object.It not only allows us to unpack but also manipulate and switch elements when you demand.

Destructuring in Arrays

Javascript allows you to use rest operator with destructing array to assign the rest of regular array to variable.

Example of Destructing in Array

Image description

As you have noticed ['devesh','ram'] remaining both get strored in var3.

We use ',' to skip variables at destructing array's first and second positions ,you just leave it blank.

Like this:
Image description

How default value get assign in Destructing

Let's see
Image description

Here you'll notice 'deepa' and 'chaurasia' are default value of 'firstName' and 'lastName' respectively

*Therefore when we have tried to extract first index element it gave 'chaurasia' as output, because only zeroth index value exists in ["Deepa Chauraisa"]. It contains only one element . *

Object Destructing in Javascript

Object destructing is unique technique that allows you to neatly extract an object's value to new variables.

Let's see with Example

Image description

here key 'firstName' i am talking about in the object on left side.

So your key will be your object's key whose value you want to assign in your new variable (i.e your value here)

Here is the another example of same:

Image description

This was pretty much all about destructing.

Thanks for reading,Hope it helped
Please like,save and comment :)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more