Why JavaScript isn't messy?

It deeply irritates me to hear that frontend development is messy, especially the claim that JavaScript "accepts anything" and allows for disorganized code, as multiple approaches lead to the same result.

In fact, this criticism is well founded. It is possible to write JavaScript in different ways, achieving the same objective.

The main difference between frontend (JavaScript) and backend lies in the definition of design patterns. On the backend, frameworks and conventions are widely adopted. On the frontend, good practices and standards are dispersed, generating divergences and making understanding difficult, especially for beginners. Even I, the author, have my own opinions.

---

The crux

Despite this apparent lack of structure, this does not mean that patterns do not exist or that you should not look for them. JavaScript has numerous well-defined resources and standards, available on various websites and documentation (e.g. Mozilla Docs JS). The key is to dedicate time to learning and correctly applying these concepts.

---

Practical example

The code below, taken from a production project, works, but its approach can be optimized for better readability and performance. Let's refactor it, using basic JavaScript features (Arrays and Objects) to illustrate the improvement.

The object below, representing data received from an API, needs a new field "label" (prefix "Opened" store name):

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

This first implementation, using reduce, forEach and push, is less efficient:

<code>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>

Notice the unnecessary complexity. The solution below, using flatMap and map, is more concise and efficient:

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

flatMap "flattens" the array, and map adds the "label" field to each item:

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

---

Conclusion

JavaScript offers powerful tools for quality code. The secret is the study and correct application of these resources, avoiding hasty and unplanned development.

---

Reading suggestions:

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [EN] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

The above is the detailed content of Why JavaScript isn't messy?. For more information, please follow other related articles on the PHP Chinese website!