Menu
Is there a way in Javascript to get a list or dump the contents of all global variables declared by Javascript/jQuery script on a page? I am particularly interested in arrays. If I can get the array names, it will be enough to me. Seeing its values is a bonus.
465
This is because global variables are easily overwritten by other scripts. Global Variables are not bad and not even a security concern, but it shouldn't overwrite values of another variable. On the usage of more global variables in our code, it may lead to a maintenance issue.
Avoid globals. Global variables and function names are an incredibly bad idea. The reason is that every JavaScript file included in the page runs in the same scope.
Use the env command. The env command returns a list of all global variables that have been defined.
Object.keys( window ); This will give you an Array of all enumerable properties of the window object, (which are global variables).
For older browsers, include the compatibility patch from MDN.
To see its values, then clearly you'll just want a typical enumerator, like for-in.
You should note that I mentioned that these methods will only give you enumerable properties. Typically those will be ones that are not built-in by the environment.
It is possible to add non-enumerable properties in ES5 supported browsers. These will not be included in Object.keys, or when using a for-in statement.
As noted by @Raynos, you can Object.getOwnPropertyNames( window ) for non-enumerables. I didn't know that. Thanks @Raynos!
So to see the values that include enumerables, you'd want to do this:
var keys = Object.getOwnPropertyNames( window ), value; for( var i = 0; i < keys.length; ++i ) { value = window[ keys[ i ] ]; console.log( value ); } The following function only dumps global variables that have been added to the window object:
(function(){ //noprotect <- this comment prevents jsbin interference var windowProps = function() { // debugger; var result = {}; for (var key in window) { if (Object.prototype.hasOwnProperty.call(window, key)) { if ((key|0) !== parseInt(key,10)) { result[key] = 1; } } } window.usedVars = result; }; var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'about:blank'; document.body.appendChild(iframe); var fwin = iframe.contentWindow; var fdoc = fwin.document; fdoc.open('text/html','replace'); fdoc.write('<!DOCTYPE html><body><script>window.onload = ' + windowProps.toString() + '<\u002Fscript>'); fdoc.close(); var button = document.createElement('input'); button.type = 'button'; button.value = 'go'; document.body.appendChild(button); button.onclick = function() { var clean = fwin.usedVars; windowProps(); var dirty = window.usedVars; for (var key in clean) { delete dirty[key]; } for (var variable in dirty) { var div = document.createElement('div'); div.textContent = variable; document.body.appendChild(div); } document.body.removeChild(button); document.body.removeChild(iframe); }; })(); It works by using an iframe to get a clean list of global window variables, then comparing that with the list of global variables in the current window. It uses a button because the iframe runs asynchronously. The code uses a global variable because that makes the code easier to understand.
You can see it working here or here, although note that these examples show many global variables "leaked" by jsbin itself (different depending on which link you use).
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
