Destructuring assignment pattern everyone needs to know in JavaScript.

There is a formal saying for JavaScript that "Everyone starts using JavaScript without Knowing it ". There are lots of developers including senior and junior as well they work with JavaScript for years but don't know small concepts which are necessary to understand.

Today in this article we will learn something about one common syntax which we used nearly daily

const {data}=props

All of us use this kind of statement nearly daily in our job. You all think ok it's fine what is the key behind it?

This is the shorter format of assignment which is introduced in ES6 and generally, we used this approach only but behind the scene its look like

const { data:data }=props As of on first instinct here we can see that the assignment is done from right to left, the data of right side is assigned to the data of the left side so to access the value of data we need to do

console.log("data variable of left side ",data) //but this is not a right answer

Here the flip is whenever we assign a value like this the general pattern in JavaScript is flipped.

Here the data from the right side is the variable that holds the value and data from the left side is a key to which the value is assigned. This assignment is flipped from right to left to left to right in this particular scenario.

You can observe it by creating one small example

const {x: data}=something() //you can create your own example and console both the properties

So now next time whenever you don't want to use the shorter format and need to assign like above be careful about this flipped pattern of assignment.

Hope you find this information useful