In this section, we will learn what the variables are and how to use them in JavaScript.
What Is a Variable in JavaScript? (Definition of Variables)
Programs are usually developed to work on data. Essentially, they take data (input), process them and send the result to the outputs, like monitor, printer, or other external devices.
When a program takes data, it needs to at least temporarily store that data in the memory. Storing data in the memory allows programs to access and reuse them whenever they need to.
The memory itself is compartmentalized, and each compartment has an address (the address is basically a number). When we store a data in the memory, depending on how big that data is, it might take multiple compartments of the memory. Now, as mentioned before, a program stores data in the memory because it might need the data in the future work of the program. This means the program needs to know the address of the place in which the data is stored.
In JavaScript, `variables` are designed to represent a portion of the memory space and they can be used to store and retrieve values in the memory.
You can think of variables as the representation of a memory space or a door to part of a memory.
Basically, variables give us the access to the memory in order to store or retrieve a value in there.
Variable Declaration
The process of creating a variable in JavaScript is known as variable declaration.
Before we get into the nitty-gritty details of `variables` let’s see a variable in practice:
var age;//declaration of the age variable age = 20;
The name `age` here is representing a variable that essentially is linked to a memory space and currently the value `20` is stored in that memory location.
Here, in the first statement, we have created a variable named `age`. So we can say the age variable is declared in this statement.
In the second statement is the initialization that occurred. Initialization is the process of assigning a value to a variable for the first time. Be aware that if you assign a value to the same variable for the second time, it is no-longer known as initialization.
As mentioned before, in JavaScript, when we create a variable, a portion of the memory will be set aside for that variable. And the name of the variable is our way of accessing to that memory space.
For example, here after we’ve declared the variable `age`, the execution engine sets aside a portion of the memory and linked it to the `age` variable.
At the next statement, we’ve called the `age` variable and via the assignment `=` operator we’ve stored the value 20 in that memory location.
Note:
- The name of a variable is also known as its identifier.
- In JavaScript there’s a concept called `Scope`. You’ll learn more about it in later sections, but in short, in each scope, an identifier should be unique. This means we can’t have two identifiers with the same name in the same scope. One of them will be ignored automatically.
- The assignment `=` operator is explained in a later section. In short, when the name of a variable is set on the left side of this operator, it acts as the receiver and stores the value on the right side of this operator in its memory space. Any other places in the program that we use the name of a variable it will act as the giver. This means if we call the variable in other situations, we will get the value that is stored in the memory location of that variable.
- Also, if there wasn’t any value in the target variable, we will get the value `undefined` as the return value. More about this in the undefined section.
Now, to access the value 20, all we need to do is to use the name of the variable in which the value is stored in (the variable `age` in this case).
Var in JavaScript
The use of `var` keyword is explained in the var keyword section, but in short, we use this keyword before the name of a variable. When the execution engine sees such statement, it knows that we want a new variable to be created (a new memory space be set aside and be linked to the variable).
Using the keyword `var` is basically a way of telling JavaScript that we want to create a new variable.
In short, there are three ways in which we can create (declare) a variable in JavaScript:
In the next couple of sections, you’ll see how each of these keywords can be used to create a variable in JavaScript.
Example: declaring a variable in JavaScript
var age;
age = 20;
document.getElementById("link").innerText = age;
Notes: the process of creating a variable is called `declaration` and when we assign a value to that variable for the first time, it is called `initialization`.
In the example above, we first declared the variable `age`. After that, we’ve assigned the value `20` to that variable and so now this value is stored in the memory location that is linked to the `age` variable.
In the next statement, we called the `age` variable on the right side of the assignment `=` operator and so a copy of the value `20` will be returned.
The ` document.getElementById(“link”).innerText` is basically a way of accessing an element of the webpage that has a specific id (`link` in this case) and changing its content. So here since the `<p>` element has the id attribute with the value `link`, we’ve changed its content with the value that is stored in the `age` variable, which is 20.
Notes:
- The `document`, `getElementById()` and the `innerText` are covered in the DOM section of this tutorial, so don’t worry if they don’t click right away.
- When calling a variable to get a value from it, it will return a copy of the value. This means we can call the variable any number of times and the value won’t get cut. Basically, as long as we don’t replace the content of a variable with a new one, it will stay in that variable.
JavaScript Variable Names: Naming Conventions
There are some rules that we need to follow when want to set a name for a variable:
- The name that we use for a variable can contain letters, numbers and underscores (_). For example: jack, ellen2020, _black, sunnySeason, etc.
- A name for a variable can begin with either underscore or letter. For example: _sum, check_point etc.
- The name of a variable cannot start with a number.
- We can’t use white space and special characters like !@# %^&*()+ etc. in variable’s name. For example, these names are illegal: ell en, %%jack, Tony&&, pre-process.
- The JavaScript language is case sensitive, which means a variable named `ellen` is different from a variable named `Ellen` or `ELLEN`.
- The semicolon `;` is used at the end of variable declaration but its optional.
- We can’t use JavaScript language reserved keywords as the name of a variable.
Note: you’ll see these reserved keywords in the next section.
