Avoiding Global Vars

A great deal of ‘talk’ about this abounds, but despite this course and much searching (i.e. one can find a ton of info on objects), I still feel I’ve not read a really good article on a coding practice or paradigm for avoiding these.

I’ve some of my own thoughts on how to make it work, but don’t really feel satisfied by these solutions.

I think the issue is, in many cases, there is a common body of data that each function in a program has to work upon.

Thus my question, what is the elegant/accepted way to expose the data to functions, while avoiding the global ? Any references would be appreciated.

Google javascript modules. Here’s one article, as an example: https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc


I think it’s a hard thing to teach because it’s so abstract. It’s just something you learn, usually by making mistakes.

I would say, learn about scope. Once you do that, I think a variable shouldn’t have more scope than needed. If you need it in other scopes, it should be passed in. After you code a lot, you’ll just begin to get a sense for it. I don’t know how much it can be taught or learned a priori. You learn the basic principles, and then you make some mistakes along the way.

When you get more advanced, you’ll use tools like webpack where it is easier to compartmentalize code into different files and you can control much more easily how variables are passed around. In these cases, I may have global variables, but I control who has access to them. If I’m in a single file JavaScript situation, I create an object called “GLOBALS” where I put them so I know what is what.

1 Like

Also, even without ES6 modules, you can make pseudo-global variables via the IIFE hack, basically wrapping all the functions that need to access them into a different function (can be anonymous) that’s immediately executed.

Or in the same vein by making them all a member of a custom object.

1 Like

Yep, that’s pretty much what I do. I just wrap all my code in each JS file in an IIFE and be done with it.

In coding exercises, the global scope is limited to each exercise, so it’s not much of an issue. But imagine what would happen if you put 50, 100, or 1000 of these exercises together in one file. What if 20 of these had a global variable name? Then name could be changed 20 times before your app even loads, and then again every time it’s used in a function.

My experience with avoiding global variables has to do with my experiences with handling the nuances of multithreading, of which there isn’t much of in Javascript. In C, C++, or some other system programming language, there can be multiple threads of execution happening at exactly the same time. This creates all kinds of problems (race conditions). Handling this depends on the specifics of the situation. If there really is a single, globally unique variable that describes something, then you would use a mutex of some sort. If there is a unique, library specific instance of something, then you can encapsulate that instance within the library. If this is unique to the instantiation of an object, then you might add this within the object. And while I might get flamed for saying this, if the global variable really is global to the application, then you might just keep it as a global variable.

1 Like

I looked this up on MDN, but aside from being immediately executable I’m still a little confused as to what is going on here. Is this like a lambda function ? Also, in what way is it a ‘hack’ ?

Since it’s a function, it has its own scope, so nothing “leaks” into the global namespace.

It’s a hack since it looks ugly, unless you take extra care. Using an object (think of a singleton, if that helps) would look nicer.

1 Like