# JavaScript: Understanding Global, Function, and Block Scope

> Learn how global, module, function, and block scope work in JavaScript, with runnable examples showing variable access across each scope level

**URL:** https://sentry.io/answers/scope-in-javascript/

---

## The Problem

What is scope and how does it work in JavaScript?

## The Solution

The [scope](https://developer.mozilla.org/en-US/docs/Glossary/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
* 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:

```javascript
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:

```
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:

```javascript
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:

```
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). We can illustrate this with the following HTML:

```html
<!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:

```html
<!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](https://sentry.io/answers/how-do-i-include-a-javascript-file-in-another-javascript-file/).

---

*Source: [sentry.io/answers/scope-in-javascript/](https://sentry.io/answers/scope-in-javascript/)*