How to keep track of how many arrays are created in Javascript?

Question

I want to be able to keep track of how many arrays a certain program uses, so that I can figure out if unnecessary memory has been allocated.The problem I am running into is Javascript's construct that array literal [] does not trigger Array#constructor. Is there another way for me to keep track of array usage? ES5 and/or ES6 and beyond.

var arrayConstructor = Array // store reference
window.arrCount = 0
window.Array = function() {
  arrCount++;
  return new Array();
}

var arr1 = new Array
window.arrCount // 1

var arr2 = []
window.arrCount // 1 : NOT WORKING!

Can you intercept calls to `Array.__proto__.constructor` or `Object.__proto__.constructor`? — David Ehrmann, Nov 02 '16 at 04:57
@DavidEhrmann no, i believe the problem is that javascript short circuits the Array constructor when using literals. — user2167582, Nov 02 '16 at 05:02
no you cannot override an array literal, see this: http://stackoverflow.com/questions/25084889/overriding-array-literal-in-javascript — Sumit Maingi, Nov 02 '16 at 05:04
Also, X/Y question. You're really asking "How can I profile Javascript code?" — David Ehrmann, Nov 02 '16 at 05:07
@DavidEhrmann my apologies, I am trying to figure out this one thing that other languages can easily handle and I was just curious that javascript, whilst improved with many awesome features, can provide a native hook to allow internal analysis to be conducted. — user2167582, Nov 02 '16 at 05:22
"...other languages can easily handle." Not C or Java, at least not without a profiler. Being able to intercept constructors like that is *almost* [AOP](https://en.wikipedia.org/wiki/Aspect-oriented_programming). — David Ehrmann, Nov 02 '16 at 06:16
FYI, `window.Array = ...;` simply overrides the value of the global variable `Array`, it doesn't change the functionality of the `Array` constructor. The JavaScript engine already has a reference to the Array constructor, it doesn't need to look it up in the global scope. — Felix Kling, Nov 02 '16 at 14:39
@DavidEhrmann the languages you are refering are compile languages, at runtime they became machine code and thus profiling construct usage is understandably unfeaasable, javascript however is a dynamic language, and that is why I want to say it should easily tailor this need. — user2167582, Nov 15 '16 at 18:40
@user2167582 Java doesn't necessarily become machine code. You're also mixing up interpreted vs compiled and static vs dynamic typing. For your problem, it's really just a matter of what hooks are exposed. Different languages have different hooks for profiling. — David Ehrmann, Nov 15 '16 at 20:43

score 7 · Accepted Answer · answered Nov 02 '16 at 05:14

Nearly every web browser has a javascript profiler. The purpose of a profiler is to keep track of memory usage, frame rendering speeds, CPU usage, etc.

Open the Chrome Developer Tools (F12)
Click the "Timeline" tab
Make sure "Memory" is checked in the bar named "Capture"
Press the record button in the top left
Refresh the page
Stop recording once the page has loaded
Look at the "JS Heap" graph for a breakdown on where your memory went

For example, Chrome's memory profiler looks like this when recording the loading of the Stack Overflow's Top Questions page.

How to keep track of how many arrays are created in Javascript?

1 Answers1