DEV Community: Jasvir Singh

Destructuring Arrays & Objects In JavaScript part-2

Jasvir Singh — Tue, 22 Mar 2022 17:57:55 +0000

In my Last article (Array destructuring Part-1) we learned about array destructuring, If you remember as I explained in my previous article, Destructuring is ES6 feature and its basically a way of unpacking values from an array or an object into separate variables. So in other words destructuring is to break a complex data structure down in to a smaller data structure like a variable.

This article will cover Object Destructuring.

To do object destructuring, we need to create an object.

const restaurant ={
    restaurantName: "Bombay Night",
    location: "james street 52, New York,
    openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  },
}

Fundamentals of the Destructuring

we use the curly braces to do object destructure,Then all we have to do is to start with const and provide/define the variable names that exactly match the property names that we want to retrieve from the object. One thing remember in an object the order of elements does not matter,we don't need to skip elements like we did in an array.

const { restaurantName, openingHours } = restaurant;
console.log( restaurantName,openingHours);
// output Bombay Night
// output openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  }

So this the fundamentals of the destructuring objects.This is extremely useful especially when we deal with the results of a API, get data from another web application.Data is usually comes in the form of objects then we can destructure it to do further actions.

Switching Property Name

lets Take one step further, suppose if want the variable name to be different from the property name. So here we can do it like this but of course we still need to reference the property names like we did above and we use colon to specify a new variable name.

const {restaurantName: name , openingHours:hours} = restaurant;
console.log(name,hours);
// output Bombay Night
// output openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  }

This how we can able to give them new variable name.This is really helpful when dealing with third party data.

Default values

Another useful feature when we are dealing with third party data like an object that we get from somewhere else for example an API call,it can be really useful to have default values for the case that we are trying to read a property that does not exist on the object,so usually then we get an undefined, for example we do not have property name restaurantMenu, if we will try to get this property,this would be undefined because there is no property call restaurantMenu, so we can set default values just like we did in arrays.

const {restaurantName: name , restaurantMenu = [] } = restaurant;
console.log(name,restaurantMenu);
// output Bombay Night
// output here will get empty Array [] instead undefined

Keep in mind this is really helpful when we don't have hard coded data like we have it above then it is useful to set default values.

Mutating Variables

Next we will talk about mutating variables while destructuring objects so we did that in previous article with Arrays but in objects that works bit differently.

// here we define two variables x and y
let x = 50;
let y = 100;
// here we define one object z with property name x and y
const Z = { x:10, y:50 };

// and now we want to destructure this object
// keep in mind we can't do it like this here, like we did in array, this will throw error
 **{x,y} = z;**

// to destructure this object we need to wrap this destructuring assignment in to parenthesis like this 
({x,y} = z);
console.log(x,y);//output : x = 10  y = 50

Nested objects

Lets say we want create two variables open and close and these should contain the open and close hours for Friday. As we know we have openingHours object which is inside restaurant object then in that object, we have another objects. So Friday is an object inside openingHours object.

//lets say we want retrieve friday 
const {restaurantName,openingHours } = restaurant;
const{fri} = openingHours;
console.log(fri); 
// output : {
       open:11,
       close:23,
    }

Actually we want two variables one called open and other called close to do this we need to further destructure

 const{fri : {open,close} } = openingHours;
console.log(open,close); 
// output : 11 23

We could of course take this even further and assign different variables to these just like we did above with colon.

const{fri : {open: openTime , close: closeTime} } = openingHours;
console.log(openTime,closeTime); 
// output : 11 23

To learn more about javaScript Destructuring

See you guys! stay safe & keep coding........

Destructuring Arrays & Objects In JavaScript part-1

Jasvir Singh — Tue, 15 Mar 2022 20:50:19 +0000

Destructuring is ES6 feature and its basically a way of unpacking values from an array or an object into separate variables. So in other words destructuring is to break a complex data structure down in to a smaller data structure like a variable.
I decided to create two separate articles one for array and another one for object destructuring but this article will covers Array destructuring.

