I am learning JavaScript and just discovered that variable named name, actually is predefined, sitting in global context.
I created new, completely clear html file (have not even written any html in it). Also I tested it in chrome, opera and firefox, same...
I wonder why is that, beyond my curiosity, there was case when that variable was assigned to value "string", by itself, have not even touched it. Why is that there? what is it doing?
Window.name is one of the predefined property of the global object window.
Since Stephan Bijzitter wants an answer with more details, here it is.
Section 7.3.1 of the current living HTML standards states that window.name is a property of the global object window that returns the name of the window and can be set, to change the name.
The name attribute of the Window object must, on getting, return the current name of the browsing context; and, on setting, set the name of the browsing context to the new value.
The name gets reset when the browsing context is navigated to another origin.
Related
As a JavaScript newcomer I see a lot of magic which isn't explained in books. For example, why can I write
document.getElementById('one');
When document is a property of window? From what I've read in books, we need to write
window.document.getElementById('one');
If document would be regular object like any object we would create by ourselves.
What allows us to omit window parent object while working with document property?
I googled this, but I couldn't find an explanation.
window is the Global object in a browser and because of the way scope works in JavaScript, the Global object will always be the last place that is searched for something. So, omitting window is OK because it will wind up being found at the end of the "scope chain".
document is a property of window and, as such, you do not need to qualify it with window for it to be found because when the browser reaches window and still hasn't found what it's looking for, it will look at the properties of window and find document there.
window represents the browser's window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
document is also a property of global object and hence can be accessed as window.document or document.
For more information, you can refer here.
The global window object stores properties specific to the environment (for example, window.innerHeight).
But if we print window to the console, we will see the properties highlighted in a different color.
These include Array, Object, and so on, although i thought they are internal objects.
I have a few questions:
What are these "implicit" properties?
Where do JS boundaries end and environment begin?
Can I refer to Array in Node.js, for example?
Thank you.
In the early days of Javascript, there was one master global symbol and everything that was available in the global scope whether it was part of the language itself or part of the browser environment was a property of that master global.
In the browser, that master global is the window object. Thus, you see many things on the window object that are available globally like the Array constructor.
I would guess that this is a side effect of that fact that Javascript was first designed to run in a browser and was not initially a completely stand-alone language with a stand-alone specification.
More recent revisions to the language specification are not adding some new things to the window object any more. For example, when you declare an ES6 class such as:
class Foo {
constructor(greeting) {
this.greeting = greeting;
}
}
You will not find Foo on the window object even though it may be globally available in the browser.
As others have said, the color difference in the debug output has to do with whether the symbols are enumerable or not which is a technical distinction on whether the property shows up in something like Object.keys() or a for/in loop. The property is still there and is accessible either way.
Today I found a security issue with Chrome (or maybe other browsers I haven't tested yet). What happens is that once you open a site and then open another site in the same tab, the previous site's global variables are accessible to the current site in that tab. I have demonstrated it in this video: https://www.youtube.com/watch?v=oDFKsLaecOs
Browsers should fix this but is there any other way to protect our global variables?
This is how you can reproduce it:
I logged in to exotel.com site and they are using a name variable to store currently logged in user's name. You can use it in console and check its value.
Now go to any other site in same tab and try accessing that variable from exotel. Your name will be displayed or just add a button from HTML in inspector and on click of that display the name variable.
See the description of window.name on MDN.
You're renaming the window, not creating a new global variable.
is there any other way to protect our global variables?
Don't assign values to predefined properties unless you really mean it.
Also avoid using global variables in the first place.
When do you need to use global variables, don't make them implicit globals. Declare them using let or const.
As a JavaScript newcomer I see a lot of magic which isn't explained in books. For example, why can I write
document.getElementById('one');
When document is a property of window? From what I've read in books, we need to write
window.document.getElementById('one');
If document would be regular object like any object we would create by ourselves.
What allows us to omit window parent object while working with document property?
I googled this, but I couldn't find an explanation.
window is the Global object in a browser and because of the way scope works in JavaScript, the Global object will always be the last place that is searched for something. So, omitting window is OK because it will wind up being found at the end of the "scope chain".
document is a property of window and, as such, you do not need to qualify it with window for it to be found because when the browser reaches window and still hasn't found what it's looking for, it will look at the properties of window and find document there.
window represents the browser's window.
All global JavaScript objects, functions, and variables automatically become members of the window object.
document is also a property of global object and hence can be accessed as window.document or document.
For more information, you can refer here.
in a programming challenge I recently took part in I had to use the window.name property to store / manipulate data. I found out that, when you change this property, it persists through page refreshes (although not when opening a new page with the same URL).
The only information I could find was that this is known and even used by some frameworks as data storage, but I would be interested in the why (as in why is window.name persistent? Any historical reasons?) and the how (which rules are there of when the window.name is kept between page changes and when it is discarded?).
Apparently, my Google-fu is not strong enough to find the answers to these questions (there is not even a mention of it on the MDN page!) so I hope that maybe you could help me.
My understanding of it is that the window object is persistent throughout the lifetime of a tab, and represents the window that is loading different HTML documents.
Each tab contains its own window object, which is why even when you navigate to/from different pages the window object is persistent, whereas if you check on a different tab the window.name will be different.
When opening different html pages, most of them do not override the window.name property, and it is completely optional. If nothing else is manipulating it, it will be what you leave it as. Most pages only touch on manipulating the window.document itself.
Named windows are used as link targets, for one:
some page
The link will open in a new window once, and in the same window if it still exists on subsequent clicks, with the window’s name being how it’s targeted.
The second argument of window.open is also a window name.
window.open('example.html', 'some_page');
You can try it out in your browser across unrelated websites; in one tab’s console, set window.name = 'test'; and in the other, use window.open('https://example.com/', 'test');. (You may have to let it through a pop-up blocker.) The unrelated tab should navigate to https://example.com/.