Explain different kinds of variable declarations in JavaScript

JavaScript support 3 kinds of declarations.

a.   Using 'var' keyword

b.   Using 'let' keyword

c.   Using 'const' keyword

Using 'var' keyword

'var' keyword is used to define both local and global scope variables.

Syntax

var varname1 [= value1] [, varname2 [= value2] ... [, varnameN [= valueN]]];

If you re-declare a JavaScript variable, it will not lose its value. For example,

HelloWorld.js

function do_something() {
  var x = 10;
  console.log("Value of x is : " + x);
  {
    var x = 20;
    console.log("Value of x is : " + x);
    {
      var x = 30;
      console.log("Value of x is : " +x);
    }
    console.log("Value of x is : " +x);
  }
 console.log("Value of x is : " +x);
}

do_something();

When you execute above script, you can see below messages in the console.

Value of x is : 10

Value of x is : 20

Value of x is : 30

Value of x is : 30

Value of x is : 30

As you see the output, last assigned value 30 is reflected in last two statements.

Variables declared outside the function are global to that file.

HelloWorld.js

var y = 100;

function do_something() {
  var x = 10;
  console.log("x: " + x + ", y: "+ y);
}

function say_hello() {
  var x = 20;
  console.log("x: " + x + ", y: "+ y);
}

do_something();
say_hello();

Output

x: 10, y: 100

x: 20, y: 100

Since y is declared outside of the functions definition, it is globally accessible in the file HelloWorld.js.

Using let keyword

‘let’ keyword is used to define block-scope local variable.

Syntax

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN];

var1, var2, …, varN are the variable names

value1, value2, …, valueN  are the values associated with above variables.

HelloWorld.js

function do_something() {
  let x = 10;
  console.log("Value of x is : " + x);
  {
    let x = 20;
    console.log("Value of x is : " + x);
    {
      let x = 30;
      console.log("Value of x is : " +x);
    }
    console.log("Value of x is : " +x);
  }
 console.log("Value of x is : " +x);
}

do_something();

When you ran above script, you can see below messages in the console.

Value of x is : 10

Value of x is : 20

Value of x is : 30

Value of x is : 20

Value of x is : 10

Using const keyword

Just like ‘let’ variables const variables are block scoped.

Syntax

const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];

HelloWorld.js

function do_something() {
  const x = 10;
  console.log("Value of x is : " + x);
  {
    const x = 20;
    console.log("Value of x is : " + x);
    {
      const x = 30;
      console.log("Value of x is : " +x);
    }
    console.log("Value of x is : " +x);
  }
 console.log("Value of x is : " +x);
}

do_something();

Output

Value of x is : 10

Value of x is : 20

Value of x is : 30

Value of x is : 20

Value of x is : 10

‘const’ keyword is used to define constants. The value of a const variable do not change through reassignment.

HelloWorld.js

function do_something() {
  const x = 10;
  
  try{
    x = 11;
  }catch(error){
    console.log(error);
  }
}

do_something();

When you ran above application, you can see below error message in console.

TypeError: "invalid assignment to const `x'"

Previous                                                 Next                                                 Home