Before the introduction of ECMAScript 6 (ES6), the only way to declare a variable in JavaScript is by using var keyword. However, variables declared using var have several issues in terms of scope and usage.

With the introduction of let and const for variable declaration in JavaScript, it solve the issues when using var, making them easier to debug and less prone to mistakes.

Each keyword can be compared from their scope and usage.

Table of contents

• Scope
  • Global scope
  • Function scope
  • Block scope
• Variable re-declare
• Variable constant
• Summary
• References

Scope

Scope is defined as where the variables are available for use. In JavaScript, it has two type of common scopes; Global scope or Function scope.

But with the introduction of ES6, new type of scope is added to JavaScript; Block scope.

Therefore, unlike var keyword which has global scope and function scope, let and const keyword also have both with the additional of block scope for their definition.

Global Scope

Global scope is applied to variable declared globally (outside any function).

Example

var name = "Anas";

function greetName() {
  console.log("Hello, " + anas);
}

In the example, variable name can be access anywhere as it is defined as global variable.

Function scope

Function scope is applied to variable declared locally (inside a function).

Example

function getGreet() {
  var greet = "Hi";
  console.log(greet);
}

In the example, variable greet can only be access from inside the function it is declared.

Block scope

Block scope is applied to variable which is using let and const keyword. The variables with block scope cannot be access from outside the block.

Example

{
  var a = 10;
  console.log("1: " + a); // Output: 1: 10
}
{
  a++;
  console.log("2: " + a); // Output: 2: 11
}
console.log("3: " + a); // Output: 3: 11

In the example, the a variable can be use outside the block as it is declared using var keyword. Next is example for using let to declare variable.

Example

{
  let b = 10;
  console.log("1: " + b); // Output: 1: 10
}
{
  b++;
  console.log("2: " + b); // Output: ERROR! Uncaught ReferenceError: b is not defined
}
console.log("3: " + b);

In the example, using let will produce error as variable b is declared on first block, but second block try to access it.

Variable re-declare

The usage of var allow the developer to re-declare existing variable within same scope and will not caught any error.

Example

var greet = "Hello";
console.log(greet); // Output: Hello

var greet = "Hi"; // Output: Hi
console.log(greet);

In the example, greet is declared twice and its value is updated when re-declared. But for let and const, re-declared existing variable within same scope will produce error.

Example

let greet = "Hello";
console.log(greet);
let greet = "Hi";
console.log(greet);

/// Output
// ERROR! Uncaught SyntaxError: Identifier 'greet' has already been declared

Therefore, using let and const help the developer to avoid re-declare any existing variable, thus making less prone to mistakes in development.

Variable constant

ES6 also introduce a way to declare constant using const keyword. Any variable declared with const cannot be re-assigned to a different value.

Example

const name = "Anas";
console.log(name); // Output: Anas

name = "Anas Juwaidi";
console.log(name); // Output: ERROR! Uncaught TypeError: Assignment to constant variable.

However, the value of the variable is not fixed and it is mutable.

Example

const lang = ["en", "my"];
const me = { firstName: "Anas" };

lang.push("cn");
me.lastName = "Juwaidi";

console.log(lang); // Output: ["en", "my", "cn"]
console.log(me); // Output: {firstName: "Anas", lastName: "Juwaidi"}

Summary

Following is the summary table between var, let and const keyword.

References

• Var, Let, and Const – What's the Difference?; freecodecamp.org
• Difference between var, let and const in Javascript.; codeburst.io