Defining Variables in JavaScript

In JavaScript, developers can make variable declarations in three different ways. Each has diferent implications for the program they are writing, which can cause some confusion.

Variable declaration can be accomplished by using var, let, or by simply assigning a value with no declaration keyword (e.g., x = 5).

Understanding the differences between x = 5, var x = 5, and let x = 5 is crucial for writing clean, bug-free code.

Global Variables (No Variable Declaration)

When you assign a value to a variable without declaring it using var, let, or const, JavaScript implicitly creates a global variable. This means that the variable becomes a property of the global window object (in browsers) or the global object in other environments like Node.js.

The variable can only be seen once it has been declared, as you see in the example below:

function foo() {
    x = 5; // Implicitly creates a global variable
}

foo();
console.log(x); // Outputs: 5

However, with a minor change, you will get an error:

function foo() {
    x = 5; // Implicitly creates a global variable
}

console.log(x); // Outputs: Reference Error x is not defined.
foo();

You can use "use strict"; which will limit your ability to use global variables.

// With 'use strict'
'use strict';
function foo() {
        x = 5; // Throws ReferenceError: x is not defined
}

foo();

As with any programming language, it is best to avoid global variables to reduce unwanted consequences. Therefore use 'use strict'; as well as let, var, and even const to declare variables.

Fully Scoped Variables (var keyword)

The var keyword declares a variable that is function-scoped or globally scoped if declared outside a function. Variables declared with var are hoisted to the top of their scope and initialized with undefined.

function exampleVar() {
    console.log(a); // Outputs: undefined (due to hoisting)
    var a = 5;
    console.log(a); // Outputs: 5

    if (true) {
        var a = 10; // Same 'a' as above
        console.log(a); // Outputs: 10
    }

    console.log(a); // Outputs: 10
}

exampleVar();

Because of hoisting, you don’t even have to have the variable defined in the same block of code for it to be visible. People often refer to this as function scope, i.e. it can be seen anywhere in the function it is declared in.

function exampleVar() {
    console.log(a); // Outputs: undefined (due to hoisting)

    if (true) {
        var a = 10; // Same 'a' as above
        console.log(a); // Outputs: 10
    }

    console.log(a); // Outputs: 10
}

exampleVar();

Because of hoisting, var is not the preferred method anymore. However, for many years it was the only way to “Declare” a variable, and thus is found in a lot of existing code, and still used out of habit by many developers.

Block Level Scope (let keyword)

Introduced in ES6 (ECMAScript 2015), the let keyword declares a variable that is block-scoped. This means the variable is only accessible within the nearest enclosing {} block.

Consider the previous code block, but instead of using var, we use let.

function exampleVar() {
    console.log(a); // ReferenceError: can't access lexical declaration 'a' before initialization
    // won't let us go any further
    let a = 5;
    console.log(a); // Outputs: 5

    if (true) {
        let a = 10; // Different than the 'a' above
        console.log(a); // Outputs: 10 ... if it got here
    }

    console.log(a); // Outputs: 5 ... if it got here
}

exampleVar();

If we simply remove the first line, it will allow us to progress. But see how the values change.

function exampleVar() {
    let  a = 5;
    console.log(a); // Outputs: 5

    if (true) {
        let a = 10; // Different than the 'a' above
        console.log(a); // Outputs: 10
    }

    console.log(a); // Outputs: 5
}

exampleVar();

Constants (const keyword)

Constants must be declared before they are used, much like let.

function exampleVar() {
    console.log(a); // ReferenceError: can't access lexical declaration 'a' before initialization
    // won't let us go any further
    const a = 5;
    console.log(a);
}

exampleVar();

Defining Variables in JavaScript was originally found on Access 2 Learn