Variables in JavaScript

Variable is a symbolic name for a value used by program. The value of variable can be changed during program execution.

1. Declaring variables
2. Loosely typed variables
3. Evaluating variables
4. Variable scope
5. Variable hoisting

Declaring variables

With var keyword

To declare variable use keyword var followed by the variable name:

var volume;

It is possible to declare multiple variables at the same time:

var height, weight;

The above variables are declared but not initialized. To declare and initialize variable use equality symbol (=) followed by the value of variable:

var amount = 10;
var height = 175, weight = 70;

Without var keyword

Variable can be declared without the var keyword, just by assigning it a value:

quantity = 11;

This results in declaring a global variable as property of the global object. It is not a recommended way, source of bugs and you should avoid declaring variables without the keyword var.

With let keyword

ECMAScript 2015 introduced block-scoped variables. To declare block-scope local variable use let keyword instead of var:

let size = 12;

Variable declared with the let keyword is limited in the code block, statement, or expression in which it is used.

Loosely typed variables

There is no type associated with variable in declaration statement. Variables in JavaScript are loosely typed, it means that variable can hold data of any type. It is possible to assign a variable value of one type first and then assign a value of another type.

var speed = 100;
speed = "fast";

Evaluating variables

If you declare a variable without assigned initial value its value is undefined.

var month;
alert(month); //undefined

If you try to read the value of the undeclared variable, it will generate a ReferenceError error:

alert(year); //ReferenceError

Variable scope

Variable scope is the area in which the variable is defined. There are three types of scope: global, local and block.

A variable declared outside of any function or variable declared with no using the var or the let statement is global variable and has global scope. It is available in the entire JavaScript code.

A variable declared within a function with using var keyword is local variable and has local scope. It is available only within that function. Function parameters are also local variables.

var globalVariable = "A"; // a global variable
function testScope1() {
    var localVariable = "B"; // a local variable
    document.write(globalVariable); // A
    document.write(localVariable); // B
}

document.write(globalVariable); // A
document.write(localVariable); // ReferenceError

A variable declared within a code block or statement with using the let keyword is block-scoped variable and is limited to the block in which was declared.

function testScope2() {
    if (true) {
        var localVariable = "X"
        let blockVariable = "Y";
    }
    document.writeln(localVariable); // X
    document.writeln(blockVariable); // ReferenceError
}

Local variable (also function parameters) within the body of a function take precedence over global precedence.

Variable hoisting

If a variable is global it is visible in the entire global scope, if a variable is local it is visible in the entire body of the function. It means that the variable is visible even before it is declared. In other words it is hoisted to the top of the JavaScript code (the global variable) or the function (the local variable).

var x = 1;
function testHoisting() {
    alert(x); // displays undefined
    var x = 2;
    alert(x); // displays 2
}

Within the body of function the local variable x is visible throughout it. It is not initialized until the var statement is executed, but  it is defined. Because local variable takes precedence over global variable, eventually is displayed undefined.

Block scoped variables are not hoisted to the top of the scope. Calling block-scoped variable before the var statement is executed will cause a ReferenceError.

function testHoisting2() {
    alert(y); // ReferenceError
    let y = 3;
}