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/

WTF is this?

The this statement – an elusive concept to grasp. So what does it do? When can you use it and why would you even want to?

 

Global Context – via MDN

console.log(this.document === document); // true

// In web browsers, the window object is also the global object:
console.log(this === window); // true


this.a = 37;
console.log(window.a); // 37

 

 

What is this?

this is a JavaScript keyword typically used in functions and event handling. this takes the value of the object passed to the function that’s being called. In short, if you do not have a function with an object or value passed into it, the this keyword will not be available to you to edit that function. Instead, this will refer to a global variable (what?)

 

What does this refer to?

this refers to data that’s passed into the parent of this. As an object-oriented keyword, this starts out as a child of the global window object.

How do I make it refer to what I want to refer it to?

this is already an available reference for functions, and should only be used for that.

Check to see what this refers to by using

console.log(this);

If you’re wanting to use this inside of an inner function/closure (function within a function), this reference will be different than in the parent. One common way to pass this reference is to ‘bind’ this to the original reference

this.handleSearchTermChange = this.handleSearchTermChange.bind(this)

MDN – bind() – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

 

When should I use this?

Use this to help make changes to the original function’s object. Whatever has been pulled into the function is the object that will be edited.

Why would I want to use this, instead of directly writing what is being referred?

This is an extremely useful shortcut, that not only helps with code readability but also allows you to access an object with much greater ease than typing out the reference each time.

 

When should I not use this?

Don’t use this if you’re not sure what it refers to.

 

Most important things to know about this:

This is an extremely powerful keyword that an easier work environment to an object passed to a function

 

Further Reading:

MDN – this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

JavaScript is Sexy – Mastering this http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

QuirksMode – http://www.quirksmode.org/js/this.html