DEV Community

Cover image for Var, Const, Let declaration and initialization 💻🚀
Gajender Tyagi
Gajender Tyagi

Posted on • Edited on

Var, Const, Let declaration and initialization 💻🚀

I have used a basic function ⚙️ to show how variable declaration works in js.

Currently the code is on fire 🔥 Try to run 🏃‍♀️ the below codes and correct ✔️ the errors ❌ to save it from burning 🚒.

The code is self explanatory. 🌳

1 🔥


function variables(){
  console.log(`This will explain us if variables declared as 'const' are hoisted or not,
               value of a = ${a}`);
  const a ;// const declaration  
  console.log(`a after declaration but no value is initialized, can this be done ?
               a = ${a}`);
  a = 'aa'; // initialized const 
  console.log(`a after value is assigned, a = ${a}`);

  console.log(`Hoisting of variables declared with 'var' keyword can be seen here,
               value of b = ${b}`); 
  var b = 'bb' ; // initialize a with a value
  console.log(`We can see here that b is no more undefined, values of b = ${b}`);

  console.log(`This will explain us if variables declared as let are hoisted or not,
                value of c = ${c}`);
  let c ;
  console.log(`c after declaration c = ${c}`);
  c = 'cc'; 
  console.log(`c after values initialized is  c = ${c}`);
}

variables();

Enter fullscreen mode Exit fullscreen mode

SyntaxError: missing = in const declaration

2 🔥


function variables(){
  console.log(`This will explain us if variables declared as 'const' are hoisted or not,
               value of a = ${a}`);
  const a = 'aaa'; // const declaration  
  console.log(`a after declaration but no value is initialized, can this be done ?
               a = ${a}`);
  a = 'aa'; // initialized const 
  console.log(`a after value is assigned, a = ${a}`);

  console.log(`Hoisting of variables declared with 'var' keyword can be seen here,
               value of b = ${b}`); 
  var b = 'bb' ; // initialize a with a value
  console.log(`We can see here that b is no more undefined, values of b = ${b}`);

  console.log(`This will explain us if variables declared as let are hoisted or not,
                value of c = ${c}`);
  let c ;
  console.log(`c after declaration c = ${c}`);
  c = 'cc'; 
  console.log(`c after values initialized is  c = ${c}`);
}

variables();

Enter fullscreen mode Exit fullscreen mode

ReferenceError: can't access lexical declaration 'a' before initialization

3 🔥


function variables(){
 //  console.log(`This will explain us if variables declared as 'const' are hoisted or not,
 //               value of a = ${a}`);
  const a = 'aaa'; // const declaration  
  console.log(`a after declaration but no value is initialized, can this be done ?
               a = ${a}`);
  a = 'aa'; // initialized const 
  console.log(`a after value is assigned, a = ${a}`);

  console.log(`Hoisting of variables declared with 'var' keyword can be seen here,
               value of b = ${b}`); 
  var b = 'bb' ; // initialize a with a value
  console.log(`We can see here that b is no more undefined, values of b = ${b}`);

  console.log(`This will explain us if variables declared as let are hoisted or not,
                value of c = ${c}`);
  let c ;
  console.log(`c after declaration c = ${c}`);
  c = 'cc'; 
  console.log(`c after values initialized is  c = ${c}`);
}

variables();

Enter fullscreen mode Exit fullscreen mode

TypeError: invalid assignment to const 'a'

4 🔥


function variables(){
 //  console.log(`This will explain us if variables declared as 'const' are hoisted or not,
 //               value of a = ${a}`);
  const a = 'aaa'; // const declaration  
  //console.log(`a after declaration but no value is initialized, can this be done ?
  //             a = ${a}`);
  //a = 'aa'; // initialized const 
  console.log(`a after value is assigned, a = ${a}`);

  console.log(`Hoisting of variables declared with 'var' keyword can be seen here,
               value of b = ${b}`); 
  var b = 'bb' ; // initialize a with a value
  console.log(`We can see here that b is no more undefined, values of b = ${b}`);

  console.log(`This will explain us if variables declared as let are hoisted or not,
                value of c = ${c}`);
  let c ;
  console.log(`c after declaration c = ${c}`);
  c = 'cc'; 
  console.log(`c after values initialized is  c = ${c}`);
}

variables();

Enter fullscreen mode Exit fullscreen mode

ReferenceError: can't access lexical declaration 'c' before initialization

console log:
a after value is assigned, a = aaa
Hoisting of variables declared with 'var' keyword can be seen here,
value of b = undefined
We can see here that b is no more undefined, values of b = bb

5 🧯


function variables(){
 //  console.log(`This will explain us if variables declared as 'const' are hoisted or not,
 //               value of a = ${a}`);
  const a = 'aaa'; // const declaration  
  //console.log(`a after declaration but no value is initialized, can this be done ?
  //             a = ${a}`);
  //a = 'aa'; // initialized const 
  console.log(`a after value is assigned, a = ${a}`);

  console.log(`Hoisting of variables declared with 'var' keyword can be seen here,
               value of b = ${b}`); 
  var b = 'bb' ; // initialize a with a value
  console.log(`We can see here that b is no more undefined, values of b = ${b}`);

  //console.log(`This will explain us if variables declared as let are hoisted or not,
  //              value of c = ${c}`);
  let c ;
  console.log(`c after declaration c = ${c}`);
  c = 'cc'; 
  console.log(`c after values initialized is  c = ${c}`);
}

variables();

Enter fullscreen mode Exit fullscreen mode

no errors this time 😀

console log:
a after value is assigned, a = aaa
Hoisting of variables declared with 'var' keyword can be seen here,
value of b = undefined
We can see here that b is no more undefined, values of b = bb
c after declaration c = undefined
c after values initialized is c = cc

Finally !!!🎉🎉 we have seen 👀 how to declare and initialize variables with var, let and const keywords in JS.

I would request the reader to comment out what all he learned from this post and if there are any mistakes please point them out as well with code sequence number. Thanks 🙏

Top comments (0)