Arrowhead memory functions and communicates

I am trying to profile the memory usage of arrow functions and bind

to see if there is a difference. I would like to know how to navigate from where I am so far.

I first wrote two javascript files, one using arrow functions and the other bind

. Then I took a snapshot of the heap.

bind.js

var heapdump = require('heapdump');

var arr = [];
this.value = 'foo';

for (var i = 0; i < 100000; ++i) {
  arr.push(
    (function() {
      console.log(this.value);
    }.bind(this))
  );
}

heapdump.writeSnapshot('./bind.heapsnapshot')

console.log(arr.length);

      

        
        
        
      

    

arrow.js

var heapdump = require('heapdump');

var arr = [];
this.value = 'foo';

for (var i = 0; i < 100000; ++i) {
  arr.push(
    (() => {
      console.log(this.value);
    })
  );
}

heapdump.writeSnapshot('./arrow.heapsnapshot')

console.log(arr.length);

      

        
        
        
      

    

Using the Chrome devtool profile tab, I see a comparison between the two snapshots:

I would like to know how I can interpret the result.

Specifically, what does this mean:

• that one heap is four times the size of another?
• have such values #delta
  
  and size_delta
  
  ?
• to have that much delta for (string)
  
  ?