How Scoping Works in JavaScript
“Scope” refers to the current context of execution in which your code can reference or “see” values and expressions. Variables, objects, and functions from various parts of the code are accessible based on their scopes.
Sign up forfree
Forgot your password?
Create an account
*Required: 8 chars, 1 capital letter, 1 number
By continuing, you agree to thePrivacy PolicyandTerms of Use.You also agree to receive our newsletters, you can opt-out any time.
Global Scope in JavaScript
Any value declared outside a function or a block in a script has a global scope and any other script file in your program can access it.
For example, declaring a global variable in one file:
Means any other script in your program can access it:
Declaring JavaScript variablesin the global scope is bad practice because it can lead to namespace pollution. The global namespace is the top space of Javascript that contains the variables, objects, and functions. In a browser, it attaches to theWindowobject, while NodeJS uses an object namedglobal.
Polluting the global namespace can lead to name collision. This is a situation in which your code tries to use the same variable name for different things in the same namespace. Name collisions are often encountered in large projects that use several third-party libraries.
Module Scope
A module is a standalone file that encapsulates and exports pieces of code for other modules in a project to use. It allows you to organize and maintain your codebase more efficiently.
ES Modules formalizedthe JavaScript module patternin JavaScript in 2015.
Variables that you declare in a module are scoped to that module, meaning that no other part of the program can access them.
you could only use a variable declared in a module outside of it if the module exports that variable using theexportkeyword. You can then import that name into another module using theimportkeyword.
Here’s an example that shows the export of a class:
And here’s how it’s possible to import that module and use the property it exports:
Files are not declared as modules by default in JavaScript.
In client-side JavaScript, you can declare a script as a module by setting thetypeattribute tomoduleon thescripttag:
In NodeJS, you can declare a script as a module by setting thetypeproperty tomodulein yourpackage.jsonfile:
Block Scope
A block in JavaScript is where a pair of curly braces start and finish.
Variables declared within a block with thelet, andconstkeywords are scoped to that block, meaning you cannot access them outside of it. This scope does not apply to variables declared using thevarkeyword:
The variables enclosed in the block above and declared as const or let are only accessible inside the block. However, you can access the variable declared using thevarkeyword outside the block.
Function Scope
Variables declared inside a function are commonly referred to as local variables and are scoped to the function. You cannot access them outside of the function. This scope applies to variables declared with thevar,let, andconstkeywords.
Since variables declared in a function are local to the function, the variable’s names can be re-used. Re-using function-scoped variable names is known as variable shadowing, and the outer variable is said to be “shadowed.”
For example:
An Understanding of Scoping Rules Is Vital
Having a grasp of the available scopes in JavaScript makes it easier for you to avoid errors. Trying to access a variable that’s unavailable in a particular scope is a ripe source of bugs.
An understanding of scope also involves concepts such as global namespace pollution, which can make your code more prone to bugs.
Conditionals are an essential way of controlling your program’s execution flow. Explore JavaScript’s different approaches to conditionals.
Some subscriptions are worth the recurring cost, but not these ones.
The key is not to spook your friends with over-the-top shenanigans.
Don’t let someone else take over your phone number.
Make sure you don’t miss these movies and shows before Netflix removes them.
When your rival has to bail out your assistant.
