ES6 and JavaScript Variable Scoping

Variables, Declaration and Scoping Oh My

  1. Introduction

Scoping is one of those topics that comes up often, but at the same time can be elusive to understand. Why should you understand scoping, and how does it relate to newer versions of JavaScript like ES6?

Let’s set things straight – scoping is what information (variables, properties, functions, etc) that you have access to. In JavaScript, there is local scoping and global scoping.

In other words, scoping defines where the definition of a variable is applicable. If you want to use a variable that you declared in another function, it’s because the definition of that variable only covers a certain block of code, and another function can’t reach it’s hand into that cookie jar.

 

 

  1. Scoping with ES6

In ES6, new variable declaration types were released. Before ES6, the standard was using var to declare a variable. With ES6, a variable can now be declared with let, const, and var. This is important with scoping in mind, as the different variable types declare different scopes.

 

There’s a lot of debate on which to use and when, so here is an explanation of each and my personal opinion after.

 

The var declaration creates a variable that is globally or locally scoped, depending on its location. This variable type is changeable. Regular scoping rules still apply here. I prefer to use these globally for variables I might be changing in the future.

The let declaration creates a variable based on a block scope. This variable type is also changeable. I prefer to use these inside of a function.

The const declaration creates a variable that is immutable (read: unchangeable).

 

With changes like the new variable types and scoping in ES6, JavaScript is become a more solid typed language. ES6 variables are a topic of their own, if you’d like to read more about what each really entails, 2ality has a great article that also goes into block and function scoping with ES6 variables.

 

  1. The Local Scope

The local scope addresses what kind of information is accessible within the function but not outside of the function.

function localScope() {
 var b = 23;
 console.log(b + “ is a locally scoped variable”);
}
localScope();//b is a locally scoped variable
console.log(b);//Uncaught ReferenceError: b is not defined


Or in ES6 Code-

var localScope () => {
let b = 23;
 console.log(b + “ is a locally scoped variable”);
}


 

  1. The Global Scope

The global scope can be anything that is accessible from top level, or to any function or variable that might be calling it. An example of a globally scoped item would be the window object that’s available through JavaScript for the browser.

 

Example:

const a = “Q-tips”;
var globalScope () => {
console.log(a + “ are a global thing”);
}

 

  1. Closing

Knowing how scoping affects your code is empowering

Reduce confusion

Basic building block of understanding programs and how everything works.

 

 

Further Reading:

You Don’t Know JS - Scopes & Closures (Deep Read, online book) - https://github.com/getify/You-Dont-Know-JS/tree/master/scope%20%26%20closures

Scoping - W3Schools - https://www.w3schools.com/js/js_scope.asp

Demystifying JavaScript Variable Scope Hoisting - (Another explanation of scoping along with an intro to hoisting, a related topic) - https://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Everything You Wanted to Know About JavaScript Scope - (In depth look into scopes and different types of scopes) https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/

Leave a Reply

Your email address will not be published. Required fields are marked *