I have written maybe 200 lines of JavaScript in my life, and this article has strongly reinforced my desire to never have to write a single one more. The next time someone asks me what the problem with JavaScript is, I will send them this article. "Scheme for the browser" what a joke.

Some excerpts for those that didn't have the strength to sit through the entire thing without pulling their hair out:

> If you called Person('Fred') without new, this inside it would point to something global and useless (for example, window or undefined). So our code would crash or do something silly like setting window.name.

> However, JavaScript also allows a function called with new to override the return value of new by returning some other object. Presumably, this was considered useful for patterns like pooling where we want to reuse instances:

> However, new also completely ignores a function’s return value if it’s not an object. If you return a string or a number, it’s like there was no return at all.

> And yet I still find it very confusing that a property called prototype does not give you a value’s prototype (for example, fred.prototype is undefined because fred is not a function). Personally, I think this is the biggest reason even experienced developers tend to misunderstand JavaScript prototypes.

> However, some class implementations we wanted to target did not copy static properties (or set the non-standard __proto__), so the flag was getting lost

Edit: And I missed the best/worst one yet: You can have MULTIPLE VERSIONS of the SAME DEPENDENCY running around in your codebase, interacting in ways that only god knows. In retrospect, this should have been obvious from the way javascript "imports" work, but, holy shit! If Satan himself had to design a language, he could not have done a better job. And I'm sure he would not have the stroke of genius required to make it the only programming language you can use if you want to target the most widely available platform for code in the world.

The next time I have to allow NoScript to let some js in, I will wonder how many goat sacrifices went into making the thing work.

One of the points of the post was that you almost definitely don't need to worry about this yourself, especially if you're using React.

If you're going to be using any language seriously, you better understand how functions and objects and classes in that language work.

In most cases I'd agree, but essentially JS has gotten to the point that it's only usable if you write an entirely new language on top of it, like React/Vue/Angular have. All of them are basically to avoid the confusion that arises from the weird quirks of JS, like it's classes implementation. These languages then also try to integrate the few positives of JS into their paradigms, and IMO they are decently successful to the point of usability for a frontend.

I don't understand how "React/Vue/Angular" is considered "an entirely new language." I use React primarily, so I'm going to speak from knowledge of that. It is very obviously a framework and it does one thing - handle your view.

Depending on what you are doing, you may have very little react-specific code in your application.

You have data fetching, caching, persistence, authentication, tons of things, not to mention business logic that needs to be implemented in just plain Javascript.

Then out of that process you may have workers or other async background jobs happening which should not involve React at all.

While I agree with your point, your example of React literally adds a DSL that requires a pre-compilation step. It's not required[0], I get that, but it's still a new language.

[0]: It may not be required, but it was created for a reason....

I don't mind a pre-compilation step as I'm already doing it in my projects and a lot of the community is as well.

There are other templating systems you can use in React if you don't like JSX.

I've seen one codebase use direct calls to ReactDOM.createElement and there is a new hotness (which I can't think of the name of now) that replaces JSX with template literals, something like:

  function NamePetList(props) {
    return html`
      

        Hello ${props.name}!
        

        ${props.pets.map(pet => html`
          
${pet.name}
`
        }
        
     
    `
  }

The library parses the strings to figure out which elements to create. Flow control and variables are just normal template literal arguments.