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.
Top comments (4)
It's awesome to have all of this in one place. Thanks for the article Suren!!
Glad you find it useful :) thank you!
Setting default values in destructuring is awesome. Thank You for this article.
Thanks for the feedback❣️