JavaScript Variables

In this section of the tutorial, we will learn about Variables in JavaScript and using them in JavaScript Language.

It is very important to understand the importance and use of good and meaningful Variables in JavaScript which makes the code more readable and meaningful.

Now, let’s move on to understand what a Variable in JavaScript is.

What is a Variable in JavaScript?

A Variable is a name given to an entity that is then used to refer to it throughout the length of a JavaScript code. These Variables follow a set of rules, which if ignored, can throw errors in the program.

  • In a Variable, data can be stored either permanently or temporarily.
  • Variables can be used just like we use databases to store data either temporarily or permanently.
  •  Variables can be used to rewrite data inside a single variable.
  • Variables can be used to perform simple to complex mathematical and logical calculations and the result can be stored inside the variable as long as the user demands.
  • Variables are much faster to store data and can be used to retrieve data faster than any other storage such as a disk or magnetic tape that saves data in a computer’s memory.
  • Variables in JavaScript have a limited lifetime.
  • The data in the variable are lost once the user closes or refreshes the page unless the data is manually saved by the user somewhere.

Now further we will learn how to create Variables in JavaScript.

How to create Variables?

Creating Variables is a prerequisite before we actually begin using them on a page. We can declare the Variables which come into existence in the computer’s memory.

Keyword to declare a Variable: var

Upon using the keyword var, it instructs the computer to allot some memory space for the data that is to be stored in a variable later.

Example:

var TestVariable;

  • Here, var is the keyword used before declaring a variable in JavaScript.
  • A semicolon ; is added at the end to mark the end of a statement in JavaScript.
  • Once the variable is declared, it is available to store any type of data inside it.

In JavaScript, variables are loosely declared, which means that they can hold any type of data. Declaring the data type is not needed, unlike many other strong typed languages that required declaring of both variable and the data type. It is the reason JavaScript is a weakly typed language. It provides the scope of declaring a variable that can hold any type of data inside it.

How to assign values to Variables?

Now that we have declared the Variable. We can assign values to it.

Data can be assigned to the declared Variables by using an equal sign =.

We can move forward with the previous example to understand the assigning of value to the variable.

Example:

var TestVariable = 1001;

  • Here, var is the keyword used before declaring a variable in JavaScript.
  • TestVariable is the name of the variable.
  • An equal sign = is used to assign the value 1001 to the variable.
  • A semicolon ; is added at the end to mark the end of a statement in JavaScript.

The equal sign = that is used to assign values to the variables is called the assignment operator.

Now further we will declare the variables and understand their use in a code snippet.

How to declare and access Variables?

We will do an example and then analyze how we can declare variables storing some sort of values into it. We will also learn to access these values in the live running of the page.

Code:

<html>
<head>
<title>Variable Examples</title>

<script type="text/javascript">

var TestVariable;

TestVariable = "WELCOME TO CODEDEC";

document.write(TestVariable+"<br>");

TestVariable = 1001;

document.write(TestVariable);

</script>
</head>
<body>
</body>
</html>

Output:

WELCOME TO CODEDEC
1001
  • Here, we first declared the variable TestVariable using the keyword var.
  • Then, we assigned a String and a number using the assignment operator =.
  • We stored a string value in the variable and then we stored a numerical value.
  • Then we accessed the values inside the variable and using the document.write() method, the message is displayed.

Assigning values of Variable to another Variable

One of many additional features in JavaScript is that it allows us to assign values of a variable to another variable.

We will again understand this using the previous example.

Code:

<html>
<head>
<title>Variable Examples</title>

<script type="text/javascript">

var TestVariable1;

var TestVariable2 = "WELCOME TO CODEDEC";

TestVariable1 = TestVariable2;

document.write(TestVariable1);

</script>
</head>
<body>
</body>
</html>

Output:

WELCOME TO CODEDEC
  • Here, two variables are declared i.e. TestVariable1 and TestVariable2.
  • Then Variable TestVariable2 is assigned a string value while declaring it.
  • Then TestVariable2 is assigned to TestVariable1, which means the value in TestVariable2 is now assigned to TestVariable1.
  • Then we accessed the value inside the TestVariable1 and using the document.write() method, the message is displayed.
  • We can see that the string assigned to TestVariable2 is displayed which proves that the values of a variable can be assigned and accessed using another variable.

The use of Variables in JavaScript and how they behave in a code is very diverse such as it can be used for numerical calculations, increment/decrement operations, and basic string manipulations. We will discuss all of these aspects of using a Variable in JavaScript as we progress into the tutorial.

In the next section of the tutorial, we will discuss the Data Types in JavaScript and its uses which is important to define the type of value that is to be assigned in a variable.