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.
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.
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.
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.
- The name of a variable is also known as its identifier.
- 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).
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).
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.
- 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.
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 semicolon `;` is used at the end of variable declaration but its optional.
Note: you’ll see these reserved keywords in the next section.