DESTRUCTURING ARRAYS AND OBJECTS

INTRODUCTION

Working with React framework can be very exciting and challenging at the same time. The complexities of the approach and the methods used make it difficult to grasp. It's even more difficult for one with just a basic javascript idea.

The ES6 functions seem like an entirely new approach to javascript and it's with constant usage of them that one can genuinely understand why React which is geared towards promoting modularity and readability uses them. Let's take the ES6 map function and the forEach loop as an example, comparing both will solidify the fact that the essence of React framework is breaking down complexities encountered into simpler and reusable codes.

There are various ES6 functions but I'll focus on Destructuring of Arrays and objects within the course of this study. It's worthy to note that this article isn't an extensive explanation but more of my personal research and learning gained from working with it.

ARRAYS AND OBJECTS

If you've been working with javascript or any other programming language, you can agree with me that arrays and objects can be really problematic and if I'm not wrong, they constitute the most complex problems in programming. Both contain values within themselves and we also experience arrays containing arrays and objects containing objects(nested objects).

Therefore, it's a great feat to be able to read through them in order to retrieve various data. Hence, we have an array,

const fruits = [banana, orange, apple, pear];

and an object,

let person1 = {

firstName: "Maurice",

lastName: "Odo",

hobbies:{

reading: 3,

traveling: 2,

};

};

The former is a simple array while the latter is a nested object. If we wanted to read the values in the array or the object; for the array we will go thus: fruits[0] to get the first item or value in the array etc. for the object: person1.firstName to get the first name or person1.hobbies.reading and if we had more nested objects then we know that at some point, we will definitely find it very much confusing. Therefore, this is where restructuring comes in, to make things more readable and modular.

DESTRUCTURING

Destructuring is an expression that makes it easy to extract values from arrays, or properties from objects, into distinct variables.

Destructuring can come in two ways; Array Destructuring and Object Destructuring. If we were still using the same array and object we used above, this is how we can restructure them:

const [banana, orange, apple, pear] = fruits; // for the array

let {firstName, lastName, hobbies: {reading, traveling}} = person1;// for the object

We can already see that this approach is more concise and readable, it also ensures reusability of the code; we can use the values individually without naming the parent or the container, Hence, we don't have to mention fruits[0] to get banana or person1.firstName to get the first name. Rather, we can just use banana or firstName once we have restructured our code.

COMMON PROBLEMS IN DESTRUCTURING

1. Arrays are named conventionally: Array values can be given any name of choice and the given name will be appended to the value in that order. Let's see an example:

const [banana, orange, apple, pear] = [myBanana, myOrange, myApple, myPear]

The value of banana is now attached to myBanana etc. In summary, naming of values in an array is not strict on names but can be given any name of choice.

2. Objects are name-specific: By default, values in the objects are named as they are in the initial declaration. However, if one chooses to go by a different value, there's how to do it.

In our previous person object which we earlier destructured:

let {firstName, lastName, hobbies: {reading, traveling}} = person1;

If we wanted to change the value of lastName to surName, it goes thus:

let {firstName, lastName : surName, hobbies: {reading, traveling}} = person1; this changes lastName to surName.

3. We have mentioned arrays and objects individually, what if we encountered an array of objects? Let's say we had an array of objects which goes thus:

const animals = [

{name: cat, sound: meow},

{name: dog, sound: woof},

{name: cow, sound: moo}

];

In this case, we have animals which is an array of functions and we have name and sound as keys, then meow, woof, and moo as values. We can destructure in this way:

const [cat, dog, cow] = animals;

If we wanted to destructure the objects;

const {name, sound}= cat; //for cat

4. Destructuring Nested Objects

Personally, I called it "progressive destructuring" and if we looked at our person object;

let person1 = {

firstName: "Maurice",

lastName: "Odo",

hobbies:{

reading: 3,

traveling: 2,

};

We have hobbies which is an object inside the person object, destructuring it to read its value is done by placing a colon after the object name and then enclosing the keys inside a set of curly braces.

Hence,

let {firstName, lastName : surName, hobbies: {reading, traveling}} = person1;