Why is JavaScript not a mess?

It always discourages me...

It exasperates me to hear that frontend development is a mess, especially the statement that JavaScript "accepts anything" and can be written in any way without affecting the final result.

Actually, it is not entirely false. It is true that JavaScript allows multiple approaches to achieve the same goal.

The problem lies in the lack of design patterns as well defined as in the backend. On the frontend, best practices are dispersed, generating diversity of opinion and lack of uniformity. This dispersion makes development and understanding difficult, especially for beginners. Even whoever writes this has his own opinions.

The key point…

Beyond the frustration, I want to emphasize that the lack of evidence of good practices does not mean that they do not exist. It is essential to seek knowledge and apply at least the basics of design patterns. In JavaScript, there are many resources with established implementations and patterns. It just takes time to read and understand its purpose and proper use. Example: Mozilla Documentation for JavaScript.

A practical example…

The following code comes from a real project in production. While it works correctly, its implementation could be improved in readability and performance.

We will adjust some parts to align with the recommendations in the JavaScript documentation, using more efficient methods and functions. We will focus on a basic concept: manipulation of arrays and objects. The code is simplified for educational purposes.

Let's start with an object, representing data received from a backend API:

<code class="language-javascript">const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]</code>

We need to add a "label" field with the prefix "Opened" followed by the store name.

Let's first look at a "less ideal" implementation, which doesn't use the best JavaScript tools:

<code class="language-javascript">storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

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

We look at .reduce, .forEach and .push, just to reconstruct a list. The lack of use of .flatMap and .map is evident. The syntax is confusing and verbose.

Let's look at an improved implementation:

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

Simpler, right?

.flatMap "flattens" the array of objects to a single level:

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]</code>

Then, .map "remaps" the array, adding the "label" property:

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

Conclusion…

JavaScript offers the tools to write quality code. The important thing is to study it and apply the concepts correctly, not just program for the sake of programming.

Reading recommendations:

• [PT-BR] - //m.sbmmt.com/link/729404b28f3bd32761c667a668453f4c
• [EN] - //m.sbmmt.com/link/f5c80b20fdee4e645ff315a56f12a716

The above is the detailed content of Why is JavaScript not a mess?. For more information, please follow other related articles on the PHP Chinese website!