Three Techniques for Avoiding Global Variables in JavaScript

Three techniques are presented for avoiding the creation of unnecessary global variables in JavaScript. Using closure this tutorial presents a simple function to change JavaScript variable scope, an immediately invoked function expression (IIFE), and a global object.

For a complete list of all our tutorials:

Take the Learn Modern JavaScript: Getting Started or the Learn Modern JavaScript: Advanced Topics courses at a huge discount:

[iben]

I coded a word base game but it wasn't light on cpu. Why was it so slow, it baffled me all the while. On research, I learned of memory leaks and i was sure my game had those in abundant. Now how do I minimize global declarations? 5 yrs later, your video is still top notch as you demonstrate with utmost clarity. Gracias, shukran, merci, thank you 🙏

[oaakinola]

Two words mate, Life and Saver! I'd happily donate some funds if I knew how to?

[benzflynn]

A great follow-up video to *What Is Wrong With Global Variables In JavaScript ?*
Explanations clear and down-to-earth. Many thanks, Buddy.

[ayushkushwaha]

Good explanation. I found your channel while preparing for my interviews last month and you videos are really helping me a lot. Thanks for these and keep doing it :)

[rajeevrevada]

Still the best video series on JS. Thanks a lot. Love from India ❤️

[raysun]

Thank you sir, it's very much helpful.

[RamKumar-rggr]

Sir u are best JavaScript teacher ever

[joshp]

Fantastic video. You made everything very clear and easy to understand. Thanks for explaining this in great detail.

[naofalhakim]

helpfull man, thanks. i like your detail explanation

[mattwetzel]

at @10:23 you mention a different technique for dealing with global variables in the namespace; what is that other technique?

[naukaprogramowania]

I wowed when I tested "the init" function :D

[filiplahoda]

Nice videos. Good improvement would be to sometimes mention why does it work like that. For example if we put a function declaration into parentheses, what does it mean in the language of JS

[leegold]

Is source code available? It's totally understandable if it's only available through your courses...Just asking. Thanks for sharing your knowledge. These videos are great !

[ainbrisk]

When I try to use this, it works perfectly for the most part, but I experience a big problem.


All functions defined that use case/switch statements no longer work. For example, if I have an onclick event in my HTML that calls "myFunction()", and it has a switch statement, what happens within the case statements never happen. For example, if there is some global variable x, and it reads x and decides what to do depending on its value with a switch statement, even if x == 2 and it asks case: 2. I think it has something to do with the fact it can no longer read the variable used within the switch statement because global variables are all now local and encased by the function you said to add, but this shouldn't be a problem since they are in the same function.


Any ideas?

[luiscerda]

I can't solve null from document.getElementById.

[gouthambolt]

or you can just use type='module'. correct me if I ma wrong.

[amguruprasath]

this video is repeated twice in your channel, sir.