Variables in JavaScript

Variables act as a container used to store data. Each variable must have a unique name to identify them so that these identifiers (storing specified data) can be used later in the program.

Why to use variables?

It is used to print a number of values.
Using variables saves time.
Data values assigned to a variable can be changed as per requirement.

var, let and const

There are total 3 ways to define a variable:-

Using 'var' keyword

It is the most commonly used keyword to define or declare a variable.

Syntax:

var variable_name = data_value;

You can also declare the variable first then assign it a value.

For example,

var variable_name;

variable_name = data_value;

To define multiple variables in a single statement, use the below syntax:

var var1, var2, var3,... = data1, data2, data3,...;

Points to be kept in mind while naming any variable (the identifier):

Identifiers (or variable names) can contain letters (A-z), digits (0-9), underscores (_) and dollar signs ($).
Names cannot begin with any digit.
Names are case sensitive (name and Name are two different variables).
Reserved words cannot be used to name variables (or identifiers).

Now, let's understand variables with the help of examples.

//js program using variables with 'var' keyword

      <!DOCTYPE html>
      <html>
      <body>

      <script>
      var a = 54;
      document.write("The value of a is " +a);
      </script>

      </body>
      </html>

OUTPUT

The value of a is 54

Using 'let' and 'const' keywords

'let' and 'const' are used in the same way as the 'var' keyword.

For example,

//js program to demonstrate 'let'

<!DOCTYPE html>
<html>
<body>

<script>
let a = 66;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

The value of a is 66

//js program to demonstrate 'const'

<!DOCTYPE html>
<html>
<body>

<script>
const a = 54;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

The value of a is 54

Differences between 'var', 'let' & 'const'

'var' allows you to use multiple variables with the same name and outputs the value which is assigned to the newest variable.

For example,

//js program using multiple variables with same name
<!DOCTYPE html>
<html>
<body>

<script>
var a = 54;
var a = 94;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

The value of a is 94

The above program outputs data of the last defined variable. You can also change the date value without using 'var', just assign the value to the variable.

JS program with undefined variable using 'var' keyword is runnable with no error. It does not produce any output as no data values are assigned to the variable.

Example

<!DOCTYPE html>
<html>
<body>

<script>
var a;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

 //A blank output

No messages are displayed in the browser and the console does not show any error message.

Whereas, 'let' does not allow you to define the same variable multiple times but you can assign different values. The newest assigned variable is printed as output.

For example,

<!DOCTYPE html>
<html>
<body>

<script>
let a = 54;
a = 64;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

The value of a is 64

JS program with undefined variable using 'let' prints "undefined" as the output. It means the variable is not defined (i.e. no data value is assigned to the variable).

Example

<!DOCTYPE html>
<html>
<body>

<script>
let a;
document.write("The value of a is " +a);
</script>

</body>
</html>

OUTPUT

undefined

And, as the name indicates, 'const' implies constant. It means you can neither define nor declare the variable again. Data value assigned to const variables is fixed and cannot be changed once defined.

If a variable is declared using the 'const' keyword and no value is assigned to it, an error occurs.

If a program contains errors, it can be checked in the console.

Variables in JavaScript