What are global variables and window variables in JavaScript? [duplicate]

Question

I found these statements on W3Schools.

With JavaScript, the global scope is the complete JavaScript environment. In HTML, the global scope is the window object. All global variables belong to the window object. Your global variables (or functions) can overwrite window variables (or functions).

Don't these statements mean that global and window variables are basically same? And can I access a window variable from another window, since it is associated to window object or is the window object deleted once we navigate to another window?

And this one too:

Any function, including the window object, can overwrite your global variables and functions.

And an associated example as :

<p>
In HTML, all global variables will become window variables.
</p>

<p id="demo"></p>

<script>
var carName = "Volvo";

// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>

What is a window object/variable and how does it differ from global object/variable ?

I am really confused. Can anyone please elaborate this with an example?

Answer 1

All JavaScript code executes in some environment, most commonly in a browser. The code that executes must execute in some "root" scope referred to as the global context or global scope (think of it as the main container). In your browser, this "root" scope is the window object (unique window object per tab/page/iframe).

That is why when in the example a variable gets declared in the global scope var carName = "Volvo"; you can access this variable on the window object window.carName, because in the browser the 'window' object the global object.

When you execute javascript using Node for example the global object is very aptly named global and in that environment if you declare var carName = "Volvo"; you can also access the variable using global.carName (this is only true on the nodejs REPL, var declarations in files do not attach to the global object).

To elaborate:

var myObject = { };
myObject.myVariable = 1;
console.log(myObject.myVariable); // logs 1

myVariable is created on myObject, this is done explicitly.

var myVariable = 1; // behind the scenes this declerations is doing window.myVariable = 1;
console.log(window.myVariable); // logs 1

myVariable is implicitly created on the window object which in the context of a browser is the global object.

I hope this clarifies the situation.

For maybe a better explanation I strongly recommend this book series https://github.com/getify/You-Dont-Know-JS specifically for this question https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures