DEV Community

Ramblings about JavaScript scope, weird errors and frameworks

Salma Alam-Naylor on February 20, 2024

My website had a silly bug in production for a year. It was quite inconsequential (I think), and I only found it when I (finally) added Sentry err...
Read full post
Collapse
 
efpage profile image
Eckehard • • Edited

Some of the concepts of Javascript are quite -- strange. ES6 Modules are kind of isolated, but the global context is still visible inside a module. This is very different to modules or libraries in other languages where you need to import any dependency manually. So, in general, not using the global context is a good rule of thumb.

Did you know that ALL Identifiers are also visible in the global context? And the implementation breaks all the rules JS might ever have. This works:

<p id="myParagraph">
  this is a test
</p>
<script>
    const myParagraph = 55
    myParagraph.textContent = "Hello World"
    console.log(myParagraph) // => 55
</script>
Enter fullscreen mode Exit fullscreen mode

but it is very prone to errors:

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor •

Ooof yes that's wild!

Collapse
 
ingosteinke profile image
Ingo Steinke • • Edited

I didn’t see this error in the browser console in development

That's a challenge I don't really understand: with all the modern tooling, linting, and code assistance, there are still so many antipattern that should be obvious to detect, but instead the tools often warn about irrelevant details or point into the wrong direction, even distracting us from the actual problems.

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor • • Edited

Red squiggly lines in VSCode everywhere where there aren't any errors, distracting us from the real problems 🫠