Scope in JavaScript

Mastering JavaScript Series

Scope is a vantage point inside code. Pick a sheet of JavaScript code and put your finger at any spot. If you were an interpreter, there would be a specific amount of code and data visible and accessible to you from that specific point.

Why do we need scope?

Imagine you have a printer in a small office of 5 employees. The employees share that printer and on rare occasions it happens that two people print something at the same time. It is not a big deal. They carefully separate their sheets and both parties get their print jobs. But as this office keeps getting bigger and bigger. This turns into a huge problem. Sometimes the same printer gets 10 different print jobs at the same time and now the employees have to separate all those sheets and figure who owns what. As you can see, after a certain point in the employee increase the printing process gets too complicated to manage. One solution is to divide the employees to departments, and each department gets their own printer. Once the lines between departments and ownerships of printers are demarcated, things go back to normal.

In the early days of computer programing, computer memories were small. The amount of data and code that a computer could run was small. As a programmer, it was manageable to keep track of your variables and data flow in a computer program. But, as the computers became stronger and memories grew larger, more complex programs were possible. Soon, managing data and code became an issue. It became far too easy for one part of a program to mess up data needed by other parts of a program. And just like each department should have their own printer, each part of a program having their own scope became a necessary thing.

Scope defines the visibility and accessibility of variables and methods of one part of a program to another. Scope is managed differently by different programing languages, but in general many languages including JavaScript share the concept of local and global scopes.

In JavaScript, anything available outside a function is part of the global scope and things available inside a function are part of the local scope. JavaScript didn’t use to have block level scope, but now with let we can declare variables that are limited to the scope of a statement, a block, or an expression.

Global, function, and block scopes

In the code above two global variables are declared in line 1 and 2. The code declares a third variable as a local variable on line 5. On line 6 the code changes the global variable from the inside of a function. On line 8, if that variable was declared with var keyword it would overwrite insideVariable, but is not doing so now, because modern JavaScript allows you to declare block-scoped variables with let.

Avoid declaring global variables (a.k.a polluting the global scope)

The global namespace is shared by all your code. Declaring a variable in the global name space is like sharing a printer with everyone in the firm. This opens up the possibility of accidental alteration of values and data.

This doesn’t mean that declaring global variables can always be avoided. Not only it can’t always be avoided, but in some cases it might even make more architectural sense to define some of your variables globally. Like importing outside modules that all your code shares. Like having a shared dining hall for your firm.

Know your functions and their scope

In JavaScript local scopes are created by functions, you might see local scope often called as function scopes. Variables declared inside a function are available only inside that function and available to the functions declared inside that function. Being able to access variables present in their immediate outside environment is made possible because of a built-in JavaScript technique/functionality called closure. When resolving a variable, JavaScript starts at the innermost scope and searches outward.

Function scope with closure in action

Takeaways:

1. Scope defines the visibility and accessibility of variables and methods of one part of a program to another
2. Avoid declaring global variables when they go against the concepts of modularity.
3. Functions create local scopes where variables declared inside are only available inside.
4. let creates block-scoped variables, variables declared with let stay inside their blocks, statements, or expressions.