Looking at JavaScript today, it can be scary as a beginner. People talk about watching out for all the little quirks or “beginner mistakes” people can make. I think one of the most misunderstood topics, that seems to have a lot of mystery for some people, that people love to interview about, is closures and scope. It’s just one of those topics that we might take for granted as developers but you do have to be careful with.
In computer programming, the scope of a name binding – an association of a name to an entity, such as a variable – is the region of a computer program where the binding is valid: where the name can be used to refer to the entity. Such a region is referred to as a scope block.
https://en.wikipedia.org/wiki/Scope_(computer_science)
To me, if you were to read that quote – I’d be a bit confused. It’s not really explaining in a simple way what scope is. I’m hoping to change that today with my little introduction.
Scope is basically the visibility of your functions and/or variables. The deeper into functions you go, the more your scope will shrink – like when you zoom in with an actual scope in real life. You can see less, but more clearly.
Let’s say you insert JavaScript into your HTML file inside of a script tag.
The variable, myVariable, will now be accessible on the JavaScript global scope. That means, in any place in your code, you can write window.myVariable. It also means that code that you import can also access this variable.
It’s not really what you want to do. It’s also how a lot of libraries like jQuery work. They are on the global scope level. You can actually end up overriding them when you name your variable something on the global scope or they can override you.
Now, let’s take another example.
In this example, you’ll find that in the console, we’ll see an error because myVariable is not defined in the global scope. It’s actually scoped only to the function. That means that outside of this function, no one can read this variable.
In programming languages, a closure (also lexical closure or function closure) is a technique for implementing lexically scoped name binding in a language with first-class functions. Operationally, a closure is a record storing a function together with an environment.
https://en.wikipedia.org/wiki/Closure_(computer_programming)
Basically, in terms of JavaScript, a closure is a function that has access to a variable, that’s not globally available. AKA a private variable. If you come from OOP land, you can have private variables within functions etc. in JavaScript.
Let’s take a little example. I’ve taken the following example from W3Schools. It’s a great site to learn the basics (and more advanced) features of JavaScript.
This may look confusing, but it’s actually pretty simple. When we assign add, we’re actually assigning add to the inner function because the outer function is already run.
The outer function is where we can store our “private” variables. These won’t be accessible by anything outside of the scope which means that we have created a
You may notice that a lot of the time, people actually write code like the following.
Basically, these closures allow them to safely write JavaScript code that isn’t accessible by anyone and is not on the global scope. They can be assured that their code will run like how they want.
I hope that this gave you a brief explanation of closures and scope within the JavaScript world. Now you can go forth and understand why code looks so funny.
Leave a Reply