A lot of (JavaScript) developers are talking about “the scope”, but what is it? They are everywhere in JavaScript! I figured that a lot of junior developers don’t know what a scope is. Most of them can do cool things with jQuery. But it mostly stays at picking a snippet from the web, change the things they understand and putting it in a JavaScript file.

It is very important to know what a scope is and what you can do with it, I would love to make it clearer for you. Most of the things I will tell you comes from a presentation I gave multiple time for a few groups of junior developers. (JavaScript essentials presentation)

What is a scope

Let’s start with the Global scope. From the first moment, you start typing JavaScript, your in the Global scope. The Global scope is accessible from any place. But you can create smaller scopes with a function inside the Global scope. Local scopes are not accessible from the Global scope, only from the same scope (read function). The Global scope is accessible from any place!

Global scope

Something is defined in the global scope when it is not in a function. Just define a few variables in a JavaScript file it is in the Global scope.

JavaScript example

JS Bin on jsbin.com

Local scope

A local scope is created by a function. Everything that is defined in there will only be accessible inside that, or child scopes (functions inside that function). Inside a local scope, you can access the Global scope or a parent scope (parent function)!

JavaScript example

JS Bin on jsbin.com

In the example, above you see that there will be an error when you try to get the variable in the Global scope that is defined in a child scope.

Why use scopes in JavaScript?

In JavaScript, you can define your variables with the same name in a different scope, without it is overridden. If you want to change the value of the variable just change it without re-define it again.

Not overridden

JS Bin on jsbin.com

Overridden

JS Bin on jsbin.com

If you want to prevent yourself from accidentally changing the value of a variable in a different scope, just start your function with declaring your variables.

Hoisting

This is also called as Hoisting. This will prevent overriding accidentally your variables.

Hoisting example

JS Bin on jsbin.com

Off course, if this would be your real code, you would never do this. But imagine you are working on a bigger JavaScript application, it would be recommended to use this!

Well, some more experienced developers won’t agree for some reason. But in my experience, it prevents a lot of issues!

Private & public

Developers that already worked with other libraries or frameworks and checked the source code know’s that the function’s you can use in your own code, have smaller function’s inside it, that you can’t use or access.

This is because there are private and public functions (properties). A public function is accessible from the other scope. A private function is only accessible from the same scope, so it is hidden from another or parent scope.

Public and private functions are used in JavaScript modules. A module is easy to create, just define a variable with an “Immediately-Invoked Function Expression”. These modules can be used from any place in your JavaScript, but you can only access the public functions. If you want to read more about the Module pattern, head over to the “Mastering the Module Pattern” article by Todd Motto!

JavaScript Module

JS Bin on jsbin.com

Private functions

Since we created a module we can now see the difference between private and public. If we try to access the private function it will give an error.

JS Bin on jsbin.com

This function is only accessible in the module itself. Not from outside! So a private function is very useful for internal things like difficult calculations, error handling etc.

Public functions

From our module, the public function’s (also called methods) are accessible from outside the module.

JS Bin on jsbin.com

Public functions are there to execute them from outside your module. If you take for example the Google Maps API. It is full of public and private methods.

JS Bin on jsbin.com

The Map() method is a public function! This public function execute a lot of private functions. So you only have to call 1 function and it will handle’s the rest for you!

How to create private and public functions

If you check the example module it is very simple! A function will become public if it is returned. Otherwise, it stays private! In the module there is the javascriptModuleObject object, this object is returned by the return statement.

So if we want to make the other function also public we can just add it to the object. We can do that by adding this function inside the object, but also like this javascriptModuleObject.newPublicFunction = function() {}.

Most of the time this is the way I would setup my modules:

JS Bin on jsbin.com

I set it up like this because it is very readable of which function is public or private. In just 1 view you can see that every function attached to the object (that is returned) will be public, the rest will be private!

Conclusion

I hope you have a better understanding of the scope in JavaScript and also know what to do with it and how to implement this in your own code! If not, please add questions in the comments! I will be happy to help you figure it out!


Also published on Medium.

Author Raymon S

Lead Frontend Developer ♥ CSS & Sass / Founder of Mr Frontend Community / Coach & Mentor- #HTML #Sass #BEM #JavaScript #AngularJS #responsive #CoderDojo #NodeJS

More posts by Raymon S
%d bloggers like this: