How much memory does one array-element take?

Question

I think there can be a difference between browers,

but how do I find out how much memory an array or one element of it takes in Javascript?

I want to figure out how much space I save when using a typed array.

Thanks in advance!

Answer 1

This depends on a wide number of aspects.

• The length of the reference used to store the variable can vary in size (If you are not using associative arrays, which don't actually exist in JS, but that's a different discussion).
• The item itself can also vary in size. Basically, the binary representation used to store the certain type of object is what makes the memory.
  • An 8 bit int uses 1 byte.
  • A 16 bit int uses 2 bytes.
  • A character in a string uses either 2 or 4 bytes (because of UTF-16).
• If you want a better insight on size/speed/execution times, I think the only accurate way to go is to use the profiling tools that come with the browser, or use addons like FireBug.

The reality is different. You shouldn't worry much about client side storage. Not in this way at least. The only memory specific control you really need is memoization. Other than that, all you need to do is to clean up your traces, so to speak. If you are in an OOP environment, make sure to always delete instance references and null your COM and DOM references once you are done with them.

 

If you wish to empty a collection (array), simply use the delete operator. If you are not defining the collection as an instance property, but instead you are using var as defining it as a context variable, use myArray.length = 0; which will delete the entire storage in the array.

 

If you are dealing with large collections, direct assignment is faster than using the Array.prototype.push(); method. myArray[i] = 0; is faster than myArray.push(0); according to jsPerf.com test cases.

 

The amount of time it takes to iterate over an array can vastly change depending on how you reference the array length, as well as the internet browser you use.

// Option 1
for (var i = 0; i < someArray.length; i++) {
    // do something;
};
// Option 2
var l =  myArray.length;
for(var i = 0; i < l; i++) {
    // do something
};
// Option 3
for (var i = 0, ii = someArray.length; i < ii; i++) {
    // do something;
};

Test cases for the above are available here.

As of June 6, 2015, the relative speeds are as follows:

+--------+------------+---------------+----------------------+
| Option | Firefox    | Google Chrome | Internet Explorer 11 |
+--------+------------+---------------+----------------------+
| 1      | Fastest    | 0.35% Slower  | 46% Slower           |
| 2      | 21% Slower | 0.15% Slower  | 0.09% Slower         |
| 3      | 21% Slower | Fastest       | Fastest              |
+--------+------------+---------------+----------------------+

 

When defining arrays, there is absolutely no point to specify the length, especially if you are doing deferred initialization.

// Doing this is pointless in JS. It will result in an array with 100 undefined values.
var a = new Array(100);

// Not even this is the best way.
var a = new Array();

// Using the array literal is the fastest and easiest way to do things.
var a = [];

Test cases for array definition are available here.