The Four Pillars of JavaScript Scoping: Global, Block, Function, and Module
Tags: javascript, beginners, programming, tutorial
Published: 2023-09-07 23:00:00

We all know that it takes time to really understand JavaScript. But the learning process will be much faster when we write codes with fewer bugs. In this article, we will discuss one concept in JavaScript that people find difficult to understand: Scoping. Let’s dive right into it 😉.

## 🔭 What is Scope ?

Scope is an environment or set of code that have all the variables defined in it and those variables are only accessible inside that scope. Anything outside that scope does not have access to those variables. This is why when you try running a variable in one place and try to use it in another place it throws an error. Let’s see an example for a clearer understanding 👇🏽

```jsx
const a = 1;

function num() {
  const b = 2;
  console.log('num', a, b);
}

num();
console.log(a, b);
```

let’s see the output before I explain 👇🏽


![scope](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hww6zq10wizl4n2erjw.png)

For the first output, you will see that the `num()` function ran successfully because variable `a` is scoped globally (which we are going to be talking about in a minute) which means it can be accessed from anywhere and the variable `b` is scoped inside the `num()` function and it can only be accessed inside that function, and since we logged out `a` and `b` inside the `num()` function, it printed out both `a` and `b` because they we properly scoped.

For the second output, we got an error because the variable `b` is defined inside the function `num()` and it is only accessible inside that function while variable `a` is defined globally and can be accessed anywhere.

## ⌨️ Types of Scope

There are four different types of scope in JavaScript which are

1. Global Scope
2. Block Scope
3. Function Scope
4. Module Scope

## 🌐 1. Global Scope

Just as the name implies, The global scope is the outermost scope and the variables can be accessible everywhere both in functions and blocks. Here is an example 👇🏽

```jsx
let name = 'lawrence';
var age = 56;
const hobby = 'Drumming';

function profile() {
  console.log(name, age, hobby);
}

profile(); //output: lawrence 56 Drumming
```

The variables that are declared in a global scope are called **Global Variables**, these variables can be accessed from any scope just like you see in the example above.

## 🪨 2. Block Scope

With Block scope, every variable declared that is declared is only accessible within that block scope. it is an area within conditions (`if` or `switch`) or loops (such as `for` )  or whenever you see `{}` it is a block scope. In a block scope, you can declare variables using `const` and `let`keywords. Let’s see an example 👇🏽

```jsx
if (true) {
  const b = 10;
  console.log(b); // ouput: 10
}

console.log(b); // ouput: Uncaught ReferenceError: b is not defined
```

As you can see in the example above, when we tried logging out the variable `b` outside the block scope, we got an error saying that `b` is not defined because `b` can only be accessible inside the block scope which is the `if` statement.

## 🎢 3. Function Scope

Function scope is the same as block scope because it is just another type of block scope that you can create and one of the important similarities it has with block scope is the `{}` . let’s see an example 👇🏽

```jsx
function test() {
  const c = 10;
  console.log(c); // output: 10
}

test();
console.log(c);  // ouput: Uncaught ReferenceError: c is not defined
```

Just like we discussed in the block scope, the Function scope also acts the same way as seen in the example above.

The only time you should be concerned about using function scoping is only when you are using the keyword `var` . let’s take an example before I explain 👇🏽

```jsx
function test() {
  var a = 10;

  if (true) {
    var c = 20;
  }

  console.log(a, c); //output: 10 20
}

test();
```

If you notice in the example above, you will see that the variable `a` and `c` are printed out without any error because variables that are defined with the `var` keyword are only function scoped which means that because the variable `c` is defined inside the function `test()`, it is available anywhere inside that function.

If we change the variable `c` to another variable such as `let` and `const`,  we are going to get an error because`let` and `const` are block level scope

## 🏨 5. Module Scope

We already know that variables that are declared outside any function are global variables. But In modules it is different. In module scope, the variables declared outside any function cannot be accessible to other modules unless it is explicitly exported. And exporting a module file makes a function or object available to other modules.

I know it sounds confusing but let’s see an example for a better understanding 👇🏽

```jsx
const moduleVar = 'Module';

export const exportedVar = 'Exported';
```

In the example above, We created a global variable `moduleVar` and we also created another variable that we are going to be explicitly exporting from an `moduleScript.js` module file.

💡: Both variables are inside the `moduleScript.js` module file.

That being said, Let’s import the `moduleScript.js` inside our normal `script.js` file 👇🏽

```jsx
import { exportedVar } from './ModuleScript.js';

console.log(exportedVar); //output: Exported
```

You can see that when we imported the `exportedVar` variable and logged it out, we got the expected output. But if we try to log out the `moduleVar` variable inside the `script.js` file, we are going to get an error because the `moduleVar` variable is accessed globally inside the `moduleScript.js`. The only way it is going to run is when we import it into the `script.js` file.

## Conclusion

We have gotten to the end of the article, One thing to note is that you can do more research about scoping in JavaScript since I did not cover everything. But the aim of the article was to cover the basics which I did and I hope you learned something from it. That’s all guys, have an amazing weekend. Bye 😀