JavaScript/Variables

Purpose

Computer languages need to use variables. Why this? In most cases, programs don't solve single problems like the very concrete question: What is the circumference of a circle with a radius of 5 cm? Such a concrete question can be solved without using variables: alert (2 * 5 * 3.14); Instead, most questions are more general: What is the circumference of a circle with an arbitrary radius? You don't want to write a program for a radius of 5 cm, another program for a radius of 6 cm, another one for a radius of 7 cm, and so on. You want to write a single program that computes the circumference for all possible radii. The program needs input (from a user, from another program, from a database, ...) that tells him for which value it shall run. let r = prompt("How big is the radius of your circle?"); alert (2 * r * 3.14);, or even better: let r = prompt("How big is the radius of your circle?"); alert (2 * r * Math.PI);.

Those two examples are flexible. They ask the user for the desired radius, store the given value in a variable with the name r, and compute the circumference using this variable. The variable r is introduced by the keyword let. And there is a second variable. The module Math has predefined a variable PI with the keyword const: const PI = 3.141592653589793;.

In JavaScript, variables can be used similarly to variables in mathematical formulas. During runtime, the values of variables are stored in the main memory of the computer (RAM), from where they can be used at a later moment in the lifetime of the program. You can imagine a variable as a small box where you deposit some value and take it out whenever you need it.

Variables are a cornerstone in the transition from individual problem solving to a strategy, respectively an algorithm.

Declaration and initialization

If you want to use a variable, we recommend declaring them explicitly. This is not mandatory but has strong benefits.

In many cases, the declaration is accompanied by an initialization, e.g. let x = 0;. The declaration is let x;, and the initialization is x = 0;. But it's also possible to omit the initialization part: let x; which causes the value of the variable to be undefined.

Keyword let

The keyword let introduces a variable whose value may be changed multiple times.

let x = 0;
// ...
x = x + 5;
// ...
x = -4;
// ...

Keyword const

The keyword const introduces a variable that must be initialized immediately. Moreover, this very first value can never be changed. That helps the JavaScript engine to optimize the code for better performance. Use const as often as possible.

const maxCapacity = 100;
// ...
maxCapacity = maxCapacity + 10; // not possible
let maxCapacity = 110;          // not possible

When you work with objects, e.g., with arrays, in combination with the keyword const, it's the same: you cannot assign another value (object, array, number, or whatever) to the variable. Nevertheless, its elements can be changed.

const arr = [1, 2, 3];
arr = [1, 2, 3, 4];     // not possible
arr = new Array(10);    // not possible

arr[0] = 5;             // ok:  5, 2, 3
alert(arr);

arr.push(42);           // ok:  5, 2, 3, 42
alert(arr);

In some cases const variables are written in uppercase, e.g., PI. This is a convention and not mandatory.

Keyword var

At first glance, var is identical to let. But the range where such variables are known is different from the variables declared by var; see chapter Scope below.

Omitting the declaration

You can assign a value to a variable without declaring the variable previously. "JavaScript used to allow assigning to undeclared variables, which creates an undeclared global variable. This is an error in strict mode and should be avoided altogether." In other words: The variable goes to global scope, see below. As long as you don't have good reasons you should avoid using the global scope because its usage tends to create unwanted side effects.

// direct usage of 'radius' without any keyword for its declaration
/* 1 */ radius = 5;
/* 2 */ alert (2 * radius * 3.14);

Sometimes such situations occur by accident. If there is a typing error in the source code, JavaScript uses two different variables: the original one and a new one with the wrongly typed name - even if you use one of the keywords let, const, or var.

let radius = 5;  // or without 'let'
alert("Test 1");
// ... later in the code
radus = 1; // typo will not be detected
alert("Test 2");

You can instruct JavaScript to search for such typos by inserting the command "use strict"; as the first line of your scripts.

"use strict";
let radius = 5;
alert("Test 1");
// ... later in the code
radus = 1;       // typo will be detected and an error message given
alert("Test 2"); // will never execute

