JavaScript variables

JavaScript

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 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:

  • Via the `var` keyword.

  • Via the `let` keyword.

  • Via the `const` keyword.

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

<!DOCTYPE html>
<html>
<head>
<title>JS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
var age;
age = 20;
document.getElementById("link").innerText = age;
</script>
</body>
</html>

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 underscore (_). 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 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 than 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.

More to Read:

JavaScript Reserved Words
JavaScript let Keyword
JavaScript var Keyword
JavaScript const Keyword