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

#javascript #webdev #node

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