The Two-line JavaScript Design Pattern That Covers A Multitude Of Sins

Because nothing is fool-proof to a talented fool.

What’s the problem? 😩

There’s always one isn’t there? That junior dev who writes things like if (x === undefined), or that one package that pollutes the global scope with loads of garbage you don’t need. Or maybe it’s a bit of self-sabotage — you spend ages debugging some obscure issue and cursing whoever caused it, only to find that actually it was you who screwed up 😅

Despite the incredible progress the JavaScript ecosystem has made over the last decade, there’s still a million ways some careless code can ruin your day.

If you’re a front-end developer you’ll know exactly what I’m talking about, especially if you ever have to work outside of a framework. There’s only so much a coding standards guide can do — it can’t cover for carelessness or a lack of understanding of how a language works.

Or can it…

What’s the solution? 💡

The following programming pattern shields your code from almost every sloppy mistake made elsewhere in your app, including imported libraries, and it does it in just two lines — short enough for anyone to remember:

;(function(window, undefined) {
  // Do stuff here
})(this);

Doesn’t look like much, does it? Its simplicity is deceptive though, there’s actually quite a lot to unpack. Let’s dive in.

javascript-tips javascript programming

You may not know about these tips 7 Simple JavaScript Tips for Optimizing Your Code

How to start writing less error-prone code in JavaScript - Everything in JavaScript is an object!’. We said that this assertion is false. Many things in JavaScript can behave like an object, but that doesn’t mean it’s the object. We can say we have three types of objects (objects, functions and arrays) in JavaScript.

This week, I had to construct a date selector form in React that looks like this. As you can see, the user interface includes the surrounding month and date options in addition to the selected date. This means that I need to not only keep track of the current date, but I also need a way to conveniently figure out how many days are in the selected month.

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.

Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.