Scoping in JavaScript

Scope in JavaScript determines the accessibility (visibility) of variables from different parts of the code.

Global Scope:

Variables declared at the top of a program or outside of any function or block are considered to be global variables:

  var globalVariable = 'Hello, global scope!';

  function foo() {
    console.log(globalVariable);
  }
  foo(); // Output: Hello, global scope!

Variables declared without var, let and const keywords are considered to be automatically global. The following code example will declare a global variable carName, even if the value is assigned inside a function.
```
  myFunction();
  // code here can use carName

  function myFunction() {
    carName = "Volvo";
  }
```

NOTE: In "Strict Mode", undeclared variables are not automatically global.

Variables in the global scope can be accessed and changed from anywhere in the code, including inside the function or block:

  function incrementGlobal() {
    globalCounter++;
  }
  var globalCounter = 0;
  incrementGlobal();
  console.log(globalCounter); // Output: 1

Variables declared with var, let and const are quite similar when declared outside a block. They all have Global Scope:

  const constVar = "const";

  function global() {
      console.log(`Variables declared outside a block with 
      ${varVar}, ${letVar} and ${constVar} have global scope!`); // 
  }
  var varVar = "var";
  let letVar = "let";

  global(); 
  // Variables declared outside a block with var, let and const have global scope!

Global variables exist during the whole program;

NOTE: It's generally recommended to avoid using global variables because the value of a global variable can change in different areas in the program. It can introduce unknown results in the program. Instead, encapsulate data within local scopes whenever possible.

Local Scope:

Variables declared inside a function or block have local scope;
Local variables are accessible only within the function or block in which they are defined;
Local variables have a limited lifetime that exists as long as the function or block is executing.

Function Scope:

Variables declared inside the function have function scope meaning that they can only be accessible inside the function and can not be accessed by other functions. Therefore, variables with the same name can be used in different functions.
Each function creates a new scope.
When a function starts, local variables will be created and deleted when the function ends;

Variables declared with var, let and const are quite similar when declared inside a function. They all have Function Scope:

  function myFunction() {
      var carName = "Volvo";   // Function Scope
  }
  console.log(carName); //ReferenceError: carName is not defined

  function myFunction() {
      let color = "red";   // Function Scope
  }
  console.log(color); //ReferenceError: color is not defined

  function myFunction() {
      const name = "Alice";   // Function Scope
  }
  console.log(name); //ReferenceError: name is not defined

Block Scope:

Variables declared inside curly braces { } with let and const keywords have a block scope and cannot be accessed from outside the block. For example:

  {
      let x = 2;
  }
  console.log(x); //ReferenceError: x is not defined

  {
      const y = 2;
  }
  console.log(y); //ReferenceError: y is not defined

Variables declared with the var keyword does NOT have a block scope and can be accessed from outside the block:
```
  { 
      var z = 2; 
  } 
  console.log(z); // 2
```

References

1. JavaScript Scope w3school

2. JavaScript Variable Scope

3. Scope MDN

Scoping in JavaScript

JavaScript

New ES6 string methods

More from this blog

How to view the commit history in Git

How to Install Ubuntu Server 24.04

Understanding /etc/passwd/ and /etc/shadow/ files in Linux

Understanding Symbolic Links and Hard Links in Linux

Setting the Hostname of Linux Workstation or Server

Global Scope:

Local Scope:

Function Scope:

Block Scope:

References

Command Palette

JavaScript

New ES6 string methods

More from this blog

Global Scope:

Local Scope:

Function Scope:

Block Scope:

References