Using var, let, and const appropriately in JavaScript

Image from Tutorial Republic

Though most of the JavaScript developers have used all these keywords, it’s good to know how they work. In this article, we will discuss var, let and const in detail with respect to their scope, use, and hoisting. At the end of the article, I’ll provide a cheat sheet as well.

var

Whenever a variable is declared using a var keyword, the variables are:

• Function scoped or globally scoped
• Re-assignable and re-declarable
• Not subject to the temporal dead zone

Function scoped or globally scoped

When a variable is declared within a function using var, the variable is scoped to the function. But, when the variable is declared outside a function or block, then the global variable has a global scope. In addition, it also creates a global property on the window object, with the same name.

var language = "JavaScript";
function foo() {
  var language = "Python";
  framework = "React";
  console.log(language);
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // "JavaScript"
console.log(window.framework); // "React"

It also has to be noted that variables declared without any statement become a global variable by default. If you’d like to avoid this behavior then you can use strict mode in JavaScript by adding "use strict"; at the beginning of the file.

Re-assignable and re-declarable

Variables declared with var can be reassigned and re-declared later in the code.

var language = "JavaScript";
var language = "Python"; // Re-declaration
console.log(language); // "Python"
language = "Java"; // Reassignment
console.log(language); // "Java"

Hoisting

Hoisting in JavaScript is a mechanism whereby variables and function declarations are moved to the top of their scope before code execution. var variables are hoisted to the top of their scope and initialized with a value of undefined.