Learning JavaScript the easy way: Scopes and Hoisting

Scopes and hoisting are fundamental concepts in JavaScript that play a crucial role in how variables are accessed and executed within your code. Understanding these concepts is essential for writing efficient and error-free JavaScript programs.
This guide will cover scopes and hoisting, starting from the beginner level and progressing to more advanced concepts.

Scopes

Scope in JavaScript refers to the context in which variables are declared and accessed.
This simply means that a scope in JavaScript defines the accessibility and visibility of variables.

There are two main types of scopes: global scope and local scope.

Global Scope:

Variables declared outside of any function are in the global scope and can be accessed from anywhere in the code. The variables are declared using const and let and are accessible globally, just like with var.

const globalVariable = 30;

function printGlobal() {
    console.log(globalVariable);
}

printGlobal(); // prints: 30

Local Scope:

Variables declared inside a function are in the local scope and can only be accessed within that function. It defines how variable names are resolved in nested functions.

function printLocal() {
    var localVar = 20;
    console.log(localVar); 
}

printLocal(); // prints: 20
console.log(localVar); // Throws an error - localVar is not defined

Other forms of scopes

• Block Scopes with let and const:

Introduced in ES6, let and const allow you to declare variables with block scope.

if (true) {
    let blockVar = 40;
    const blockConst = 50;
}
// console.log(blockVar); // Error: blockVar is not defined
// console.log(blockConst); // Error: blockConst is not defined

• Function Scopes and Closures:

Functions create their own scope, and inner functions can access variables from their containing (outer) function's scope. This behavior is known as a closure. We will take a deeper dive into closures in upcoming chapters

function outer() {
    var outerVar = 60;
    function inner() {
        console.log(outerVar);
    }
    return inner;
}

var closure = outer();
closure(); // Outputs: 60

• Lexical Scoping:

Lexical scoping means that a function's scope is determined by its location during author-time, and not runtime.

• IIFE (Immediately Invoked Function Expression):

An IIFE is a function that is immediately executed after being defined. It helps create a private scope for your code.

(function() {
    var privateVar = "I'm private!";
    console.log(privateVar);
})();
console.log(privateVar); // Error: privateVar is not defined

• Temporal Dead Zone (TDZ):

The TDZ is the phase in which variables are declared but not yet initialized. Accessing variables in this state results in a ReferenceError.

console.log(tempVar); // Error: Cannot access 'tempVar' before initialization

let tempVar = 80;

What is Hoisting?

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during compilation.

Variable Hoisting:

Variable declarations are hoisted, but not their assignments.

console.log(hoistedVar); // Outputs: undefined
var hoistedVar = 30;
console.log(hoistedVar); // Outputs: 30

Function Hoisting:

Function declarations are also hoisted, allowing you to call functions before they are defined.

hoistedFunction(); // Outputs: "Hello, hoisting!"
function hoistedFunction() {
    console.log("Hello, hoisting!");
}

Conclusion:

Scopes and hoisting are integral to JavaScript's behavior. Mastering these concepts empowers you to write clean, efficient, and bug-free code. Remember that understanding these concepts deeply will not only help you avoid pitfalls but also enable you to make the most of JavaScript's capabilities.

Anticipate our upcoming article where we'll explore another exciting topic in JavaScript, thereby taking your JavaScript skills to the next level.

Stay curious and keep coding!

Stay tuned for our next article!