How to Use var, let, and const appropriately in JavaScript

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.

let

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

Block scoped
Re-assignable but not re-declarable
Subjected to the temporal dead zone

Block scoped

When declared inside a block, the variable is scoped to that block. Likewise, when declared within the function, the variable is scoped to that function. But, unlike var it does not create a global property on the window object.

let language = "JavaScript";

{
  let language = "React"; // Block scope
  console.log(language); // "React"
}
function foo() {
  let language = "Python";
  console.log(language);
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // undefined

Re-assignable but not re-declarable

Any variable declared with let cannot be re-declared. If you do so, you’ll get a nasty error message. But you can reassign the variable.

let language = "JavaScript";
language = "Python";
console.log(language); // "Python"

Hoisting

Variables declared with let are subject to hoisting, but temporal dead zone(TDZ) kicks in. TDZ basically prevents access to the let declarations before their initialization. When a variable is accessed without declaration, then ReferenceError is thrown.

console.log(language); // TDZ
let language = "JavaScript"; // No hoisting
// ReferenceError: language is not defined

const

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

Block scoped
Neither re-assignable nor re-declarable
Subjected to the temporal dead zone

Block scoped

const is very similar to let as variables declared with const are also block scoped.

const language = "JavaScript";

{
  const language = "React"; // Block scope
  console.log(language); // "React"
}
function foo() {
  const language = "Python";
  console.log(language); 
}
foo(); // "Python"
console.log(language); // "JavaScript"
console.log(window.language); // undefined

Neither re-assignable nor re-declarable

Any variable declared with const cannot be re-declared and also cannot be reassigned. If you do so, you’ll get error messages on both occasions.

const language = "JavaScript";
language = "Python"; //TypeError: Assignment to constant variable.
console.log(language);

Hoisting

The hoisting behavior of const variables are similar to that of let variables.

console.log(language); // TDZ
const language = "JavaScript"; // No hoisting
// ReferenceError: language is not defined

Cheat sheet

Image for post

Comparison cheat sheet

Conclusion

While this was a relatively short article, I hope you gained a good understanding of how all these statements work and how to use them appropriately in your code. Thank you for reading!

Originally published on codeburst.io

#javascript #es6