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; 

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; 

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; 

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; 

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 

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.