Destructuring, introduced in ES6 (6th edition of the ECMAScript standard) helps extract values from arrays or properties from objects into distinct variables.
\nLet’s start with an example:
\nconst name = ["hemanta", "kumar", "sundaray"]We have an array saved to the name variable. We know that each element in an array has an ordered position known as its index and if we want to access, let’s say, the first and second element in the name array, we can do so using the bracket notation and the index numbers of those elements as shown below:
// Arrays are zero-indexed: the position of the elements starts from zero.\nconsole.log(name[0]) // hemanta\n\nconsole.log(name[1]) // kumarWith destructuring however we have a much more concise syntax.
\nconst [firstName, middleName] = name\n\nconsole.log(firstName) // hemanta\n\nconsole.log(middleName) // kumarWe save the elements we want to access with variable names inside square brackets. The variable names are up to us. As you can see, we don’t have to declare multiple variables and we have to use the name variable only once.
\nLet’s say that we don’t want to access the second element in the array. Instead, we only need the first and the last element. In such a case, all we need to do is to place a comma in place of the second element as shown in the code below:
\n// place a comma in place of the second element\nconst [firstName, , lastName] = name;\n\nconsole.log(firstName lastName); // hemanta sundarayLet's start with an example.
\nconst motorcycle = {\n brand: "ducati",\n model: "multistrada",\n type: "tourer",\n}If we want to access the brand and model properties of the motorcycle object, we can do so using the dot notation.
console.log(motorcycle.brand) // ducati\n\nconsole.log(motorcycle.model) // multistradaWith the use of destructuring, we have to use the following syntax.
\nconst { brand, model } = motorcycle\n\nconsole.log(brand) // ducati\n\nconsole.log(model) // multistradaWith destructuring with arrays, we use square brackets; however, with objects we use curly braces. The properties you need to extract from the object go inside the curly braces. And more importantly, the names of the properties inside the curly braces must exactly match the property names defined inside the object. Otherwise, you get undefined.
If we use, for example, a variable name called company to access the brand property , we will get undefined as the result. Take a look at the code snippet below:
const {company, model} = motorcycle;\n\nconsole.log(company model); // undefined multistradaAnother point to note is that while unpacking property names from an object, we don’t need to maintain the order of the properties inside the object. So, we can access the type property first, the model property last inside the curly braces and we will get the results without any error.
\nconst {type, brand, model} = motorcycle;\n\nconsole.log(type brand model); // tourer ducati multistradaWe can also rename an unpacked property as shown below:
\nconst { brand: marque } = motorcycleAbove, we have renamed the brand property to marque. And when we console log marque, we get ducati.
const aboutBike = bike => {\n const { brand, model, type } = bike\n console.log(`I am a ${brand} ${model} ${type}`)\n}\n\naboutBike(motorcycle) // I am a Ducati multistrada tourerAbove, we have an arrow function which takes in a bike object as its parameter. And then inside the function, we have used destructuring to extract the brand, model and type properties from the bike object.
On line 6, we have invoked/called the aboutBike function with motorcycle object as the argument and we get I am a Ducati multistrada tourer. The code works fine. No problem at all.
However, we can write the above function in a more compact way as shown below:
\nconst aboutBike = {brand, model, type} => {\n console.log(`I am a ${brand} ${model} ${type}`);\n}\n\n aboutBike(motorcycle); // I am a Ducati multistrada tourerHere we have destructured the motorcycle object in place of the bike parameter and clearly it’s more concise than the previous syntax.