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

Husband | Father | Tech Enthusiast | Cricket | SSE, @naviscargo

Object Destructuring

const { propertyName1, propertyName2 } = objectName;

{% twitter 1260528395634368514 %} 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;

{% twitter 1261661975202770945 %} 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.

Defaults

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

{% twitter 1261176724160540673 %} 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.

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.

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

Comments

More from this blog

Naming Conventions - Javascript

Console API - Debugging Like A PRO - Javascript

Designing the Print Preview - Chrome Dev Tools

NaN - It's Not A Number🙄

TypeScript Functional Decorators w/ usecases

Object Destructuring

Array Destructuring

Aliases

Defaults

Functional Param - Destructuring

Command Palette

Comments

More from this blog

Object Destructuring

Array Destructuring

Aliases

Defaults

Functional Param - Destructuring