I Always Get Frustrated

I get really frustrated when I hear people saying that Frontend is a mess, especially when they claim that JavaScript "accepts anything" and that you can write it any way you want since we can achieve the same result in multiple ways.

In reality, they're not wrong. Yes, it is possible to write JavaScript in various ways and still reach the same goal.

The main issue is that, when we talk about Frontend and JavaScript, we don't have well-defined design patterns like we do in Backend, where there are widely adopted frameworks and conventions. In Frontend, information about best practices and patterns is scattered across the web, leading to a variety of views and opinions. This lack of uniformity makes development and understanding more difficult, especially for beginners. Even the author of this text has his own opinions.

The Point I Want to Address

To conclude this rant, I want to highlight that just because something isn't obvious doesn't mean it doesn't exist, or that you shouldn't seek knowledge to apply at least the basic patterns in your code. In the case of JavaScript, for example, there are numerous websites that present established implementations and patterns in the language, ready to be used during development. You just need to dedicate time to reading, and you'll understand the purpose of each resource and the right time to use it. Example: Mozilla Docs JS.

Let's Look at a Real Code Example

The following code was taken from a real project that was running in production. While, theoretically, "there's nothing wrong with it" and it works fine, in practice, the approach used could have been different, resulting in improved readability and performance.

Let's simply adjust some parts of the code to make it more aligned with the JavaScript documentation recommendations. This is possible because the language provides specific methods/functions to handle certain situations more efficiently.

I would like to remind you that here we will address a very basic JavaScript concept: working with Arrays and Objects. The code was written in the simplest form possible, avoiding unnecessary complexities.

So, let's get started! First, we'll define an object that would theoretically be received from our Backend via API:

const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

Now, for some unusual and unconventional reason, but just for example's sake, we need to add a new field called "label" to this object. The "label" field should be composed of the prefix Opened followed by the store's name.

First, let's look at an implementation that I consider "less ideal," as it doesn't use the best tools, methods, or functions in JavaScript to perform the addition of the "label" field.

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// result:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

Here, we can observe that, first, we have a .reduce, followed by a .forEach, and finally, a .push. All of this is used just to return a newly reconstructed list for display on the screen. What bothers me the most here is the apparent lack of knowledge or the non-use of functions like .flatMap and .map, which are basic and important resources when working with JavaScript. Moreover, the code's syntax becomes confusing and overly verbose.

Now, let's see how it could have been done:

storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})

So, what do you think? Simpler, right?
Why is that? Why like this?

Let's go! Conceptually, .flatMap "flattens" our array of objects into a single level. The result will look like this:

[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]

Now, we use .map, which serves to "remap" an array, meaning we go through each item, adding the "label" property. The result looks like this:

[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

Conclusion

This is truly amazing! JavaScript provides all the tools you need to write high-quality code.

All you need to do is study it and apply the concepts correctly, not just code for the sake of coding.

Book Recommendations:

Author Of article : FoodieHoodie Read full article