DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Clean up your code with destructors and Array.includes
Kristijan Pajtasev
Kristijan Pajtasev

Posted on • Updated on

Clean up your code with destructors and Array.includes

Introduction

There are two things in JavaScript that I love using for cleaner code. And if you read the title, you can guess that those are destructors and includes function. In this post, I will give you a short overview of them and the use case where I use them.

Javascript logo

Destructors

What is destructuring? Destructuring is the assignment syntax where it is possible to unpack values of arrays and objects. It is still not fully clear? Maybe it will be better with an example.
Let’s take an example of the following simple object containing two properties:

const person = {
    firstName: 'John',
    lastName: 'Doe'
}
Enter fullscreen mode Exit fullscreen mode

If we wanted to unpack properties in the old way, we would use dot or square brackets.

const firstName = person.firstName;
const lastName = person[β€œlastName”];
Enter fullscreen mode Exit fullscreen mode

With the destructors, there is no need for either. We use curly brackets on the left side and names of the properties and the source object on right to unpack them.

const { firstName, lastName } = person;
Enter fullscreen mode Exit fullscreen mode

You have to agree, much cleaner than either option above. Especially if you want to keep variable names the same as property names on the source object.
There is more to this way of assignment. You can unpack them under an alias and use them on arrays. But that is not something I will go into in this post. You understand the idea.

Array.includes

This is a simple, built-in function of arrays where you pass one argument, the value you are looking for, and if the array contains it, returns true. Otherwise, returns false. The functionality was already possible in different ways. More complex one like looping array using for of forEach loops. Or simpler ones like using the find method or the indexOf method where any returned value equal to or larger than zero means array containing element. This way is just cleaner and more obvious.

const numbers = [1, 2, 3, 4];
numbers.includes(2); // true
numbers.includes(7); // false
Enter fullscreen mode Exit fullscreen mode

Use case

Now we come to the real-life application of combining both the includes function and destructors. Let us say you have a situation where you are checking if the value of your variable is equal to either of your constants. And because you want to have cleaner code, you added all your constants under the same map.

const NAMESPAC = {
    VALUE_1: 'value 1',
    VALUE_2: 'value 2',
    VALUE_3: 'value 3',
    VALUE_4: 'value 4',
…
    VALUE_N: 'value N’,
}
const myVariable = 'value 3'
Enter fullscreen mode Exit fullscreen mode

The first solution you could use for this is simple if statements:

if(myVariable === NAMESPACE.VALUE_1 || myVariable === NAMESPACE.VALUE_2) {
    // do something
} else if(myVariable === NAMESPACE.VALUE_3 || myVariable === NAMESPACE.VALUE_4) {
    // do something else
} else {
    // default action 
}
Enter fullscreen mode Exit fullscreen mode

This can be ok, but what if you have long variable names and more of them in the same case? You end up with the if statement stretching over multiple lanes which are both difficult to read and easy to make a mistake. And then we get to the next possible solution. Did you notice how the first sentence of this paragraph contains a word case? If you did, you can guess it, a possible improvement used by many is switch-case. Especially when many add linting restrictions on how many ifs are allowed to be in a function. So let us look at this example.

switch(myVariable) {
case NAMESPACE.VALUE_1:
case NAMESPACE.VALUE_2:
    // do something
break;
case NAMESPACE.VALUE_3:
case NAMESPACE.VALUE_4:
    // do something else
break;
    default:
        // default action
}
Enter fullscreen mode Exit fullscreen mode

This is quite a good solution. And hey, any solution that solves a problem, is a good solution. But for me, while used it a lot in the past, I am not a big fan of it anymore. Reason? I just don’t feel like it reads as naturally. That is why we come to the includes function.

    if([NAMESPACE.VALUE_1, NAMESPACE.VALUE_2].includes(myVariable)) {
        // do something
} else if ([NAMESPACE.VALUE_3, NAMESPACE.VALUE_4].includes(myVariable)) {
    // do something else
} else {
    // default action
}
Enter fullscreen mode Exit fullscreen mode

Now this one is kind of like the first solution, but shorter and easier to read. Also, it can grow, and we can improve it even further. That is why this post also included destructors.

const { VALUE_1, VALUE_2, VALUE_3, VALUE_4 } = NAMESPACE;
if([VALUE_1, VALUE_2].includes(myVariable)) {
        // do something
} else if ([VALUE_3, VALUE_4].includes(myVariable)) {
    // do something else
} else {
    // default action
}
Enter fullscreen mode Exit fullscreen mode

As you can see, much less code, and is easier to read. Someone might argue that there is a reason why constants were under a namespace. Conflicting names, better organization, and that is all true. But none of that is removed in your code. If you keep your functions clean, meaning small and aiming at pure functions, these unpacked values are visible in the small scope of your function and are only used so that you don’t need to constantly type the full category name.

Wrap-up

In this post, I am demonstrating the way I find code to look cleaner and to be easier to read. But that does not mean you should start writing this way. This is something that works for me, and if it works for you as well, great. But every problem has multiple solutions and it is up to you to choose the right one for your problem.


For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

Top comments (4)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

It's "Destructuring" not "Destructing"

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Although I am tempted to 'destruct' some of the code I have to review sometimes! :P

Collapse
 
hi_iam_chris profile image
Kristijan Pajtasev

Haha good point, sometimes auto-correct is too strict and does not understand code :D will fix that one

Collapse
 
ideadpads145 profile image
JoeB

such confused circumstance to use Array.include. should think more use cases
thanks for sharing, by the way

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.