JavaScript: A Basic Guide to Scope

Scope determines the visibility of variables, functions, and objects in your code. Learn all the details here.

Scope is an important aspect of JavaScript and programming in general. Scope is what limits the visibility and therefor usability of variables, functions, and objects throughout your code.

This results in quite a few benefits, including:

• Security — variables 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

At the most basic level, there are two types of scope in JavaScript:

• Global Scope
• Local Scope

Global Scope

When you begin writing code in JavaScript, you are already in the global scope. Anything written in the global scope is accessible anywhere in your JavaScript code

var cat = 'Jerry';
function localScopeExample(){
  // LOCAL SCOPE
  console.log(cat); // Jerry
}
// GLOBAL SCOPE
console.log(cat); // Jerry

Local Scope

Local scope is a little more complex. Locally scoped variables are only visible and accessible within their local scopes (where they are defined). You can think of local scope as any new scope that you create within the global scope.

One simple example of this is when working with functions. Each function written in JavaScript creates a new local scope. These locally scoped variables can only be accessed within the function that they are defined.

Let’s look at an example. We’ll create a function and declare the variable cat within that function. cat is accessible and can be used anywhere within that function. However, calling cat outside of the function will result in an Uncaught ReferenceError:

function localScopeExample(){
  // LOCAL SCOPE
  var cat = 'Jerry';
  console.log(cat); // Jerry
}
// GLOBAL SCOPE
console.log(cat); // Uncaught ReferenceError: cat is not defined

Since local variables are only accessible within their functions, you can use the same variable name across different functions:

function func1(){
  var cat = 'Jerry';
  console.log(cat); // Jerry
}
function func2(){
  var cat = 'Tom';
  console.log(cat); // Tom
}

Lexical Scope

It’s important to also learn about lexical scope. 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 — func1 is in the global scope, and func2 is declared within the scope of func1. Because of lexical scoping, you can access everything in the global scope and in scope 1 within scope 2:

// GLOBAL SCOPE
var dog = 'Lewis';
function func1(){
  // SCOPE 1
  var cat = 'Jerry';
  var func2 = function(){
    // SCOPE 2
    console.log(cat); // Jerry
    console.log(dog); // Lewis
  }
}

Block Scope

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. Let’s look at an example:

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

As you can see above, simply using brackets to create a code block will locally scope any variable declared within that block. The same concept applies to other block scopes:

let x = 1;
if (x !== 2) {
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

Be careful though. If you accidentally redeclare the same variable with the same block scope you will get an error:

{
  let x = 1;
  let x = 2;
}
Uncaught SyntaxError: Identifier 'x' has already been declared

Key Takeaways

• Global Scope lasts as long as your application.
• Local variables are created when a function starts, and deleted when the function ends.
• Lexical Scope allows inner functions to access the scope of their outer functions
• const and let are block scoped variables. Block scope does not apply to var.

Closing Notes:

Thanks for reading! 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.

If you want to improve your JavaScript Skills even more, check out: A Beginners Guide to Advanced JavaScript

If this post was helpful, please click the clap 👏button below a few times to show your support! ⬇⬇