Back ArrowExplore all kits

ES6 features Destructuring

share link

by vsasikalabe dot icon Updated: Mar 24, 2023

technology logo
technology logo

Guide Kit Guide Kit  

ES6 provides another feature called destructuring. It allows you to destructure the properties of elements in an array into individual variables. Destructuring is used to easily extract values from Objects or Arrays and assign new or default values to undefined ones. It means breaking down a complex structure of function into simpler parts.  


You can extract smaller fragments from objects and arrays with destructuring syntax. Destructuring is an effective way to take out multiple values from data that is stored in arrays or objects. It can be used for the declaration of a variable. We always use their positions (or index) when destructuring an array.  

It has two advantages.  

  • The code is more readable. If you destructure an object at the top of a function or code block, the reader can easily find what variables you will use.  
  • The performance is high. Before using them, Destructuring is used to put object properties in local variables, which can improve application performance. For example, if you access those variables multiple times in a loop, it is more efficient if the variables are locally defined. 

Object destructuring extracts multiple properties from an array in a single statement. It can access properties from nested objects and set a default value if the property doesn't exist. In array destructuring, by using the rest operator (…), you can put all the remaining elements of an array in a new array. 

Array Destructuring Assignment Applications 

  • Swapping variables 
  • Functions that return multiple values 


Here is an example of how to do ES6 features Destructuring: 

Preview of the output that you will get on running this code from your IDE.

Code

ES6 features Destructuring

JavaScriptdotLines of Code : 20dotLicense : Strong Copyleft (CC BY-SA 4.0)

let person = {
  name: "Ravi",
  favGames: ["cricket", "Badminton", "Tennis"],
  displayFavGames() {
    return this.favGames.join("\n                    ");
  }
}
person.displayFavGames();

let displayData = (p) => {
  let {
    name,
    favGames,
    displayFavGames
  } = p;
  return `My name is ${name} and my cofavourite games are 
                    ${p.displayFavGames()}`;
}

console.log(displayData(person));

Instructions

Follow the steps carefully to get the output easily.

  1. Download and Install VS Code on your Computer.
  2. Open the VS Code and install Javascript ES6 Code Snippet and Code Runner from Extensions.
  3. Open the new file and save it as example.js (functions.js)
  4. Copy the code using the "Copy" button above, and paste it into your Javascript file.
  5. Run the code using (ctr+alt+N) Run button.


I hope you found this useful. I have added version information in the following sections.


I found this code snippet by searching for ' ES6 features Destructuring ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in VS Code 1.73.1 version.
  2. JavaScript (ES6) code snippets v1.8.0
  3. Code Runner v0.12.0


Using this solution, we are able to do ES6 features Destructuring with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do ES6 features Destructuring.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.