Answers by Sentry

Scope in JavaScript

David Y.

The Problem

What is scope and how does it work in JavaScript?

The Solution

The scope of a variable is the area of code in which it can be accessed. JavaScript has four different scopes:

  • Global scope: available across all code.
  • Module scope: available inside the current module.
  • Function scope: available inside the current function.
  • Block scope: available inside the current block (i.e. between curly braces {}).

We can illustrate what this means with a piece of example code:

Click to Copy
let x = 1; // global scope
console.log(x); // will print 1

function exampleFunction() {
  let x = 2; // function scope

  if (true) {
    let x = 3; // block scope
    console.log(x); // will print 3
  }

  console.log(x); // will print 2
}

exampleFunction();

This code will print the following to the browser console:

Click to Copy
1
3
2

The three x variables in the above example are defined at different scopes, and thus do not interfere with each other. One of the main advantages of scoping is that we can reuse the same variable names in different contexts without causing unexpected behavior.

Let’s consider a more complex example:

Click to Copy
let globalVar = 1; // global scope
console.log(globalVar); // will print 1

function exampleFunction() { // this is a block of code
  let functionVar = 2;

  if (true) { // this is another block of code
    console.log(globalVar) // will print 1
    console.log(functionVar); // will print 2

    let blockVar = 3;
    console.log(blockVar); // will print 3
  }

  console.log(globalVar) // will print 1
  console.log(functionVar); // will print 2
  console.log(blockVar); // will throw an error
}

exampleFunction();
console.log(functionVar);
console.log(blockVar);

This code will print the following to the browser console:

Click to Copy
1
1
2
3
1
2
Uncaught ReferenceError: blockVar is not defined

If execution could reach them before failing, our attempts to access functionVar and blockVar in the global scope would throw similar errors. From this, we can see that variables from outer scopes can be accessed in inner scopes, but variables from inner scopes cannot be accessed in outer scopes.

Note that while variables defined with let and const adhere to block scopes, variables defined with var do not. All three types of variables will still conform to the other three scope levels.

Finally, module scoping allows us to confine variables to individual JavaScript modules. We can illustrate this with the following HTML:

Click to Copy
<!DOCTYPE html>
<html lang="en">
  <body>
    <script type="module">
        let x = 1;
        console.log(x); // will print 1
    </script>

    <script>
        console.log(x); // will throw an error
    </script>
  </body>
</html>

As we’ve defined the variable x inside a module, we cannot access it from another script tag. Without the use of modules, it would belong to the global scope, as below:

Click to Copy
<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
        let x = 1;
        console.log(x); // will print 1
    </script>

    <script>
        console.log(x); // will print 1
    </script>
  </body>
</html>

You can read more about how to use JavaScript modules in this answer.

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

Click to Copy
<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
Click to Copy
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.