Overload your native JavaScript objects for better reusability and cleaner code.

Problem Space

Since the introduction of ES6, a lot of new JavaScript methods came into picture like map, reduce, find. These are all functional helpers for your code, to make it easy for you to manipulate and work with Javascript data structures.

In our daily life as a JavaScript developer, we still write the same thing over and over and this is where libraries like Lodash come into play. But is all that really needed when people are debating over why the bundle size of React is 145KB and that of Angular is 2.4MB? Nothing to take away from Lodash which is an impressive library.

My Solution

Extending JavaScript objects with what we already know is an available option. ES6 was presented with classes as well which is just syntactic sugar but coming from an OOP background makes your understanding better, although JavaScript still has a lot of quirks.

From my day-to-day job, I often need to find the unique occurrence of an element in an array. I need to check an element exists in an array or not which I feel is part of a normal workflow, nothing out of the box.

class PowerArray  extends Array {

  checkIfExist(value){
   return !!this.find(val=>val==value)
  }
  unique(){
    console.log(this)
    return new PowerArray(...new Set(this))
  }
  sum(){
   return this.reduce((val,acc)=>val+acc,0)
  }
}
const array=new PowerArray()

#coding #programming #javascript