Storage and 'weight' of Arrays and Object variables

Question

So...

var testArray=new Array("hello");
testArray.length=100;
console.log(testArray.length);

I believe the above means I have created an array that has 100 elements. The first element contains the word hello, the others are null, but their position reserved. While small, I suspect reserving these "slots" uses memory.

What about

var myObj={ testArray: new Array(), testVar: "elvis", anotherArray: new Array() };
myObj.testArray.length=1000;

What is the impact or weight of this setup within javascript. Does the engine reserve three containers, each of similar size for testArray, testVar and anotherArray since they fall under myObj?

I tend to create a single global object (called DATA), and then I create variables under that. These variables contain temporary session data within an intranet app which is used several hours a day. Some of the variables are arrays, some are strings. I do it this way because with a single command DATA=null I can empty everything which would not be the case if I were to have several global variables.

I'm just wondering if my thinking is poor or acceptable/understandable. The answer will also help me to better understand how javascript stores data.

Comments welcome...

Answer 1

I believe the above means I have created an array that has 100 elements. The first element contains the word hello, the others are null, but their position reserved. While small, I suspect reserving these "slots" uses memory.

• You created an array with 1 element, then you changed the length of that array to 100. However, that does not mean that you have 99 null elements; you only have 1 element in the array. In other words, the length property of the array does not necessary tell you the number of defined elements.
  
  The process to reserve this does take memory, but is negligible for a small number of elements. However, I do not recommend using the .length property as an assignment; you are really introducing the potential for some unexpected behavior in your code, as well as mismanaging resources.
  
  Instead,You should allow the array to grow and shrink as needed, using functions; .push() and .pop(), .splice(). By doing this, you are minimizing the amount of space required by the array and improving performance.

What is the impact or weight of this setup within JavaScript. Does the engine reserve three containers, each of similar size for testArray, testVar and anotherArray since they fall under myObj?

• There are 3 containers that are created for the object.
  1)DATA object gets a container
  2)testArray gets a container because you used the constructor approach (not best-practice)
  3)anotherArray container because you used the constructor approach (not best-practice)
  
  In your example, DATA is the container for all of the name:value pairs that exist within this container. The "weight" is exactly the same as your first approach (except you are allocating 1000 slots, instead of 100).
  
  
• I highly suggest that you do not have statements that assign a value to the length of the array. The array should only use as much space as is needed, no more and no less.

• You should also create arrays with the literal approach: var array = []; NOT with the new keyword, constructor approach, as you are doing. By using the new keyword, you raise the potential to have bugs in your code. Also, JavaScript variables declared using the new keyword are always created as objects. See the below example.

  var data = new Array(2, 10); // Creates an array with two elements (2 and 10) var data = new Array(2); // Creates an array with 2 undefined elements

• Avoid polluting the global namespace!!!! Using an object is a good approach in your situation, but it's very important to keep the global namespace clean and free of clutter as much as possible.

Further supporting resources:

• MDN Arrays
• MDN array.length
• MDN Objects
• Writing Fast, Memory-Efficient JavaScript