Let, Var and Const Keywords

Let, Var and Const Keywords

An indepth knowledge and understanding of the let, const and var keywords used in declaring variables

ยท

3 min read

Variables are containers for storing data. There are three main ways of declaring javascript variables

  • Var keyword

  • Let keyword

  • const keyword

var x = 10;
let y = 11;
const z = 15;

The let and const keywords are new ways of declaring javascript variables which were added to javascript in the es6(2015) update. We are going to take an in-depth look at their various features and different characteristics.

Var Keyword

The var keyword is the first keyword used in declaring javascript variables. It declares a function-scoped or global-scoped variable. features of var variables include

  • Var variables can be redeclared and updated. Redeclaring and updating a variable involves assigning a variable to a new value. This is possible when using a var keyword to declare a variable and it doesn't throw an error.

      var x = 20;
      var x = 18;
      console.log(x)//This gives 18
    
      var y = 20;
      y = 19;
      console.log(y)//This gives 19
    
  • Var variables when declared are hoisted to the top of their scope and initialized with a value of undefined. Hoisting involves the movement of variables and functions declaration to the top of their scope before the execution of code. It makes some types of variables accessible/usable in the code before being declared.

console.log(x)
var x = 20;//This gives an undefined

Let Keyword

The let keyword was introduced in the es6(2015) update. Let is more preferred during variable declaration as it is an improvement to the var keyword. It declares a block-scoped variable. features of the let variables include:

  • Let variables can be updated but not redeclared. it gives an error when redeclared
//Redeclaring a let variable
let x = 20;
let x = 24;
//This gives an error saying that x has been declared

//Updating a let variable
let y = 24;
y = 40;
console.log(y)// This gives 40 in the console
  • If you try using a let keyword before initialization, you get an error. variables declared with let are hoisted to the top of their scope but uninitialized. it gives an error.
console.log(x)
let x = 20; //This gives an error
  • Variable declared with let is only available for use in that block as they are block scoped. A block is a code bounded by {}. Example
let x = 4;
let y = 5;

   if (x > 3) {
        let z = 15;
        console.log(z);//This gives 15
    }
   console.log(z) // hello is not defined

We see that using z declared outside its block gives an error.

Const Keyword

Const was also introduced in the es2016(2015) update. It also declares a block-scoped variable and its variables maintain a constant value. Its features include

  • Variables declared with const cannot be updated and redeclared. It remains the same within its scope
const x = 15;
x = 15;//This gives an error

const y = 24;
const y = 5; //This also gives an error
  • So just like let variables, variables declared with const are hoisted to the top but not initialized
console.log(x)
const x = 7; // This gives an error

Conclusion

Variables declared with let and const have similar characteristics and are different from variables declared with var in all aspects. This wraps it up, I hope u gained a basic understanding of the const, let and var javascript keywords, If yes let me know in the comment section. Thank you for reading ๐Ÿ˜Š

ย