Can I add attributes to 'window' object in javascript?

Solution 1:

Can I add any random attribute to 'window' object in javascript?

Yes, just like you've shown.

Does it have any side effects with any libraries?

No, not unless you use a library which sets a property you then overwrite.

And is it cross-browser compatible?

Yes, completely.

Having said that, this practice is generally frowned upon. You could end up overwriting something you don't want to.

Solution 2:

In all browsers, window is the javascript global namespace. Every property or method 'lives' in that namespace. So if you assign a property to window, it is in effect a global variable.

example:

window.myConstant = 5;

// note: a var declaration will be a window property too
// note 2: 'let' or 'const' will not be window properties
// below can also be done without 'var'.
var myConstantGlobal = 4;

console.log(`multiply(10) => ${multiply(10)}`);
console.log(`multiply() => ${multiply()}`);
console.log(`multiplyGlobalVar(10)) => ${multiplyGlobalVar(10)}`);
console.log(`multiplyGlobalVar() => ${multiplyGlobalVar()}`);
    
function multiply(val){
  return myConstant * (val || 1);
}

function multiplyGlobalVar(val){
  return window.myConstantGlobal * (val || 1);
}

You have to be cautious with javascript frameworks. For instance, if you declare window.JQuery, and use the JQuery framework, the JQuery namespace will be replaced by your assignment, rendering it useless.

Solution 3:

Yes, you can, but in general you shouldn't.

The window object is also the JS default "global" object, so all global variables get added there.

You're unlikely to break anything unless you overwrite a property that's already there, but it's considered bad practise to dump variables on window, or otherwise create lots of global variables.

Solution 4:

I won't repeat what others have said re: the hackyness of this practice. But it can be incredibly useful when using a rigid framework like Angular mixed with vanilla HTML / JS (or jQuery) code. Which is also hacky and frowned upon, but sometimes there are good reasons, like if you have lots of pre-existing JS code that will be challenging to integrate into the framework.

The more interesting question to me is HOW to make use of the ability to add properties to the global window object. There is a pattern I use when I want to expose the methods of an Angular provider (service) to code that otherwise would be unable to inject the service, probably because it runs outside of the Angular DI framework. The way I do it is as follows:

1. Define your service as a provider in your top level module.
2. In the constructor or onInit of app.component.js (or whatever your top level component is that imports the provider), inject the provider normally, perform any one time initialization that it needs, and then call window['MyServiceName'] = this

Assuming you have designed the provider to follow a Singleton pattern, your provider's methods can now be safely called from anywhere. A non-Angular script need simply call window['MyServiceName'].methodName()