JavaScript #8 — Mastering Variables

These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.

You are going to learn all the ways to define variables.

All the code examples in this article need to be put into <script></script> tag in order to be executable, as we did in previous articles. For conciseness, some code samples omit the script tag.

Define a variable and assign a value later on

You have learned that you don’t have to define variables immediately in the previous article. Let’s remind that a variable can define and used later.

let numberA
numberA = 100

Define a variable and assign a value on a single row

It is possible to define a variable and assign it a value immediately. To assign a value immediately, you need to do it on a single row.

let numberA = 100

The general rule and preferred way are to define a variable together with a value on a single row. It is preferred because it makes code more readable and concise.

Define multiple variables using a single let keyword

It is possible to define multiple variables using single let keyword.

let a = 0, b = 1, c = 2, d = 3, e = 4

It is mentioned here only for completeness. It is not something you should be doing because it makes code less readable.

3 ways to declare a variable

So far, we have been declaring variables using the let keyword. But JavaScript has three kinds of variable declarations.

1. var— Declares a global-scoped variable that does not have to be initialized immediately and can be changed at any time. var is almost rarely in the real world and it is mentioned here for completeness. It is also possible to omit var keyword, which will create the same kind of variable as to when using var keyword.
2. let — Declares a block-scoped (a.k.a local scope) variable that does not have to be initialized immediately and can be changed at any time.
3. const — Declares a block-scoped (a.k.a local scope) variable that has to be defined immediately (on the same row) and cannot be changed. It is used for read-only variables that are called constants.

Open VS Code, create a new file and try to execute the following blocks of code.

Changing a variable defined with var is allowed.

<script>
  var name = "Jimmy"
  name = "John"
  console.log(name)
</script>

Changing a variable defined with let variable is allowed.

<script>
  let name = "Jimmy"
  name = "John"
  console.log(name)
</script>

Changing const variable is not allowed and JavaScript is going to fail to execute the code if the code attempts to change const variable. If const is used, it should not be called a variable but a constant instead.

<script>
  const name = "Jimmy"
  console.log(name)
  name = "John"
  console.log(name)
</script>

Here is the screenshot showing that the row with name = “John" fails, because the variable name is defined by const keyword.

Scopes

It is important to understand where JavaScript stores the variables we define. JavaScript has two scopes to store the variables: global and local. var tells JavaScript to store the variable in the global scope. let and const tell JavaScript to store the variable into the local scope. If something is in the global scope, it is accessible everywhere in the code. If something is in the local scope, it is only accessible in the block code where the variable is defined.

Let’s define few variables in one block of code and see if they are visible outside of the another block of code. The easiest way to define a block of code is to use {}. This is how an empty block of code looks like.

<script>
  {
  }
</script>

We are going to use this block of code to demonstrate the difference between var, let and const. Now, let’s define four variables using all the possible ways to define a variable.

<script>
  {
    var globalVariable = "everyone can see me"
    globalVariableLikeUsingVar = "everyone can see me"
    let localVariable = "only code inside {} can see me"
    const localConstant = "only code inside {} can see me"
    console.log(globalVariable)
    console.log(globalVariableLikeUsingVar)
    console.log(localVariable)
    console.log(localConstant)
  }
  {
    console.log(globalVariable)
    console.log(globalVariableLikeUsingVar)
    console.log(localVariable)
    console.log(localConstant)
  }
</script>

When the code is executed, it first runs the first block of the code that defines 4 variables:

{
  var globalVariable = "everyone can see me"
  globalVariableLikeUsingVar = "everyone can see me"
  let localVariable = "only code inside {} can see me"
  const localConstant = "only code inside {} can see me"
  console.log(globalVariable)
  console.log(globalVariableLikeUsingVar)
  console.log(localVariable)
  console.log(localConstant)
}

Then the second block is executed. The second block tries to access all the variables defined in the previous block of code.

{
  console.log(globalVariable)
  console.log(globalVariableLikeUsingVar)
  console.log(localVariable)
  console.log(localConstant)
}

The second block succeeds in printing out all the global variables but fails when we try to reference the local variables defined in the first block.

Global vs Local scopes

let and const were added to make JavaScript more error-prone. The motivation to add let and const is that var variables are defined as global variables that everyone can access, both intentionally and unintentionally. Defining var variables can lead to unpredicted behavior. Imagine somebody creates var name = "ABC" and then you use a name and forget to define it. JavaScript would try to find the name variable in the local scope but since you didn’t define it, it would pick the value from the global scope that you have no control over.

Using var was the only way to define variables in JavaScript before the year 2015.

Final words

Make sure you have a good understanding of all the examples discussed in this article. Feel free to do the coding exercises few times and try to play with them — change values, run the code and observe the changes.

Next Step

JavaScript #9 — Variable Types