What Is The Scope In JavaScript

For codenewbies and developers who just starting in JavaScript development, the Scope in JavaScript can be a really complex topic to understand.

In this post I want to turn that complex topic into a very easy to understand concept so everyone can understand how it works and what you can do with it.

Scope is a very important concept to understand. When you own this concept in your head, this will make it much easier to build awesome things with JavaScript.

If you are the type of person who likes a presentation, then I recommend one of my slides I made a couple years ago: JavaScript essentials presentation

What Is a Scope

For developers that speak English as their native language this is a no-brainer. But for those English is not their native language it’s not so obvious.

I like the definition below which makes it’s so clear.

scope, range, reach, orbit, compass, ambit(noun)
An area in which something acts or operates or has power or control: “the range of a supersonic jet”. Source: Definitions.net

That made sense right!

In my own I would define it as an area which can be hidden for outside but visible from the inside.

Scope Types

In JavaScript we have 2 types of scope. A Global scope and local scopes.

Global scope: all the things declared in the global scope is publicly available.
Local scope: all the information declared in a local scope is only available in that scope.

Let’s dive into the both types of scope. Learn what you can and can’t do with it, and how you can use it.

1. Global Scope

Var
Function
Class
Const & Let

1. Global scope

The most important but critical scope is the “global scope”. Every other scope can reach everything that is defined in the global scope.

In the browser we have the window object, and in NodeJS we have global the object. In this post when I say “global scope” I mean both of them.

One thing you need to remember about the global scope, Is that you don’t need to store to much information in it. It is recommended to store information in your local scopes.

1.1 Var

When you define a var in the global scope it’s publicly available in the global object.

The var you store in the global scope or in any other scope can be overwritten. It is recommended to make use of let or const instead of the var . Because the var doesn’t have behaviour for being “block scoped”.

1.2 Function

When you define a function in the global scope it’s publicly available in the global object.

1.4 Class

When you define a class it’s publicly available but not bound to the global object.

There is quite a difference in what is bound to the global object and what not, but still available in the global scope.

1.3 Const & Let

When you define a let or const variable, it’s publicly available but not bound to the global object.

2. Local Scope

Var
Function
Const & Let
Class

2. Local scope

When you define function , if or class , basiclly everything between a {} than inside a scope is created. This is what we call a local scope.

Everything that is declared inside a local scope is only available inside. An other scope or even the global scope can’t reach it.

2.1 Var

When you define a var in the local scope it is only available inside that scope. So a var is what we call functionscoped. If you try to reach it outside of that scope, you will get error’s that it is undefined .

Since we have _let_ and _const_ I recommend not using _var_ anymore because it has some side effects. I will explain this better during this post.

In this code sample we can see that if a var is defined in the global scope it is visible for every other scope. When we define a var inside a function we can only see it inside that function. Outside the function it shows it is undefined.

But inside our function we can overwrite the global defined var.

As you can see, after we defined globalScope variable the value is like we defined “GlobalScope”. After we manipulate this inside our function it has a 👏 emoji after it.

This is gonna lead to unpredictable behaviour for the application your building. You definitly gonna end up with error’s.

2.2 Function

A function on it’s own is called a function, a function attached to a Object or Class is called a method. A function defined in a function is a normal function but hidden from the outer scope.

When you define a function in the global scope it’s publicly available in the global object.

2.2.2 Methods Inside an Object

When you define a method or property in an Object it is bound to that scope, but still available through that Object. If you define variables in that method it stays hidden.

With a class it works the similar as an Object.

In the future this will change for the _class_ since the introduction of private fields in Classes. Currently this is only supported in the browsers Chrome and Opera and the tools Babel and TypeScript (v3.8).

As you can see, we can overwrite the globalScope variable from the Object. We can also change the value of the name property from the globalScope.

While these things are nog protected, the variables inside our methods can’t be change nor are visible from the global scope.

2.2.3 Function In a Function

With a function inside a function

2.3 Const & Let

The const and let variables are block scoped. Where a var is bound to the scope of a function, the const and let are scoped between every {} .

The const and let variables can be protected by a function , if-statment , for-loop (or any other loop). Outside it’s scope it can not be reached.

2.3.1 Let

If you want to overwriter information in the same scope, you have to declare a let variable because it the information can be changed. The let variable can’t be redeclared.

2.3.2 Const

Information that needs to be the same during the execution of your JavaScript can find it’s home in the const variable. The const variable can’t be overritten nor be re-declared.

If the const variable has a Object or Array you have the posibility to add and remove properties. But if you store single type values in it, it remains the same.

2.4 Classes

2.4.1 Methods Inside a Class

In this example you can see, variables declared in a method are not available on the outside. The globalScope variable is available in all local scopes. Properties and methods are available outside the class when creating a new instance of it.

In side our class we can modify the globalScope variable. Outside our class we can modify our name property. But this will only be in that instance. If we would make another instance the name would be what is defined in the class.

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!

Hi, I’m Ray a Dutch 🇳🇱 JavaScript Developer and love to share my knowledge which I gained from being a Developer since 2009. I write stories about JavaScript, TypeScript, Angular, and anything related to life as a developer.

You can follow me on Twitter and Instagram or subscribe to my newsletter which I send when I post a new story.

Happy Coding 🚀