Sentry Answers>JavaScript>

Scope in JavaScript

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.

  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,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
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.