The variable is one of the most fundamental concepts in any programming language. The first step towards becoming proficient in JavaScript is having a good understanding of variables.
Variables can be a little confusing, especially to newbie programmers. Even people who are familiar with variables from other programming languages may find JavaScript’s take a little strange. The good news is that JavaScript variables are actually easy to understand.
This tutorial is going to help you achieve just that. We shall start from the basics, and progress to the trickier parts.
Let’s start from the very beginning:
A variable is a way to store information so that you can later use it. What does this mean? To answer this question, let us use an illustration:
Consider the following JavaScript statement:
alert ('Hi Alex, Pleased to meet you');
This will of course pop an alert box with the phrase ‘Hi Alex, Pleased to meet you’. Now, this can be wonderful if Alex visits the page. But what if someone else visited the web page? You wouldn’t want to offend them by calling them Alex, would you?
You can make things simpler by asking for the visitor’s first name, and then offering them a customized greeting. The JavaScript prompt() function can easily give you the name. The statement,
prompt('What is your first name?');
will easily get you the name. But that throws you in a dilemma; how do you store the visitor’s name? The answer is simple, using a variable. Let us call the variable “first_name”. We can store the visitor’s name as follows
var first_name = prompt('What is your first name?');
Don’t mind if you don’t understand the “var first_name =” part of the above statement. You’ll understand it shortly. The point here is that we are storing the visitor’s name in a variable called “first_name”. So, now that we have the name, we can give them a customized greeting:
alert ('Hi ' + first_name + ', Pleased to meet you');
This now gives a customized greeting. You can try it by clicking the button labeled “Check It Out” below. You can try it several times with different names.
Now that you’ve seen a variable in action, let’s go back to our definition:
In our example, the information was the name of the visitor. When we wanted to store it, did so in a variable.
var first_name = prompt('What is your first name');
And how did we use the information? Well, we added it to the text in the alert box:
alert ('Hi ' + first_name + ', Pleased to meet you');
We could have used it in other ways. For example, we could have displayed it alone in an alert box
alert(first_name);
Or written it to the page:
document.write(first_name);
The bottom line is that a variable provides a way to store information. Once you have stored the info, you can use in any way you want. You will see more examples of how to use variables as this tutorials progresses.
Anyhow, since you now know what a variable is used for, let us proceed to how to create variables:
Before you can use a variable, you have to create it. In programming-speak, creating a variable is called “declaring a variable”. In JavaScript, you create a variable using a two step process.
Let’s look at each of these steps in detail
Before you can create a variable, you have to make up a name for it. In our example, we came up with “first_name”. But we could have given anything else like “_name”, “mammoth”, “x” or even something nonsensical like “zxsye”.
Basically, you can call your variable whatever you like – as long as you can remember it. However, it is often advisable to give a name which is easily recognizable. A simple rule of thumb is to use a name which is descriptive of what you intend to store in the variable. We called ours “first_name” which is descriptive enough. Another option could have been “firstName”.
We’ll return to the issue of names later. For now, just know that before you can create a variable, you need to find a name for it.
Once you have a name, you need to make it a variable. In JavaScript, you do this by placing the keyword “var” to the left of the name as follows:
var first_name;
The “var” keyword is used to create a variable (or declare a variable). As long as you place “var” to the left of any word, that word automatically becomes a variable. For instance,
var summer;
creates a variable called “summer”,
var interest;
creates a variable called “interest” and so on.
However, a variable name can’t be any arbitrary word or sequence of characters. JavaScript provides a set of rules for creating variable names. For a variable name to be valid, it should conform to these rules.
If the name you select isn’t valid, there will be a JavaScript error, and your script will not run.
Plus, future keywords like class, const, enum
etc also can’t be used as variable names.
For example, ʘʘ
is a valid Javascript variable name!