How scoping works in JavaScript

“Scope” refers to the current context of execution in which code can see or “see” values ​​and expressions. Variables, objects, and functions in different parts of your code can be accessed based on scope.

In JavaScript, variables, objects, and functions can have global scope, module scope, block scope, or function scope.

JavaScript global scope

Values ​​declared outside a function or block within a script have global scope and are accessible from other script files within the program.

For example, declaring a global variable in one file looks like this:

 
let globalVariable = "some value"
 

Means that other scripts in the program can access it.

 
console.log(globalVariable) 
 

Declaring JavaScript variables in the global scope is a bad practice as it can lead to namespace pollution. The global namespace is the Javascript top space that contains variables, objects, and functions. In your browser, window Objects, NodeJS uses objects named global.

Polluting the global namespace can lead to naming conflicts. This is a situation where code tries to use the same variable name for different things in the same namespace. Name conflicts are common in large projects with multiple third-party libraries.

module scope

A module is a standalone file that encapsulates and exports a piece of code for use by other modules in your project. This allows you to organize and maintain your codebase more efficiently.

ES Modules formalized the JavaScript module pattern in JavaScript in 2015.

Variables declared in a module are scoped to that module. This means that no other part of your program can access the variable.

Variables declared in a module are export keyword. Then you can import that name into another module. import keyword.

Here is an example showing class exports:

 
export class Foo {
    constructor(property_1, property_2) {
        this.property_1 = property_1
        this.property_2 = property_2
    }
}
 

And here’s how to import that module and use the exported properties:

 
import { Foo } from './index.js'
 
const bar = new Foo('foo', 'bar')
 
console.log(bar.property_1) 
 

By default in JavaScript, files are not declared as modules.

In client-side JavaScript, scripts can be declared as modules. type attribute module Above screenplay Tag:

 <script type="module" src="index.js"></script>
 

NodeJS allows you to declare your scripts as modules. type to properties module your package.json File:

 {
   "type": "module"
} 

block scope

A JavaScript block is where a pair of curly braces begins and ends.

Variables declared inside a block using let meand constant Keywords are scoped to that block. That is, it cannot be accessed from outside that block. This scope does not apply to variables declared using variable keyword:

 { 
    const one = '1'
    let two = '2'
    var three = '3'
} 
 
console.log(one) 
 
console.log(three) 
 

Variables enclosed in the above blocks and declared as const or let can only be accessed within the block. However, you can access variables declared using variable Keyword outside the block.

Functional range

Variables declared within a function are commonly called local variables and are scoped to the function. You cannot access them outside the function.This scope applies to variables declared in variable, let meand constant keyword.

Variables declared in a function are local to the function, so you can reuse the name of the variable. Reusing function-scope variable names is called variable shadowing, and the outer variable is said to be “shadowed”.

for example:

 function multiply() {
    let one = 1
    var two = 2
    const three = 3
 
    return one * two * three
}
 
const three = 'three' 
 

Understanding scoping rules is essential

Knowing the scopes available in your JavaScript can help you avoid errors. Attempting to access variables that are not available in a particular scope causes bugs.

Understanding scope also includes concepts such as global namespace pollution. This makes your code prone to bugs.