Data types

Programmers who are familiar with (strict) typed languages like Java may miss in the above chapter the possibility of defining the type of variables. JavaScript knows many different data types. But their handling and behavior is very different from that in Java. In the next chapter you will learn about that.

Scope

A scope is a range of consecutive JavaScript statements with a clearly defined start and end. JavaScript knows four types of scopes: block, function, module, and global scope. Depending on the kind of declaration and the location of the declaration, variables are within such scopes. They are 'visible' respectively 'accessible' only within their scope. If you try to access them from outside, an error will occur.

Block scope

A pair of curly brackets {} creates a block. Variables declared within a block by let or const are bound to this block and cannot be accessed outside.

"use strict";
let a = 0;
// ...
if (a == 0) {
  let x = 5;
  alert(x);   // shows the number 5
} else {
  alert(x);   // ReferenceError (with a different 'a')
}
alert(x);     // ReferenceError

The variable x is declared inside a block (in this simple example, the block consists of only two lines.) It is not accessible behind the end of the block, which is the closing curly bracket } in the else line. The same applies to the case that the variable x is declared with const instead of let.

Be careful with the keyword var; its semantics is different! First, var is not block-scoped. Second, it leads to a technique called hoisting, which has been used in JavaScript since its first days. Hoisting changes the semantics of different declarations 'under the hood'. Concerning var, it splits declaration and initialization into two separate statements and shifts the declaration part to the top of the current scope. Hence the variable is declared but not initialized if you use it before the line where it is declared in the source.

The script

"use strict";
alert(x);   // undefined, not ReferenceError !
x = 1;      // correct, despite of "use strict"
alert(x);   // shows 1
var x = 0;

is changed to:

"use strict";
var x;
alert(x);   // undefined, not ReferenceError !
x = 1;      
alert(x);   // shows 1
x = 0;

On the other hand, the keyword let keeps the declaration in the line where it is written.

"use strict";
alert(x);     // ReferenceError
x = 1;        // ReferenceError
alert(x);     // ReferenceError
let x = 0;

There are more differences. Here is a version of the first example of this chapter replacing let by var:

"use strict";
let a = 0;
// ...
if (a == 0) {
  var x = 5;  // 'var' instead of 'let'
  alert(x);   // shows the number 5
} else {
  alert(x);   // ReferenceError (with a different 'a')
}
alert(x);     // shows the number 5  !!

We recommend avoiding var completely because of two reasons:

• JavaScript's hoisting technique is not easy to understand.
• Other members of the C-family languages don't know it.

Instead of using var, use the keyword let.

Function scope

A function creates its own scope. Variables declared in the function's scope cannot be accessed from outside.

"use strict";
function func_1() {
  let x = 5; // x can only be used in func_1
  alert("Inside function: " + x);
}
func_1();
alert(x); // Causes an error

The function scope is sometimes called the local scope because this was the name in older ECMAScript versions.

See also: Closures works the other way round - access of outer variables inside the function.

Module scope

It is possible to divide huge scripts into multiple files and let the functions and variables communicate with each other. Each file creates its own scope, the module scope. The chapter JavaScript/Modules explains more about that.

Global scope

Variables or functions are in global scope if they are declared at the top level of a script (outside of all blocks and functions).

"use strict";
let x = 42;   // 'x' belongs to global scope

// define a function
function func_1() {
  // use variable of the global context
  alert("In function: " + x);
}

// start the function
func_1();   // shows "In function: 42"
alert(x);   // shows "42"

x is declared at the top level, hence it is in the global scope and can be used everywhere. But in the next example the declaration of x is wrapped by { }. Hence it is no longer in global scope.

"use strict";
{
  let x = 42;   // 'x' is not in global scope
}
alert(x);       // ReferenceError

Hint: The use of the global scope isn't considered good practice. It tends to create unwanted side effects. Instead, try to modularize your code and let the parts communicate via interfaces.

Exercises

... are available on another page (click here).

See also

• Closures