Is it possible to utilize the "let" keyword in JavaScript as a way to prevent global-scope variables?

Question

Is it possible to utilize the "let" keyword in JavaScript as a way to prevent global-scope variables?

While working on a JavaScript test, I came across an interesting observation related to the let keyword. Take a look at this code snippet:

let variable = "I am a variable";
console.log(window.variable);

Surprisingly, when I tried to access the variable property from the window object, it was not there. Does this imply that variables declared using let don't exist in the global scope?

Is it possible to declare variables without having to enclose them within a function or an IIFE (Immediately-Invoked Function Expression)?

I attempted to find answers to these questions online, but no luck so far. The common advice is to use functions like {}() or work with a distinct global variable containing the code. However, my recent discovery has left me wondering if it can be utilized as an alternative to avoid such approaches.

javascript scope ecmascript-6

Answer 1

Answer №1

The use of the let statement does not completely eliminate global variables as you may think. Although a top-level let statement creates variables in the global scope, they are not stored as properties of the "global object" (usually window).

<script>
  'use strict';
  let fromLet = 'from let';
  var fromVar = 'from var';
</script>

<script>
  console.log(fromLet);        // 'from let'
  console.log(fromVar);        // 'from var'
  console.log(window.fromLet); // undefined
  console.log(window.fromVar); // 'from var'
</script>

This behavior is primarily explained in Section 8.1.1.4: Global Environment Records of the ECMAScript 6 specification. Essentially, there exists a single global namespace/scope where values can be stored in two different ways. Certain global elements like built-ins, function and var declarations, and function* (generator) declarations are saved as properties of the global object. On the other hand, things like let, const, class, and new constructs are kept in an internal "environment record" that is not accessible as an object during runtime.

If you're interested in delving deeper into this topic, here are some excerpts to guide you:

A global Environment Record represents the outermost shared scope for all ECMAScript scripts processed within a common Realm. It handles bindings for built-in globals, properties of the global object, and all top-level declarations within a script.

Properties can be directly added to a global object. Thus, the global Environment Record component containing these properties may encompass explicitly created bindings by functions, generators, or variable declarations, alongside implicit bindings created as properties of the global object. The globally maintained list identifies which bindings were explicitly created using declarations.

Table 18 — Additional Fields of Global Environment Records
[[ObjectRecord]]: Object Environment Record
The binding object is the global object, containing global built-in and declared bindings in global code within the associated Realm.
[[DeclarativeRecord]]: Declarative Environment Record
Holds bindings for all global code declarations in the associated Realm except for functions, generators, and variable declarations.
[[VarNames]]: List of String
String names bound by function, generator, and variable declarations in global code within the associated Realm.

Answer 2

The use of the let statement does not completely eliminate global variables as you may think. Although a top-level let statement creates variables in the global scope, they are not stored as properties of the "global object" (usually window).

<script>
  'use strict';
  let fromLet = 'from let';
  var fromVar = 'from var';
</script>

<script>
  console.log(fromLet);        // 'from let'
  console.log(fromVar);        // 'from var'
  console.log(window.fromLet); // undefined
  console.log(window.fromVar); // 'from var'
</script>

This behavior is primarily explained in Section 8.1.1.4: Global Environment Records of the ECMAScript 6 specification. Essentially, there exists a single global namespace/scope where values can be stored in two different ways. Certain global elements like built-ins, function and var declarations, and function* (generator) declarations are saved as properties of the global object. On the other hand, things like let, const, class, and new constructs are kept in an internal "environment record" that is not accessible as an object during runtime.

If you're interested in delving deeper into this topic, here are some excerpts to guide you:

A global Environment Record represents the outermost shared scope for all ECMAScript scripts processed within a common Realm. It handles bindings for built-in globals, properties of the global object, and all top-level declarations within a script.

Properties can be directly added to a global object. Thus, the global Environment Record component containing these properties may encompass explicitly created bindings by functions, generators, or variable declarations, alongside implicit bindings created as properties of the global object. The globally maintained list identifies which bindings were explicitly created using declarations.

Table 18 — Additional Fields of Global Environment Records
[[ObjectRecord]]: Object Environment Record
The binding object is the global object, containing global built-in and declared bindings in global code within the associated Realm.
[[DeclarativeRecord]]: Declarative Environment Record
Holds bindings for all global code declarations in the associated Realm except for functions, generators, and variable declarations.
[[VarNames]]: List of String
String names bound by function, generator, and variable declarations in global code within the associated Realm.

Is it possible to utilize the "let" keyword in JavaScript as a way to prevent global-scope variables?

Answer №1

Table 18 — Additional Fields of Global Environment Records

Similar questions

"Process the contents of a file by reading it line by line in a

Creating a javascript function to update content on click

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

What is the process for displaying the save file dialog in Safari?

How to implement the ECharts animated bar chart in Angular version 16?

Tips on revitalizing a bootstrap wizard

Encasing the Angular 2 component template in a <div> tag

Comparison between SSD and HDD animation speed in web hosting environments

Tips for Guaranteeing a Distinct Email and Username are Stored in MongoDB with Mongoose

once a value is assigned to the variable "NaN," it remains constant and does not alter

Can the conventional HTML context menu be swapped out for a link context menu instead?

WebWorker - Error in fetching data from server using Ajax call

Troubleshooting: Issues with jQuery Validate plugin's rules method in Javascript

What is the process for incorporating the 'url-regex' npm package into an Angular(2/4) project?

Juggling PHP scripts within javascript

Trigger a random tune when hovering the mouse

Different ways to automatically trigger a function in JavaScript

how to handle form submission using JavaScript's return method

Tips for setting up npm dependencies in a subfolder

Issue: Query is not re-executing after navigatingDescription: The query is