JavaScript: Let, Hoisting, Good Practices

Page 2

Let, Hoisting, Good Practices

Introduction Keyword let Hoisting Good Practice Interactive Examples Summary

Introduction

This section discusses the ECMAScript 6 (ES6) keyword, let, plus hoisting. Learn what hoisting accomplishes and how hoisting affects JavaScript variables. This section concludes with some ideas for good practice.

The keyword, let, allows developers to scope variables to blocks. By default the term hoist, causes the browser's JavaScript interpreter to declare global scope for undeclared variables. In a sense, let and hoisting are opposites. The keyword, let, provides tighter control of variable scope. Hoisting allows looser control of variable declarations. It's good practice to block scope variables and avoid hoisting.

Keyword Let

The keyword, let, allows block scoped variables without hoisting. Before ES6, JavaScript enabled only global and function level variable scoping. Use let as follows to declare variable, j, for access only within the for loop. Variable j cannot be modified or accessed outside of the loop. The next section discusses hoisting.

for(let j = 0; j < 4; j++){
 eDebug.innerHTML += "j: "+j+",";
}

Hoisting

JavaScript allows developers to use a variable without declaring the variable. Hoisting by default, relocates all undeclared variables to the top global scope. For example the following code works, because JavaScript declares variable sName globally. Assume the developer wrote the following code.

sName = "Veronica";

JavaScript rearranges the declaration. JavaScript sees the following code.

var sName;
sName = "Veronica";

Interactive Examples

JavaScript file let-hoist.js implements functionality for the following two files.

Hoisting: testHoist(...)

function testHoist(sId){
let e = getElement(sId);
hoistVar();
if(sName)
e.innerHTML = "<br>Variable sName hoisted to global scope: " + sName;
}

function hoistVar(){
// Undeclared variable sName:
sName = "Veronica";
}

Let: testLet(...)

const N_LOOP = 4;

function testLet(sId){
let e = getElement(sId);
letVar(sId);
if (typeof j === "undefined") {
e.innerHTML += "<br>Variable j is not globally available.";
}
else{
e.innerHTML += "<br>AFTER USE - Let j: " + j;
}
}

function letVar(sId){
let e = getElement(sId);
for(let j = 0; j < N_LOOP; j++){
e.innerHTML += "j: "+j+",";
}
}

Good Practice

Avoid confusion with hoisting. Declare all global variables at the top of a file and use strict mode to avoid hoisting.

Add the following line to the top of a script or function. Strict mode rejects bad syntax, such as hosting; the ability to use a variable before its declaration.

use strict;

Prevent side effects related to use of unexpected variables. Use the keyword, let, for block level variables.

Summary

This section discussed the ECMAScript 6 (ES6) keyword, let, plus hoisting. You learned what hoisting accomplishes and how hoisting affects JavaScript variables. This section concluded with some ideas for good practice.

Learn JavaScript

JavaScript's the foundation of Web developer and Website design skills. This free and unique JavaScript tutorial includes some new or seldom used, but useful features.