Destructuring in JavaScript (Array, Object, and Spread Operator)

Blog
Spread the love

Destructuring is an (ES6/ECMAScript 2015) ECMAScript 6 feature. One of the strengths of JavaScript is Destructuring and along with Destructuring how can we use the spread operator? We will learn in today’s blog how to use it.

Let’s get Started:

What is Destructuring?

It applies to arrays and objects. It breaks down the complex structure of the array and object to extract the values we are interested in. It makes the code simpler and easier to read.

Destructuring Array

1. How to Extract Elements through an array?

Example

Before: Without Destructuring

Destructuring_img

Now, let’s take a look at how we’d do the same thing using Destructuring.

Destructuring_img

2. How to Extract Selected Elements through an array?

Example:

extract_selected_elements_img

We can simply use commas if we want to leave out any element from an array. Let’s take look at the above example.

3. Assignment without declaration

Example:

assignment_without_declaration_img

4. Swapping Variables

Example

Before:

swapping_variables_img

Now, with the help of destructuring we can do this in a single line.

swapping_variables_img

5. Multiple Value Returns

multiple_value_returns

Destructuring Objects

1.How to Extract Elements through an Object?

Example

Before: Without Destructuring.

without_destructuring_img

Now, let’s take a look at how we’d do the same thing using destructuring.

https://blog.bluethinkinc.com/wp-content/uploads/2023/03/using_destructuring_img_3.png

2. Using another name for a key.

Example:

destructuring_img

3. Assignment without declaration

Example:

assignment_declaration_img

4. Nested Object Destructuring

Example:

Before:Without destructuring.

object_destructuring_img

We can also destructured Nested objects by using destructuring syntax.

Now, let’s take a look at how we’d do the same thing using destructuring.

destructuring_syntax_img

Spread Operator

The spread operator … is used to expand or spread a repeat or an array.

1.Spread Operator with Array

You can see the difference between in both examples. After using … in an array we can easily combine two arrays.

Example 1:

operator_with_array_img

Example 2:

operator_with_array_img

2.Spread Operator with Object

With the help of the spread operator … we can create copies of existing objects with new or updated values or to make a copy of an object with more properties.

Example:

spread_operator_img

3.Rest Parameter

When we use the spread operator as a parameter then it became a rest parameter.

Example 1:

rest_parameter

Example 2:

rest_parameter_img

Another example of a rest parameter

rest_parameter_exmaple_img

Conclusion

I hope this blog found to be useful for you. If you have any queries feel free to ask.

Destructuring is a powerful ES6 new feature to make your code simpler, clearer, and beautiful.

Keep learning.

Thank you!

bluethinkinc_blog

bluethinkinc_blog

2023-03-14

1

One Reply to “Destructuring in JavaScript (Array, Object, and Spread Operator)”

  • Avatar
    Siddhartha Purwar

    Well explained

    2023-03-14 at 10:56 am Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Find More Blogs

How to Add a Custom Tab to the Customer Order Detail Page in Magento 2

Spread the love Adding a custom tab to the Order Detail

Exception Handling in Java

Spread the love Introduction – Exception:An unwanted

How to add custom less file in Magento2

Spread the love Source files *.css included into layout

Spring Boot Microservices

Spread the love Microservices architecture has become

Implementation of WireMock for better testing

Spread the love WireMock is a flexible and powerful tool

Magento 2: How to selected default option in configurable options?

Spread the love Configurable products in Magento 2 allow

How To Implement Simple JWT Authentication in Django Rest Framework

Spread the love We’ll learn how to use simple JWT

Optimizing Search: Integrating Elasticsearch in Django Applications

Spread the love What is Elasticsearch? Elasticsearch is a

How to create Customer Segments

Spread the love In Magento 2, “customer

Proxy Design Pattern and Requisition List in Magento 2

Spread the love Requisition List in Magento 2 Requisition

bluethinkinc Blogs