Javascript array and object destructureing

#javascript #beginners #webdev #programming

Array and object destructureing was one of the most cool feature of es6. Which is really really useful. And if you are a javascript developer, you should know what is it, and how to do that. After reading this post I promise you, you are gonna be a master of that topic. So let's get started.

What is it and Why should you use it?

Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. That is, we can extract data from arrays and objects and assign them to variables. ... The ES6 destucturing assignment makes it easier to extract this data.

Getting Started

Let me introduce you with the syntax of destucturing. At first we will learn array destucturing

Array Destucturing

When you are using array's in Javascript. How do you access the values before, By using index number right?

const ara = ['Apple', 'Mango', 'Kiwi'];
console.log(ara[0]);

Before es6 it was the only way to deal with arrays. Hope you are familiar with that. Now let's see what is the modern syntax.

const ara = ['Apple', 'Mango', 'Kiwi'];
const [firstone, secondOne, thirdOne] = ara;
console.log(firstOne); // will return Apple which is the first item of our array

Behind the scene, this code looking like that!

const firstone = ara[0],
  secondOne = ara[1],
  thirdOne = ara[2];

Isn't it so simple!.... You need to look at some things when you are using array destucturing. Which are, --- Don't forget to use square brackets when you are destucturing the array by using the variables. If you don't use the square brackets or if you use any other brackets, it's not gonna work cause we are working with arrays.

Object destucturing

Now we will learn object destucturing which is pretty similar to array destucturing. The differences are before in array destucturing we were using square brackets and in object destucturing we will use curly brackets. Simple! And another thing before we were able to give any name to the variables but in object destucturing. You have to use the exact property name of the object in the variable name. Let me show you a quick example.

const bio = {
  name: "Ratul",
  profession: "Web developer"
};

const { name, profession } = bio;

console.log(name, profession);

Simple. Just use curly brackets instead of square and use the property name of the object as the variable name. And everything will be fine. And a thing is try to maintain the sequence of the object properties like the 1st property is name and second one is age. So when you are destructuring the object, they should be look like that,

const {name, age} = objectName;

(...) Spread Operator

Now we will learn about the spread operator. So what is it and how does it work? Suppose you have an array of some names, and now you have to put all the array items in a new array. So in this case, we can use this spread operator. Let me show you some example.

const names = ["Ratul", "George", "Jack"];

const newNames = [...names, "July", "Bosh"];
console.log(newNames);

In this code, I am putting all the values under the names ara to this newName array. And in the newName array I have some more extra data which are not availlable in our names array. So That's how the spread operator works. You can have all data of any array or an object in a new variable by just using it. Now how do we use it in objects? Let me show you.

const personData = {
  name: "George",
  age: 24,
  profession: "Android Developer"
};

const georgesData = {
  ...personData,
  data_of_birth: "bla bla bla"
};

console.log(georgesData);

In this code I have an object named personData . Which is containing some informations about a person. Now I want to put in another indivisual object which will be named georgesData. Cause these data's are about George. So how do we do that? That's easy just create a new object and then use the spread operator. After doing that, I have added some more data/ infos in georgesData object. Which is his birthDate. So that's all about object destructuring.

So that's all I know about array and object destructuring. Hope you enjoyed that. If you have any issue regarding that post, please let me know. I will take the steps which I can take. And make sure you follow me to recieve all the informational posts just like that.