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

Reposition picture "overlays" additional HTML components

Which is better for scrolling in Angular 2+: using HostListener or window.pageYOffset?

What is the best way to utilize this resulting value as an input?

Interfacing Highcharts with Angular for seamless data binding across series

"Integrating `react-textarea-code-editor` with Remix: A Step-by-Step Guide

Utilizing the splice method across multiple instances of a string

Wordpress is having issues running jQuery

Add United States as an additional attribute to the countries retrieved from the API

What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Regularly updating a book's interactive pages with turn.js technology

There seems to be a complete absence of rendering in this particular vue

Why is the Angular directive '=&' value binding to the scope showing as undefined?

Incorporate ng-model to manage dynamically generated HTML elements

Could you explain the purpose of the app.use(cors()) function call?

Making a XMLHttpRequest/ajax request to set the Content-Type header

Trouble Navigating the DOM

Jquery is not displaying the background color of the progress bar

What is the optimal value for the variable x in this scenario?

Error encountered while compiling a method within a .vue component due to a syntax issue

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file