Global Scope in Browser Environment

After reading Chapter 4 of You Don’t Know JS Yet: Scope & Closures — 2nd Edition series, here is my note regarding this chapter. I hope it will quickly summarize the points.

It is the most important point that emphasizes in here that avoided using the global scope as much as possible.

We are mainly focusing on 2 things here.

1. How much relevant/useful the Global Scope today’s JS development. (Because nowadays we mostly use let or const when defining JS variable )
2. How different JS environment use or access the Global Scope. (Browser env, NodeJS)

Modern JS web applications contain lots of JS files. Respect to browser env, there are 3 ways to access the separate JS files.

1. using ES modules. (use import keyword to refer the module that needs to access.)
2. using a bundler. In here it will concatenate all the separate JS file to single JS file and push to browser JS engine. Let’s consider the below example.

(function applicationScope() {

  var functionalityOne = (function testFunc01() {

  })();
  var functionalityTwo = (function testFunc02 () {
    // so we can use functionalityOne here
    // without polluting the global scope
    function testFunc03() {
    functionalityOne.someOtherTestFunction();
    }
  })();
})();

Because of this approach, we are not leaking variables to global scope and applicationScope() works like application-wide scope.

3. Directly drop into Global Scope. Please consider blow code block. This thing can be done by using bundler or adding files using separate <script> tags.

var functionalityOne = (function testFunc01() {})();

var functionalityTwo = (function testFunc02() {
  function testFunc03() {
    functionalityOne.someOtherTestFunction();
  }
})();

JS and JS Engine’s built-ins also expose to Global Scope. (Check above link to see what are those build-ins)

We can access the global scope in using window keyword. Consider below code.

function sayMyname(){
  console.log('Rasika')
}
window.sayMyname()

Because sayMyName() functionis in the global scope.

Another point that global object property can be shadow by a global variable within the global scope. Consider the below example.

window.fruit = "Banana";

let fruit = "Apple";

console.log(window.fruit); // Banana

console.log(fruit); // Apple

Need to understand that let fruit is defined as a global variable but window. fruitis a global object’s property.

Rule of Thumb:

Use var for global variables and use let and const for block scope variables.

id attribute.

Next, the imported point needs to highlight that every id attribute in the web page will create a global scope variable. Consider below code.

<div id="main">
  <div id="inner-section">
  </div>
</div>

So, this will create variables in the global scope and respectively we can write these code lines.

// valid lexical name
console.log(main) 
// <div id="main"> ... </div>
console.log(window["inner-section"])
// <div id="inner-section"></div>

window.name

This is pre-define global in the browser and property of a global object. Consider below code block.

var name = 30
console.log(name, typeof name)
// "30" string

Here we use var and it can’t shadow the global variable. So it will assign the value to name as 30. But, it returns String 30 

because it is pre-defined getter and setter for the window object that always return a string.

If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you

Main image credit