Scope in Modern JavaScript
Tags: tutorial, javascript, beginners, programming
Published: 2021-12-13 14:31:56


## Introduction

Scope is the visibility of a variable within a `{ }` delimited block of code and where it is initially declared.

Scope determines the accessibility (and visibility) of variables.

Modern JavaScript has 3 types of scope:

- Block scope
- Function scope
- Global scope

In short  variable(s) declared inside a block of code delimited by curly braces `{}` are not visible outside that "scope" as from ES6.

## Global Scope

### The `var` keyword and global scope pollution
The `var` keyword (used alot in pre-ES6 days) introduces a global scope when used to declare a variable.

so:
```typescript
{
  var myDub = 'dubstep on bike'
}
console.log(myDub) // prints 'dubstep on bike'
// myDub can be accessed and used here!
```
Variable `myDub` "leaks" to the outerscope (global scope) and can be accessed outside the scope declared in. This pollutes the global scope since it is accessible outside, other parts of the program can still have access to read and modify the variable.

## Block Scope

### `let` and `const` keywords
ES6 introduced `let` and `const` keywords for declaring variables in a manner that does not introduce global scope.

`let` keyword introduces a block scope variable. This means the variable can be accessed within the `{}` they are declared in an nowhere else, kinda great right?

`const` does something similar but useful when variable needs not to change within the block scope it was declared in, hence can not be reassigned.

```typescript

{
  let myDub = 'dubstep on bike'
}
console.log(myDub) // prints "undefined"
// myDub can not be used here!
```
## Function scope
Function scope limits visibility/accessibility of a variable to the function
expression declared in:

```typescript
function myDubDetails {
  let dubVersion = 'v2020'
  // dubVersion is visible inside this function body and not anywhere else
}
```


## Introduce global Scope using either `let`, `const`
### Intentionally introducing a global scope

A global scope can be used to introduced to create global variables. For example declaring the variables at top level of program makes the accessible anywhere inside the program:
```typescript
let myDub = 'dubstep on bike'
let dubEdition = '2020 Edition'

const printDubEdition = () => {
  // myDub and dubEdition are accessible here and anywhere else!
  console.log(`${myDub} edition: ${dubEdition}`) // prints dubstep on bike edition: 2020 Edition
}

// myDub, dubEdition accessibe and modifiable anywhere

```
In the above snippet, if a function modifies `myDub`, somewhere down the program could `myDub` end up with a different value than causing different behavior and bugs that are hard to hunt down and fix.
***
Never introduce global variables anywhere inside your code unless you intentionally want to. `var` is deprecated and you would rarely see it in modern code bases. Strive to use `let` and `const` whenever possible when working with modern JavaScript and beyond. It's ideal to introduce a variable close to where it's used.

***
Follow me on twitter [@nkmurgor](https://twitter.com/nkmurgor) where I tweet about interesting topics and Web Development.

This article was orignally published at naftalimurgor.netlify.com

Do you feel stuck with learning modern JavaScript? You may preorder  [Modern JavaScript Primer for Beginners](https://naftalimurgor.gumroad.com/l/modern-javascript-primer-for-beginners) where I explain everything in a clear and straight-forward fashion with code examples and  project examples.

Thanks for stopping by!