JavaScript: Learn & Understand Scope
Scope determines the lifespan, access, and visibility of variables, functions, and objects in your code.
Scope is an important concept in JavaScript to understand. It determines the lifespan, access, and visibility of variables, functions, and objects throughout your code.
Scope Benefits
Utilizing scope results in quite a few benefits, including:
- Security — Variables and functions are only accessible where they are needed.
- Reducing Namespace Collisions — Namespace collisions occur when two or more variables share a common name. Scoping of variables helps reduce global variables which prevents this from occurring.
- Code Reusability — Correctly utilizing local scopes means more reusable code with fewer potential side-effects.
Types of Scope
At the most basic level, there are two types of scope in JavaScript — Global Scope and Local Scope.
In this article we’ll also briefly explore Lexical Scope and Block Scope.
Global Scope
When you open up a document and begin writing code in JavaScript, you are in the global scope.
Anything you write in the global scope — functions, variables, etc. are accessible anywhere within your JavaScript code. Global variables are also available for the lifetime of your application and only deleted when the application ends (or when you close the browser window).
Since anything you write in the global scope is accessible anywhere within your code, it is generally considered a bad practice to declare variables in the global scope in JavaScript. Using the global scope makes your code less reusable, introduces namespace collision opportunities, and makes functions more likely to be influenced accidentally by global variables. You should keep the global scope as clean as possible.
Take a look at the code below. It’s in the global scope:
var cat = 'Jerry';The code above is kind of a goofy example, but will make more sense as we move on through the tutorial!
Local Scope
Whenever we create a new scope within the global scope, we are creating a local scope. Locally scoped variables are only accessible where they are defined (within their local scope).
The easiest way to create a new local scope is by simply creating a new function! Every function created in JavaScript creates a new local scope. Within a function, any variable created is locally scoped and can only be accessed within the function that they are defined. Local variables are deleted when the function completes.
Let’s look at an example. Recall our globally scoped code from above:
// *GLOBAL*
var cat = 'Jerry';Lets create a new function and declare a variable dog within our function.
function localScopeExample(){
// *LOCAL*
var dog = 'Marley';
}We now have two variables floating around. cat was created in the global scope and thus can be used anywhere within our JavaScript code:
var cat = 'Jerry';
console.log(cat); // Jerryfunction localScopeExample(){
var dog = 'Marley';
console.log(cat); // Jerry
}console.log(cat); // Jerry
Our other variable, dog was created within the localScopeExample() function and is therefor scoped to that function. It is only accessible within its local scope, and any attempt to reference it outside of this scope will result in an Error:
var cat = 'Jerry';
console.log(dog); // Uncaught ReferenceError: dog is not definedfunction localScopeExample(){
var dog = 'Marley';
console.log(dog); // Marley
}console.log(dog); // Uncaught ReferenceError: dog is not defined
As you can see, when we try to access dog in the global scope, we get an Uncaught ReferenceError as dog has not been defined in that scope.
Let’s look at one final note about local scope — Because variables are locally scoped within functions, this means you can use the same variable name in different functions with no adverse side effects:
function func1(){
var dog = 'Marley';
console.log(dog); // Marley
}function func2(){
var dog = 'Shasta';
console.log(dog); // Shasta
}
Lexical Scope
Since this article is meant to be a simple introduction to scope, we’ll only touch on lexical scope briefly.
Lexical scope (also referred to as static scope) is the ability of an inner function to access the scope of an outer function.
Let’s look at an example. In the code below we have two functions defined — outerFunc() is in the global scope, and innerFunc() is declared within the scope of outerFunc(). Because of lexical scoping, scope 2 has access to all variables created within the global scope and within scope 1:
// *GLOBAL*
var dog = 'Lewis';function outerFunc(){
// *SCOPE 1*
var cat = 'Jerry'; function innerFunc(){
// *SCOPE 2*
console.log(cat); // Jerry
console.log(dog); // Lewis
}
}
I’ll be publishing an article tomorrow with more information on Closures & Lexical Scoping
Block Scope & let, const
So far in this article we’ve only explored variables defined with var. And that’s been on purpose. You see, with var, a variable is either globally scoped, or locally scoped to the function in which it is defined. Block scopes like if, for, while, {}, etc. have no effect on var.
let & const on the other hand, are scoped within the block which they are defined. Here’s an example:
let x = 1;{
let x = 2;
console.log(x); // 2
}console.log(x); // 1
As you can see above, by simply using brackets to create a code block, we’ve locally scope any variable declared within that code block. While it may look like we only have one x variable, there are actually two. One is globally scoped with a value of 1, and the other is block scoped with a value of 2. When JavaScript resolves a variable, it first searches the inner-most scope for that variable. If it can’t find the variable, it works outwards until the variable is found or we’ve reached the global scope and not found anything.
The same concept applies to other types of block scopes, like if, for, while, etc.:
let x = 1;if (x !== 2) {
let x = 2;
console.log(x); // 2
}console.log(x); // 1
Be careful though, you cannot redeclare the same variable within the same block scope. Doing so will result in an error:
{
let x = 1;
let x = 2;
}Uncaught SyntaxError: Identifier 'x' has already been declared
Key Takeaways
We’ve examined four different types of JavaScript scope in this article. That’s a lot to remember, so here are the key takeaways when considering scope:
- When you start typing code, you are in the Global Scope. Global Scope lasts as long as your application.
- Local variables are created when a function starts, and deleted when the function ends. These variables are only available within the function they are defined.
- Lexical Scope allows inner functions to access the scope of their outer functions.
constandletare block scoped variables. Block scope does not apply tovar.- When JavaScript resolves a variable, it first searches the inner-most scope for that variable. If it can’t find the variable, it works outwards until the variable is found or we’ve reached the global scope and not found anything.
Closing Notes:
Thanks for reading! If you’re ready to finally learn Web Development, check out: The Ultimate Guide to Learning Full Stack Web Development in 6 months.
If you’re working towards becoming a better JavaScript Developer, check out: Ace Your Javascript Interview — Learn Algorithms + Data Structures.
I publish 4 articles on web development each week. Please consider entering your email here if you’d like to be added to my once-weekly email list, or follow me on Twitter.
