Do javascript array's empty elements take up memory?

Question

Usually I convert my data arrays in way that lets me access elements faster later in the code, say the element is an object with an ID property then I set this property as the element's key in the array. To give you an example let's suppose I have this:

[{id: 1, name: "a"}, {id: 2, name: "b"}, etc..]

becomes

[1 => {name: "a"}, 2 => {name: "b"}, etc...]

then I can simply use a[2] without iterating over the array to find the element with ID = 2

The problem is some values might be missing which causes empty elements in the array:

  1599,
  <2 empty items>,
  1105,
  892,
  <2 empty items>,
  86,
  1695,
  999,
  <1 empty item>,
  967,
  1663,
  <3 empty items>,
  1673,
  <4 empty items>,
  1043,
  998,
  1350,
  1688,
  <3 empty items>,
  2013,
  <2 empty items>,
  136,
  1463,
  1632,
  <1 empty item>,
  1827,
  1680,
  1293,
  <2 empty items>,
  844,
  1696,
  1108,
  <1 empty item>,
  925,
  <6 empty items>,
  1144,
  <7 empty items>,
  905,
  <3 empty items>,
  2006,
  <7 empty items>,
  1876,
  <2 empty items>,
  1609,
  <2 empty items>,
  2232,
  <1 empty item>,
  1561,
  <1 empty item>,
  2203,
  <1 empty item>,
  1400,
  <3 empty items>,
  1381,
  1287,
  1312,
  <2 empty items>,
  933,
  ... 4011 more items ]

Are these using memory, should I be concerned?

They don't. Sparse arrays are not a contiguous memory region - it's just a fancy object. If you have {a: 1, c:3} there is no memory reserved for b. Same with the (essentially) {0: "a", 2: "c"} — VLAZ
– VLAZ, Commented Apr 15, 2020 at 8:19

ehab · Accepted Answer · 2020-04-15 08:47:48Z

6

Yes they do, And u can easily verify that yourself. Create a the following class

class EmptyArray {
    constructor(size) {
        this.array = new Array(size)
    }
}

Go to any chrome built in chrome page like chrome://version/ (just to have a really simple static page), open dev tools and choose allocation instrumentation on timeline option (without stack recordings) , start recording then create 3 instances

a = new EmptyArray(1)
a = new EmptyArray(90)
a = new EmptyArray(90000)

Stop the recording and then check the retained size of these 3 instances, you will see that they are extremely different in size

here is a screenshot

answered Apr 15, 2020 at 8:47

ehab

8,1741 gold badge28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Sparse arrays are just messy use the cleaner array methods. Use .entries() and it'll return an array of arrays. Each sub-array is a key/value pair (an entry). In this case the keys are index numbers since it's a real array:

let arrayofArrays = objectArray.entries();

// [[0, {object}], [1, {object}], [2, {object}],...]

Compact the array using .filter():

objectArray.filter(obj => obj !== undefined && obj != null && obj !== '');

Then take that array of arrays and convert it into a Map for easy access:

let arrayMap = new Map(arrayOfArrays);

arrayMap.get(2);

// returns the 3rd Object

Demo

let objArray = [{id: 1, name: "a"}, {id: 2, name: "b"}, null, {id: 1, name: "c"}];

let cleanObjArray = compactArray(objArray);

let arrayMap = new Map(cleanObjArray.entries());
// [[0, {id: 1, name: "a"}], [1, {id: 2, name: "b"}], [2, {id: 1, name: "c"}];

console.log(arrayMap.get(2));

function compactArray(array) {
  return array.filter(obj => obj !== undefined && obj != null && obj !== '');
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 15, 2020 at 8:41

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

2 Comments

slash197 Over a year ago

thanks, this is really nice but I have a feeling that for larger arrays my messy approach is a bit faster, in my case speed matters if it doesn't come with a significant memory usage, hence my question

zer00ne Over a year ago

Your data must be in the kifillions, although modern browsers are quite impressive lately.

Collectives™ on Stack Overflow

Do javascript array's empty elements take up memory?

2 Answers 2

Comments

Demo

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Demo

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related