DESTRUCTURING

Recently I was working with javascript nodejs project which contains a lot of object and utilizing the object for the frontend render. These involves a lot of object manipulation and as you know using the best coding practice is always the best.

So I decided to make some research about javascript object destructing to help me use the latest coding practices to carry out my task. After much lesson that seem very easy to understand I finally come up with how I learnt it very fast and I’m sure that you will love it. Read on with my examples below.

Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, maps and sets into their own variable. It allows us to extract properties from an object or items from an array.

Let’s take a look at a simple example where we can apply destructuring.

const description = {

                name: 'emmanuel',

                job: 'fullstack developer',

                position:'senior',

                website:'worldtok.com'

};

const name = description.name;

const job = description.job;

const position = description.position;

const website = description.website;

what the hell is all this code when we can write it in just one single line. To achieve this in a single and more concise way we are going to use object destructuring. Object destructuring comes in handy when we want to make a variables from the property that is inside an object or an item that is inside an array.

See the example below

const { name, job, position, website } = description;.

The above code will produce the same as the former one but now its more concise and easy to understand .

What that thing means is get the value of the properties inside the curly braces {} from the description object and assign the value to the property in the form of variable.

Very simple. Now we can do some thing like

console.log(name);//name

console.log(job);//job

console.log(position);//position

console.log(website);//website.

The above code producxe exactly what we want.

The approach is applied to large collection of api objects when it is received as data like the following example

// axios is a promise base javascript library

// see more at axios.org

window.axios = require 'axios';

axios.get('worldtok.com').then(response => {

                const data = response.data.data;

                const meta = response.data.meta;

                const links = response.data.links;

}).catch(err => console.log(err));

Instead of the above length code we can just destructure the data object and get our variables and values just like the following example.

 axios.get('worldtok.com').then(response => {

                const { data, meta, links} = response.data;

}).catch(err => console.log(err));

As you can see you will come across this stuff often when you work with javascript. Therefore utilizing object destructuring often will be worth it.

ARRAY DESTRUCTURING

Just like object destructuring, array destructuring is just like the same but in this case we aree going to be using array notation which is square vrackets [] unlike {}.

Example

const arr = [1, 2, 3, 4];

const [first, second, anyVAriableNAme] = arr;

console.log(first);//1

console.log(second);//2

console.log(anyVAriableNAme);//3

// sice array is indexed you can simple supply the variable

//names based on the indexed you want it to take

JAVASCRIPT ARROW FUNCTION (  () => {}  )

Arrow function is minified method of defining a function in javascript. This kind of functions comes in handy when we are defining inline callbacks . see example below.

const myResult = arr.reduce(function(total, next){

                return total+next;

}, 0);  

console.log(myResult);

instead of writing such a lengthy function we can make use of arrow function to carry it

and obtain thesame result in a concise way.

see example below using arrow function.

const  myResult = arr.reduce((total, next) =>   (total + next), 0);

console.log(myResult);

This is very simple and as you can see we don’t need to include the curly braces aond the return statement yet everything works fine.

Arrow function and destructuring are a very good coding practice which you must adopt in your javascript projects.

I hope that this has helped you to master this two topics. Happy cosding.