Let's start with Array destructuring!

So for arrays we use destructuring to retrieve elements from array and store them in to variables in a very easy way. let's just start with a very simple array.

const juices = ['apple','orange','mango'];

For destructuring we are going to declare three new variables at the same time inside the square brackets that's because we are, destructuring an array.

const [appleJuice, orangeJuice, mangoJuice] = juices;

This is how we destructuring an array,Its looks like a Array but it's really not, it's just the destructuring assignment.
whenever javaScript sees this here on left side of the equal sign, it knows that it should do destructuring.
Let me explain how this works:-

// is equivalent to:
// const appleJuice = juices[0];
// const orangeJuice = juices[1]; 
// const mangoJuice = juices[2];

first variable appleJuice will be the first element of the array, second variable orangeJuice will be the second element of the array and the third variable mangoJuice will be the third element of the array.Now if we do console.log to see the output.

console.log(appleJuice); // output : apple
console.log(orangeJuice); // output : orange
console.log(mangoJuice); // output : mango

Always remember even though we did destructuring, but original array is of course not affected. we are only destructuring so we are unpacking it.

// original array
console.log(juices); // output: [apple,orange,mango]

Let's take some elements out of the variable juices ( by doing destructuring assignment).We do not want to take all of the elements out of the array. We will extract first two elements from array.

const juices = ['apple','orange','mango'];
const[appleJuice,orangeJuice] = juices;
console.log(appleJuice,orangeJuice); // output: apple orange

Did you see, it's simply follow the order of the elements here. Which are exactly the first two elements of the array.
Lets say we want extract only first and third element from array, to do this we simply leave a hole in the destructuring operator, So what I mean it will skip the second element in array and third element will become second element.

const juices = ['apple','orange','mango'];
const[appleJuice , , mangoJuice] = juices;
console.log(appleJuice,mangoJuice); // output: apple mango

Destructuring is a really powerful, we can do much more for example Swapping variables.

const fruits = ['apple','orange','mango'];
let [firstFruit , secondFruit] = fruits;
console.log(firstFruit,secondFruit); // output: apple orange
//Two variables values can be swapped in one destructuring expression
[firstFruit,secondFruit] = [secondFruit,firstFruit];
console.log(firstFruit,secondFruit); //output: orange apple

without destructuring we would have to do it like this, first we would need to create a temporary variable, then so that we would assign one of them.

const fruits = ['apple','orange','mango'];
let [firstFruit , secondFruit] = fruits;

// temporary variable

const favoriteFruit = firstfruit;
firstfruit = secondfruit;
secondFruit = favoriteFruit;

console.log(firstFruit,secondFruit); // output: orange apple

Another trick with destructuring is that we can have a function , return an array and then we can immediately destructure the result in to different variables. This is basically allows us to return multiple values from a function.

const restaurant ={
starterMenu:[ 'lemon Prawn','Grilled Scallops','Garlic Mussels'],
mainMenu: ['Pizza','Pasta','Risotto'],
order: function(starterIndex, mainIndex){
return[this.starterMenu[starterIndex],this.mainMenu[mainIndex];
}
}

// destructuring

const[ starter , main ] = restaurant.order(1,2);
console.log(starter, main) ; // output: Grilled scallops Risotto

Now next how to destructuring a nested array, the array inside another array let's take a example of nested array.

const nestedArray = [2,4,6,[8,10]];

// all the individual values ( have to do distructuring inside of destructuring)

const [a,b,c,[d,e]] = nestedArray;
console.log(a,b,c,d,e) ; // output:2 4 6 8 10

Default values
A variable can be assigned a default, in the case that the value unpacked from the array is undefined.
This can sometimes useful for example, when we get data from API.

// without default values 

const [a , b  , c ] = [8,10];
console.log(a,b,c): // output: 8 10 undefined

// with default values
const [a = 1, b = 2 , c = 1] = [8,10];
console.log(a,b,c): // output: 8 10,1

To learn more about javaScript Destructuring

See you guys! stay safe & keep coding........