Best Keyword to Declare Variables and their Scope – JavaScript

A variable is something that stores data and may vary. In JavaScript, we can declare a variable using different keywords. The scope of a variable also depends on the keyword used to declare it. We can use three different keywords to declare variables. Let’s examine the characteristics of each and decide which is the best keyword to declare variables.

var keyword

The var keyword is the most commonly used variable for declaration that supports many features. It is recommended to use var when declaring variables with global scope.

let keyword

A new way to declare variables in JavaScript. It is recommended to be used in cases where variables should have a block scope. However, this also requires the variable to be initialized before being uses. Lets’ consider declaring a same variable using var and let in the example below.

var scores;
let scores = 30 + 40;

We can declare the same variable scores, with var and let. However, with let we should also initialize the variable.

const keyword

The keyword declared a constant variable that hold a single value that cannot be changed after it is assigned. This is helpful for general rules. For example where a variable value stays the same and is used in further manipulation or calculations. A simple demonstration for the best use of const and let is shown below.

const score1 = 50;
const score2 = 45;
let total_score = score1 + score2;

Score1 remains the same once assigned, so does score 2. But accumulation of scores may vary. Therefore we declare score1 and 2 with const, and the total_score with let.

let and const are of block scope variable has a confined scope when compared to const and var.

Let’s consider an example using var and let to demonstrate the difference in their scopes.

var a = 5;
let b = 5;

if (true) {
  var a = 8;
  let b = 8;

  console.log(a);
  // expected output: 8

  console.log(b);
  // expected output: 8
}

console.log(a);
// expected output: 8

console.log(b);
// expected output: 5

Here, the value we pass to a is 5, we then modify the value and make it 8, inside the if block. When we console the variable a declared with var keyword, we get 8 inside the if block and also outside the if block. However, for b, which is declared using let keyword. It shows that it consoles the updated value of 8 inside the if block, but not outside. This is because it has block scope. When b is declared as 8 inside the if block, it stays 8 only when inside that block, when outside the block it reads the value assigned to it at top, i.e. 5.

Let’s now consider an example using all three keywords, var, let and const to demonstrate the difference in their scopes.

if (true) {
  var a = 'JavaScript';
  let b = 'Java';
  const c = 'PHP'

  console.log(a);
  // expected output: JavaScript

  console.log(b);
  // expected output: Java

  console.log(b);
  // expected output: PHP
}

 console.log(a);
  // expected output: JavaScript

  console.log(b);
  // expected output: error  (undefined or null)

  console.log(b);
  // expected output: error  (undefined or null)

When we access the variables b and c using the let and const keywords outside the if block, this gives an error as these keywords have block scope and are accessible only inside the if block.