Javascript array map

Map: create a transformation copy of each element from an array.

On the messy world of JavaScript, while changing between object, arrays and data types, The map method a more they a simple array transformation function. It’s one of the most used tools in a messy world.

Basic map overview

   [1,2,3].map((x)=>{
      return x * x;
   });

   // returns: 1,4,9

The second argument is the index in the array:

   [1,2,3].map((x,i)=>{
      return i * x;
   });
   //return 0,2,6

The third argument is the original array itself:

   [1,2,3].map((x,i,arr)=>{
      if (x != arr[i]){
         throw "Whhhaaatttt??!!!";
      }
      return x+1;
   })
   //returns: 2,3,4

Good to know

The length of the map is set before it starts to run, that’s why the next code will not create an infinite loop.

   var a = [1,2,3];
      a.map((x,i,arr)=>{
         arr.push(x*x);
      return x*x;
   });
   //returns: 1,4,9
   // but a will be: [1,2,3,1,4,9]

Since map returns a value only on the callback at the end, an error in the middle will return undefined:

   let a = [{a:{b:1}},{a:null},{a:{b:2}}]
   let b = a.map((x)=>{
      console.log(x.a.b);
      return b.a.b;
   });
   // The log will show: 1 and than an error
   // b will be undefined

Common usecases

One more common use besides of data manipulation is to use the map to flatten Object to list:

   var cats = [
      {name: "Bob", desctiption: "A fat cat"},
      {name: "Nob", desctiption: "A very fat cat"},
      {name: "Blob", desctiption: "The most fat cat I had seen"},
   ]
   var whatPeopleThinkAboutCats = cats.map((x)=>{
      return x.desctiption;
   });
   //whatPeopleThinkAboutCats == ["A fat cat","A very fat ...]

One more common use for maps is on the opposite way, to convert an array to object:

   var unreadableCrons = ['0 0 0 0 0', '1 0 0 0 0', '0 1 0 0 0'];
   const DAYS_CONSTANT = ['Sunday', 'Monday', 'Tuesday',....];
   var timeFormat = (x) => {return x.toString().length == 1? '0'+x:x;}
   var readableBasicCrons = unreadbleCrons.map((x) => {
   if(isSimpleCron(x)){
       let cronEx = x.split(' ');
       return {
         time:: format(s[1]) + ':' + format(s[0]),
         day: DAYS_CONSTANT[4],
      };
   }
   throw "Arr, this is more complicated than we support";
});

Simple and naive implementation of the map method:

Array.prototype.ksmap = function(callback){
   let arr = [];
   for(let i =0;i<this.length;i++){
      arr.push(callback(this[i],i,this));
   }
   return arr;
}

Tricky JavaScript corners

And since there are always some interesting corners:

   let a = [null,null,null].map((_, i) => i);
   //returns: a.length == 3

But:

   let b = [,,].map((_, i) => i);
   //returns: b.length == 2

This is explained here

One more tricky part that it’s important to recognize:

['10', '10', '10'].map(parseInt)
returns: [10, NaN, 2]

This one is explained here.

I looked for an example of transformation on real life but could find none, since on real life we need matter to create matter. So the closest idea I have is the evolution of memes. But unlike memes, maps supposed to be reliable and not only a personal perspective of others idea.