Javascript Object Destructuring

Why we need object destructuring?

Object destructuring is required to extract object properties so that we can use it in a simpler way and don't need to tap into the values of object.

Basic Object Destructuring

Object destructuring  use value of properties without using dot notation , which makes the code easy to write and makes the code smaller. When we extract the value from the object , the key and name of the variable in which the property value will be there must be same or else it will throw the error of undefined.



Using a new variable name

We can also rename the variable name by colon , and use the value of property in the different name of the variable , this cannot be done in array destructuring as we can  variable with anything , so it would be not needed.



Variables declared before assigned

When you are destructuring in the object , you need to use the same variable as the keys in the object as to proper destructor the array and wrap the entire expression into the parenthesis , if you are not using declaration statement because javascript considered it as a block and will not destructor the object.


Using a Default Value

In some case , you don't know whether the object has the property contained in it so we use the default value as the fallback value of the property.
If the object doesn't contained the property with that name , the default value will be used and it doesn't give undefined value.


Computed Property Name

Object destructuring has also the feature where you can specify the name of the property as an expression , if you put in the square brackets and also using a new variable name with the colon as a syntax needed.


Combining Array with objects

We can also destructor the array from the object , with the name of the property we specified and the variable name must be same to the key of object which contains the array.


Nested Object Destructuring

Deep nested object destructuring is often faced by the programmers , it generally extracts  by the colon within the curly braces accessing the keys of nested object and just like that to deep nested object, where the left side is the key and the right side is the value , the way we write key value pairs in the object.

Rest in Object Destructuring

Spread Operator or rest in Object destructuring is used to access the remaining properties of the object and it contains the whole object in the variable name with any name 


Object destructuring in functions

If you noticed , we specified the empty curly braces so that we also can call the function without the arguments and it will not throw any error , if we remove the curly braces from the parameter the error occurred .


So now you can see , we can do the whole lot of things from the object destructuring and how this is useful in programmers life to make the code easy to write and manageable .

Thank you for reading the blog post :)

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more