The solemn temples, the great globe itself,
Yea, all which it inherit, shall dissolve,
And, like this insubstantial pageant faded,"Shakespeare, The Tempest
Act IV, Scene I, Lines 152-155
Here is a quick demo to show what it means to the browser.
See this Plunker if you want to play around with the code.
The browser loads the index.html file which cause it to load and execute a.js, b.js, and c.js.
- a.js executes adding the variable a to the global name space (which in the browser is window)
- b.js executes calling console.log with the variable a
- c.js executes adding the function f to the global name space
- c.js then executes the function f (this is called an iffe)
- which adds the variable x to function f's scope
- then calls console.log with the variable x
- c.js then tries to call console.log with a variable x but there is not an x in the global name space
With the scope looking like the following.
- variable a
- "this is from a.js"
- function f
- variable x
- "scoped to function f"
Looking at the scope it is easy to see why the call to console.log with a in the file b.js works but the call to console.log with x in the c.js outside of the function f fails.