Understanding the Scope

The scope is an important concept in JavaScript. It determines the lifespan, access, and visibility of variables, functions, and objects throughout your code.

Benefits Of Scope

One advantage is that scope provides some level of security to our code. A common principle of computer security is that users should have access to the stuff they need. Scoping part of our code helps improve efficiency, helps to track bugs. Scope also solves the naming problems when we have variables with the same name but in a different scope, it also helps with code reusability which means correctly utilizing the local scope. (more reusable code with fewer potential side-effects)

Types Of Scope

There are three types of scopes.

1: Global Scope

2: Function Scope

3: Block Scope

Global Scope

When we start writing javaScript in a document, we are in the global scope. There is only one global scope throughout a JavaScript document. A variable is in a global scope if it’s defined outside of a function.

var cat = 'Hassan';

Variables inside the global scope can be accessed and altered in any other scope. Since anything you write in the global scope is accessible anywhere within your code, it is generally considered a bad practice to declare variables in the global scope in JavaScript. Using the global scope makes your code less reusable, introduces namespace collision opportunities, and makes functions more likely to be influenced accidentally by global variables.

var cat = 'Hassan';

console.log(cat); // logs 'Hassan'

function logCat() {
    console.log(cat); // 'cat' is accessible here and everywhere else
}

logCat(); // logs 'Hassan'

Local Scope

When we create a new scope within the global scope, we are basically creating a local scope. Local scope is also called function scope. Variables inside a function are in the local scope. This makes the variables having the same name can be used in different functions. This is because those variables are bound to their respective functions, each having different scopes, and are not accessible in other functions.

// Global Scope

function someFunction() {
    // Local Scope #1
    function someOtherFunction() {
        // Local Scope #2
    }
}

// Global Scope

function anotherFunction() {
    // Local Scope #3
}

// Global Scope

Block Scope

A code block in JavaScript defines a scope for variables declared using let and const. ES6 introduced let and const variables, unlike var variables, they can be scoped to the nearest pair of curly braces.

if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

The first console.log(message) correctly logs the variable because message is accessed from the scope where it is defined.

But the second console.log(message) throws a reference error because message a variable is accessed outside of its scope, the variable doesn’t exist here.

Block statements like if and switch conditions or for and while loops, unlike functions, don't create a new scope. Variables defined inside of a block statement will remain in the scope they were already in.

Resources:

JavaScript: Learn & Understand Scope

Understanding Scope in JavaScript

JavaScript Scope