JavaScript variables: definition, types, and examples

Variables in JavaScript are the containers for the data used in the program or application. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>Sum of <span id="one">10</span> and <span id="two">20</span>
   is <span id="res"></span></p>
   
   <script>
      var numOne = parseInt(document.getElementById("one").innerHTML);
      var numTwo = parseInt(document.getElementById("two").innerHTML);
      var result = numOne + numTwo;
      document.getElementById("res").innerHTML = result;
   </script>
   
</body>

</html>
Output

Sum of 10 and 20 is

In the above example, after initializing the value to a variable, say numOne, writing numOne anywhere in the program means writing the value inside it or representing the value stored in it.

Types of Variables in JavaScript

In JavaScript, a variable can be declared using any of the following three keywords:

  1. var
  2. let
  3. const

That is, depending on the use of a keyword to declare a variable in JavaScript, there are three types of variables, which are:

  1. var Variable
  2. let Variable
  3. const Variable

Before describing these three types of variables in JavaScript, let's first cover the rules for naming a variable in JavaScript.

Rules for Naming a Variable in JavaScript

We should follow these rules before naming a variable in JavaScript:

Here is a list of some valid variable names examples in JavaScript:

JavaScript var: declare a global variable

The JavaScript var keyword is used to declare a global variable that can be updated as well as re-declared. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p>1. <span id="span1"></span></p>
   <p>2. <span id="span2"></span></p>
   <p>3. <span id="span3"></span></p>
   <p>4. <span id="span4"></span></p>
   <p id="para1"></p>
   
   <script>
      var x = "codescracker.com";
      document.getElementById("span1").innerHTML = x;
      function myFun() {
         document.getElementById("span2").innerHTML = x;
         x = "codes cracker";
         document.getElementById("span3").innerHTML = x;
      }
      myFun();
      document.getElementById("span4").innerHTML = x;
      var x = "JavaScript is Fun!";
      document.getElementById("para1").innerHTML = x;
   </script>
   
</body>
</html>
Output

1.

2.

3.

4.

Note: The default value of a variable declared using the var keyword is undefined. Therefore, accessing a var variable without its initialization returns or prints undefined. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      var a;
      document.getElementById("xyz").innerHTML = a;
   </script>
   
</body>
</html>
Output

JavaScript var syntax

The syntax of the var keyword in JavaScript is:

var variableName = variableValue;

The variableValue is optional. That is, we can assign the value either at the time of declaration or later. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <p>The sum of 10 and 20 is <span id="x"></span></p>
   <script>
      var a = 10;
      var b = 20;
      var sum;
      sum = a + b;
      document.getElementById("x").innerHTML = sum;
   </script>
   
</body>
</html>
Output

The sum of 10 and 20 is

As you can see from the above example, the variables a and b are initialized at the time of their declaration. where the variable sum is initialized later, after the declaration.

JavaScript let: declare a block-scoped variable

The JavaScript let keyword is used to create a block-scoped variable. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <script>
      var num = 2;
      function myFun() {
         for(let i=1; i<=10; i++) {
            let res = num*i;
            console.log(res);
         }
      }
      myFun();
   </script>
   
</body>
</html>

The snapshot given below shows the sample output produced by the above example:

javascript let keyword example

Unlike var, the let variable cannot be re-declared. If you do so, then you will get the error. For example:

javascript let variable

Look at the red underline next to x, the variable declared using let. If you will hover over any of the two x, then you will see:

javascript let variable example

Consider the following code as another example demonstrating the "let" keyword:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>
   
   <script>
      var num = 2;
      for(let i=1; i<=10; i++)
         console.log(num*i);
   </script>
   
</body>
</html>

The output should be:

let variable javascript example

JavaScript const: create a constant variable

The JavaScript const keyword is used to create a block-scoped constant variable whose value cannot be changed or updated. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const x = 10;
      document.getElementById("xyz").innerHTML = x;
   </script>
   
</body>
</html>
Output

Note: The const variable can neither be updated nor re-declared.

The const variable can be used as a constant in a program. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="abc"></p>
   
   <script>
      const PI = 3.14159;
      var radius = 12.8;
      var area = PI * (radius*radius);
      document.getElementById("abc").innerHTML = area;
   </script>
   
</body>
</html>
Output

Also, use const variable if the value of the variable should not change further in the program. You can use const when you need to declare a new array, object, function, or RegExp.

Note: If you will use const to declare an array, then let me tell you. You can change the elements but not re-assign the array. Same goes for const object. That is, you can change the properties but not reassign the object.

Difference between var, let, and const in JavaScript

var let const
declares a function-scoped or globally-scoped variable declares a block-scoped local variable declares a block-scoped variable
can be updated and re-declared can be updated but cannot be re-declared neither can be updated nor re-declared
can be declared without initializing any value can be declared without initializing any value can not be declared without initializing any value

Note: Accessing a variable declared using the var keyword without initialization, returns undefined.

JavaScript Online Test


« Previous Tutorial Next Tutorial »


Liked this article? Share it!





Like/follow us on social media for updates!




Like/follow us on social media for updates!