How do I count the number of global variables in global scope?

Question

I'm working on a project developed by someone else. I load the Chrome Developer Tool to check the status of a global variable. When I tick open Global under Scope, I see a colossal number of global variables. It takes me over 8 seconds to scroll through them. Having worked on this project for some time now, I know that global variables is a problem which we'll have to fix; but, *that is irrelevant to my question.

To communicate the scale of our global scope being flooded, I'd like to count the number of variables presently instantiated in the global scope

How do I do this?

I'm looking for an answer in JavaScript that I can execute immediately in my console. Basically something that may iterate over the global scope and count++.

Answer 1

I'm not sure a count of global variables is, of itself, a useful indicator of anything. You should do some analysis to work out which are created by code, which are host specific and which are related to the environment (e.g. DOM).

In a browser, the window object is a synonym for the global object, hosts are allowed to add properties to it (e.g. window.name) as well as define properties on its prototype (if it has one).

Also, all element IDs are created as properties of window (you can blame Microsoft and IE for that), so if there are lots of element IDs then there'll be lots of global properties.

Anyway, below are two ways to count the own enumerable properties of the global (window) object. It uses an IIFE so it doesn't create any properties itself.

// Create 3 global properties
var x, y, z;

(function(global) {

  // for..in with hasOwnProperty check
  var count = 0;
  for (var prop in global) {
    if (global.hasOwnProperty(prop)) {
      count++;
    }
  }
  console.log('for..in count: ' + count +
  
            // Direct count using Object.keys
            '\nObject.keys  : ' + Object.keys(global).length);
            
// Pass global (window in a browser) object to function
}(this));

So an approach to testing for code-created variables in a browser may be to:

1. Count the number of global properties in an "empty" document, that should be the default host-defined set
2. Count the total number of global properties in the suspect document
3. Count the number of elements in the document with an ID

So the number of code-created globals should be the result of item 2 - (item 1 + item 3).

You can count the elements with an ID something like:

var allEls = document.getElementsByTagName('*');
var idCount = 0;

for (var i=0, iLen=allEls.length; i<iLen; i++) {  
  if (allEls[i].id != '') {
    ++idCount;
  }
}

or:

[].filter.call(document.getElementsByTagName('*'), function(el) {
  return el.id != '';
}).length;

Answer 2

var count = 0;
for( var x in window ){
    if( window.hasOwnProperty(x) ) count++;
}
console.log(count);