Understanding Variable Access in JavaScript: Scope, Hoisting, and Closures

Variable access is a fundamental concept in JavaScript that determines how and where variables can be accessed and modified within your code. In JavaScript, variable access is largely governed by scope the context in which variables are declared. This blog will dive into the types of scopes, hoisting behavior, and closures, with examples to help you master variable access in JavaScript.

Types of Scopes in JavaScript
JavaScript has several types of scope, including:

Global Scope
Function Scope
Block Scope

Each scope type controls how variables are accessed in different contexts.

Global Scope
Variables declared outside of any function or block are in the global scope and are accessible from anywhere in the code.

let globalVar = "I am global";

function accessGlobal() {
  console.log(globalVar); // Output: "I am global"
}

accessGlobal();
console.log(globalVar); // Output: "I am global"

Function Scope

Variables declared within a function are only accessible inside that function. This is called function scope and is created using var, let, or const.

function functionScope() {
  let localVar = "I am local";
  console.log(localVar); // Output: "I am local"
}

functionScope();
console.log(localVar); // Error: localVar is not defined

Here, localVar is inaccessible outside functionScope due to function scoping.

Block Scope

Variables declared with let or const inside a block (e.g., if statements, loops) are confined to that block scope.

if (true) {
  let blockVar = "I am in a block";
  console.log(blockVar); // Output: "I am in a block"
}

console.log(blockVar); // Error: blockVar is not defined

In this example, blockVar is accessible only inside the if block, demonstrating block scope.

Hoisting

JavaScript hoists variable and function declarations to the top of their scope during compilation. However, only var variables are hoisted with an initial value of undefined. let and const variables are hoisted, but they aren’t initialized, so accessing them before declaration results in a ReferenceError.

Example of Hoisting with var

console.log(hoistedVar); // Output: undefined (hoisted)
var hoistedVar = "I am hoisted!";
console.log(hoistedVar); // Output: "I am hoisted!"

Example with let and const

console.log(notHoisted); // ReferenceError
let notHoisted = "I am not hoisted!";
console.log(notHoisted); // Output: "I am not hoisted!"

Here, var variables can be accessed before declaration, while let and const cannot.

Closures and Variable Access

Closures are a powerful JavaScript feature that enables a function to access variables from its outer scope, even after the outer function has finished executing.

function outerFunction() {
  let outerVar = "I'm an outer variable";

  function innerFunction() {
    console.log(outerVar); // Accesses outerVar from the outer scope
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: "I'm an outer variable"

In this example, innerFunction retains access to outerVar even after outerFunction has executed, creating a closure. Closures keep references to their outer scope variables, allowing them to be accessed later.

Conclusion

Understanding variable access in JavaScript requires familiarity with scope types, hoisting, closures, and variable shadowing. By controlling how variables are accessed within different scopes, you can write cleaner, more predictable code. With this knowledge, you can make better decisions about variable declarations and manage scope effectively in JavaScript applications.

sources
https://www.w3schools.com/js/js_variables.asp
https://developer.mozilla.org/enUS/docs/Learn/JavaScript/First_steps/Variables
https://www.geeksforgeeks.org/javascript-variables/
https://www.youtube.com/watch?v=9WIJQDvt4Us&t=176s