Coding Newbie

javascript scope

What is the Scope of Variables in JavaScript?

Scope is an important concept to understand when it comes to learning JavaScript. Understanding scope results in better comprehension of variable behavior, it will improve your code writing, and lead to less errors.

ECMAScript 2015, also known as ES6, is a new JavaScript standard that introduced two new declarations: LET and CONST. If you wish to learn about LET variable first, read it in a post “VAR And LET: All You Must Know About JavaScript Variables“.

In addition, with ES6 we got a completely new concept called CONST. You can learn about it in the article “Introducing CONST: New JavaScript Declaration“.

What is a Scope?

Scope determines the accessibility of variables. Simply said, scope regulates the visibility of variables, and where we can use them.

This means, you can easily access all the variables within the scope where you have them defined. Outside their scope, defined variables are inaccessible.

There are two basic types of scopes:

  • Global scope
  • Local scope (function or block scope)

Type of Scopes

Global Scope

Global scope is the scope of a JavaScript document.

When we start writing JavaScript code, we are actually inside the global scope. All the variables defined here, are global variables and available throughout the code. Global variables can be accessed from all the other scopes we determine later.

javascript global scope

Local Scope

Local scope is a bit different.

JavaScript allows each function to create its own scope, and all the variables declared inside the function are considered local variables, and have local scope.

This means that the global environment can not access local scope, as these variables do not exist in global scope.

javascript local scope

This raises the question, why even use the local variables? Why not just declare them globally, so we can use them anywhere inside our code?

Benefit of Local Scope

The fact is the local variables are extremely practical and efficient.

Using local variables within function scope, allows us to use the same name for variables inside multiple functions.

This can be useful, for instance when you declare the variable called number, or num. There is no need to complicate and come up with new names for numbers in every function you create, because you can use this variable name for calculation inside multiple functions. JavaScript looks at all these variables as separate, local variables.

javascript local function variables

Another benefit of using local scopes, is the fact that the computer will not store the variable value before the function is called.

When we declare variables within global scope, we do actually reserve the memory space for those variables, which can make entire code a little bit memory heavy. On the other hand, using local variables inside the functions, means we only take up resources when we actually use the function, not before that.

Block Scope: New Concept

Block Scope is a new property in JavaScript, which came with a new JavaScript standard called ES 6. ES 6 introduced two new variables: const and let. Unlike var, which represents a variable with function scope, these new variables have a block level scope. What is the difference?

Well, function scope allowed us to create new, local scopes, only within the functions.

With block scope, local scope is everything inside“the block”, which is anything within curly brackets. Block can also be a function, but also an object, if statement, for and while loops, etc.

Simply said, whenever you see {curly brackets}, you have found a block. And each variable declared inside the block, exists only within the block.

Using block scope further reduces the need to declare variables at higher level scope, and the variables are not initialized by default, but when they are actually used by the specific block of code.

Conclusion

Understanding JavaScript Scope allows us to make better use of our code and make it more efficient.

Globally and locally declared scopes behave differently, and knowing their specifics is the essential when developing your code.

Scope determines the accessibility of variables, or simply said the visibility of variables, and where we can use them.

Block Scope is a new concept, that takes into consideration two new declarations introduced with ES6: CONST and LET. Using CONST and LET is a new standard of writing JavaScript code.

Learn about CONST in the post post “Introducing CONST: New JavaScript Declaration“.

Learn about LET in the post post “VAR And LET: All You Must Know About JavaScript Variables“.

Leave a Comment

Your email address will not be published.

%d bloggers like this: