Scope in Modern JavaScript

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:

{
  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.

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

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:

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 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 where I explain everything in a clear and straight-forward fashion with code examples and project examples.

Thanks for stopping by!

Comments

[Naftali Murgor]

Note: thevar keyword is deprecated as of ES6(ES2015). It's quite rare to see usage of var in mordern code bases due to the behavior that var introduces. Usage of var to declare and initialize variables still works because of back-ward compatibility of JavaScript. However, when working on pre-ES2015 code, trying to migrate to let and const will be too much effort for little to no benefit.

[Torin Zhou]

I believe Var is function scoped.
And to reduce hoisting undefine issues we should never use var in our code.

[Naftali Murgor]

True, var is function scoped. Thanks for the feedback. Using var would be detrimental because it gets hoisted.