Home > Web Front-end > JS Tutorial > Why JavaScript isn't messy?

Why JavaScript isn't messy?

Mary-Kate Olsen
Release: 2025-01-21 04:29:08
Original
370 people have browsed it

Por que JavaScript não é bagunça?

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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:

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template