DEV Community

Cover image for Javascript Destructuring - Extraction (The Fun Way🧑🏽‍💻)
Suren
Suren

Posted on • Edited on

Javascript Destructuring - Extraction (The Fun Way🧑🏽‍💻)

Struggle of every developer is to minimize the boilerplate and maximize the efficiency. This is where the Destructuring pitches in for JavaScript, to make it more understandable, simple and a clean one.

Object Destructuring

   const { propertyName1, propertyName2 } = objectName;
Enter fullscreen mode Exit fullscreen mode

Liquid error: internal
As mentioned above example, the 3 lines used for extracting 3 properties (name, age & gender) from the person object, is reduced to a single line using shorthand destructuring. If we need to extract N properties to variables, we would need N statements, but we could do that in 1 statement using destructuring.


Array Destructuring

   // Convention Using Index
   const element1 = array[0];
   const element2 = array[1];
   // Destructuring
   const [ element1, element2, ...remaining ] = array;
Enter fullscreen mode Exit fullscreen mode

Liquid error: internal
Conventionally elements of the array are extracted using the index of the element, but using ES6 destructuring we can get the values of the mentioned indexes in a single statement. Also by using the ... - spread operator, we could collect the remaining elements as array into a single variable.


Aliases

   // Alias name
   const { propertyName: aliasName } = objectName;
Enter fullscreen mode Exit fullscreen mode

Liquid error: internal
Aliases helps in extracting similar properties from different objects. This finds many real-time application in modern programming.


Defaults

   // Default values - Object
   const { propertyName = defaultValue } = objectName;
   // Default values - Array
   const [ element1 = value1, element2 = value2 ] = array;
Enter fullscreen mode Exit fullscreen mode

Liquid error: internal
Sometimes, we might not be sure if the property is present in the required object or an element in a particular index position, but those values returning as undefined would break the application. This is where the default values come in.


Functional Param - Destructuring

The above mentioned concepts can be used for the destructuring the incoming object or array in the method signatures. Hope the below snippet explains them.

   const welcomeUser = ({ name: username = 'Anonymous', topics }) => {
      // Moved the below logic to the function signature.
      // const {name: username = 'Anonymous', topics} = user;
      console.log(`${username} has subscribed to the following topics - 
                   ${topics.join(', ')}`);
   }
   welcomeUser({
      name: 'John Doe',
      topics: ['nodejs', 'javascript', 'deno']
   });
   // John Doe has subscribed to the following topics - nodejs, javascript, deno

   welcomeUser({
      topics: ['react', 'javascript', 'angular']
   });
   // Anonymous has subscribed to the following topics - react, javascript, angular
Enter fullscreen mode Exit fullscreen mode

I have recently started with the #100DaysOfCode challenge in Twitter. Follow on here to stay connected and improve each other.

Thanks for reading this far. This is my first attempt in writing a technical blog, any feedback would be appreciated.

Top comments (4)

Collapse
 
thisismanaswini profile image
Manaswini

It's awesome to have all of this in one place. Thanks for the article Suren!!

Collapse
 
radnerus profile image
Suren

Glad you find it useful :) thank you!

Collapse
 
igorfilippov3 profile image
Ihor Filippov • Edited

Setting default values in destructuring is awesome. Thank You for this article.

Collapse
 
radnerus profile image
Suren

Thanks for the feedback❣️