14

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 with the 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 a global object/variable?

I am really confused. What is the explanation, preferably with an example?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
b.g
  • 411
  • 1
  • 3
  • 19
  • 4
    This should help: http://stackoverflow.com/questions/3473946/what-is-the-difference-between-window-window-top-and-window-parent – Rajesh Oct 14 '16 at 12:57
  • 2
    I think this is just a matter of incomplete or unfortunate wording on the part of w3schools. What they're trying to say is that Javascript, as a language, has the notion of a "global context." When Javascript is tied to a *specific* context, such as a web page, that global context is attached to the window object. Different environments using Javascript might expose that global scope in a domain-specific manner. – David W Oct 14 '16 at 13:00
  • 6
    Really, avoid W3Schools for learning Js. – Bergi Oct 14 '16 at 13:17
  • Yes, that statement contains some truth, but since ES6 it's actually wrong since there are global variables now that are *not* properties of the global object. – Bergi Oct 14 '16 at 13:18

1 Answers1

14

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, or 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 code using Node.js 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 Node.js 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, and this is done explicitly.

var myVariable = 1; // Behind the scenes this declaration 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.

For maybe a better explanation, I strongly recommend this book series You Don't Know JS Yet (book series) - 2nd Edition, specifically for this question You Don't Know JS Yet - Scope & Closures - 2nd Edition

Heinrich Henning
  • 933
  • 5
  • 15
  • Actually, it's only a global variable if it isn't declared with var. So while `foobar = 3` will be available at `window.foobar`, `var foobar2 = 4` will not be available at `window.foobar2`. The same applies to node's global object. – Griffork Mar 21 '18 at 04:58
  • 3
    @Griffork I have tested this with both Chrome v65.0.3325.181 and Node v9.9.0 and in BOTH using `var` in global scope attaches that variable to the `window` and `global` objects respectively. – Heinrich Henning Mar 22 '18 at 05:09
  • 2
    I tested it in the console, which I guess means that the console isn't global scope. That means that the only place in chrome that is global scope is an inline script tag. Maybe it's worth making that clearer? – Griffork Mar 25 '18 at 21:06
  • You do talk about global scope, but not what constitutes global scope. I was pretty sure in node all fipes were considered file scope, so I don't know how you'd get that behaviour in node either. – Griffork Mar 25 '18 at 21:08
  • The above behavior is works in chrome console as well. I did test with node again, it seems that the behavior above is true on the REPL but not within files, files indeed do have their own scope with Node. (updated answer to reflect this) – Heinrich Henning Mar 26 '18 at 06:24
  • 2
    @Griffork can you take a screenshot? That's not how the console is supposed to work. When you run this command in your console, you don't see `4` returned? `var foobar2 = 4; window.foobar2;`. What is your output? `undefined`? – JBallin May 03 '18 at 22:58
  • @JBallin REPL is when you run node from the command line and type command, there you do have the ```global``` object, but as @Griffork correctly states, when running a node javascript file, the file has its own scope. – Heinrich Henning May 04 '18 at 05:36
  • @HeinrichHenning I’m referring to the browser console, not the command line. – JBallin May 04 '18 at 05:39
  • @JBallin Missed that, I should have also realized it since you are using ```window``` not ```global``` in your example, my bad. – Heinrich Henning May 04 '18 at 05:47
  • @JBallin I can't reproduce my results from earlier in the console maybe that was a thing for one specific chrome version, or maybe I got my wires crossed. – Griffork May 07 '19 at 01:52
  • The second link is broken: *"404. Page not found"* – Peter Mortensen Aug 11 '22 at 00:21
  • @PeterMortensen I have updated the link, thank you for pointing it out! – Heinrich Henning Aug 11 '22 at 06:09