14 functions I made to dump lodash and reduce my bundle size...
Tags: javascript, webdev, showdev, tutorial
Published: 2021-08-16 06:57:29

Lodash and underscore changed the way I write Javascript forever, but today there might be better options for the most common functions.

I recently went through our main app looking to reduce the bundle size and quickly identified that we were still getting most of lodash imported despite our best efforts to do specific functional imports.

We moved to lodash-es and that helped a bit, but I was still looking at a couple of utility functions taking up around 30% of the bundle.

The problem is that, as a node module, many of the choices about polyfilling old functionality have already been made by the library, so depending on your target browser you might have a lot of code you don't need.

I identified 14 core functions we used from lodash and went about re-writing them in modern Javascript so the bundling process can decide what it needs to provide in terms of polyfills depending on the target.  The reductions in import size were significant.

Lodash-es after tree shaking, before my functions:
![Build Analysis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8clrmkw2h6w44zgvosv3.png)


My code: **4.1kb** (uncompressed/unminified, though it will need polyfills on older browsers)

## The core functions

Here's what I did about that list of functions:

### Matched functionality

* filter
* forEach (arrays and objects)
* groupBy
* keyBy
* map (arrays and objects)
* merge
* omit
* sortBy
* uniq
* uniqBy

### Implemented "enough"

* pick
* get (doesn't support array syntax)
* set (doesn't support array syntax)
* debounce (with maxWait, flush, cancel)

## The functions

So here are those functions, what they do and how I implemented them:

### pick(function(item)=>value | propertyName)

We will start with `pick` because it's pretty useful for everything else.  `pick` will return a function to extract a property from an object - my implementation will convert a string to this, but leave other values alone.

You can use `pick` yourself like this:

```js
const array = [{ name: "mike", a: 1 }, { name: "bob", a: 2 }]

console.log(array.map(pick('name')) //=> ["mike", "bob"]

```

{% collapsible Implementation %}
```js
import {get} from './get'
export function pick(fn) {
  return typeof fn === "string" ? (v) => get(v,fn) : fn
}
```
{% endcollapsible %}

### filter(array, function(item)=>boolean | string)

We used `filter` with a name property quite a lot, so filter is basically just pick and the existing filter function:

```js
const array = [{ name: "mike", a: 1 }, { name: "bob", a: 2 }, { a: 4 }]

console.log(filter(array, 'name')) //=> [{ name: "mike", a: 1 }, { name: "bob", a: 2 }]

```
{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function filter(target, fn) {
  return target.filter(pick(fn))
}
```
{% endcollapsible %}

### forEach(array|object, function(value, key))

In lodash we can use either an object or an array for a forEach and so we needed an implementation that can do that. The callback gets the parameters `value` and `key`. It works like this:

```js
const data = { a: 1, b: 2, d: "hello" }
forEach(data, (value, key)=>console.log(`${key}=${value}`) 
      //=> a=1
      //=> b=2
      //=> d=hello
```

{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function applyArrayFn(target, fnName, fn) {
  fn = pick(fn)
  if (Array.isArray(target)) return target[fnName](fn)
  if (target && typeof target === "object")
    return Object.entries(target)[fnName](([key, value], index) =>
      fn(value, key, target, index)
    )
  throw new Error(`Cannot iterate ${typeof target}`)
}

export function forEach(target, fn) {
  return applyArrayFn(target, "forEach", fn)
}
```
{% endcollapsible %}

### get(object, propertyPath, defaultValue)

`get` allows you to read properties from an object and if any intermediaries or the final value are not found it will return the default value

```js
const data = { a: { b: {d: 1 } } }
get(data, "a.b.d") //=> 1
get(data, "a.c.d", "hmmm") //=> hmmm
```
{% collapsible Implementation %}
```js
export function get(object, path, defaultValue) {
  const parts = path.split(".")
  for (let part of parts) {
    if(!object) return defaultValue
    object = object[part]
  }
  return object ?? defaultValue
}
```
{% endcollapsible %}

###groupBy(array, function(item)=>key | propertyName)

Create an object keyed by the result of a function (or picked property name) where every value is an array of the items which had the same key.

```js
const array = [{ name: "mike", type: "user" }, { name: "bob", type: "user" }, { name: "beth", type: "admin"} ]

console.log(groupBy(array, 'type'))
    /*=>
       {
          admin: [{name: "beth", type: "admin" }],
          user: [{name: "mike", type: "user" }, {name: "bob", type: "user"}]
       }
    */

```
{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function groupBy(target, fn) {
  fn = pick(fn)
  return target
    .map((value) => ({ value, key: fn(value) }))
    .reduce((c, a) => {
      c[a.key] = c[a.key] || []
      c[a.key].push(a.value)
      return c
    }, {})
}
```
{% endcollapsible %}

###keyBy(array, function(item)=>key | propertyName)

Similar to `groupBy` but the result is *the last* item which matched a key - usually this is given something where the key will be unique (like an id) to create a lookup

```js
const array = [{ id: "a7", name: "mike", type: "user" }, { id: "z1", name: "bob", type: "user" }, { id: "a3", name: "beth", type: "admin"} ]

console.log(keyBy(array, 'id'))
    /*=>
       {
          "a3": {name: "beth", type: "admin", id: "a3" },
          "a7": {name: "mike", type: "user", id: "a7" },
          "z1": {name: "bob", type: "user", id: "z1"}
       }
    */

```
{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function keyBy(target, fn) {
  fn = pick(fn)
  return target
    .map((value) => ({ value, key: fn(value) }))
    .reduce((c, a) => {
      c[a.key] = a.value
      return c
    }, {})
}

```
{% endcollapsible %}

###map(array|object, function(value, key)=>value | propertyName)

Maps both objects and arrays (like `forEach`)

```js
const records = {
          "a3": {name: "beth", type: "admin" },
          "a7": {name: "mike", type: "user" },
          "z1": {name: "bob", type: "user"}
       }
console.log(map(records, 'name')) /=> ["beth", "mike", "bob"]
```

{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function applyArrayFn(target, fnName, fn) {
  fn = pick(fn)
  if (Array.isArray(target)) return target[fnName](fn)
  if (target && typeof target === "object")
    return Object.entries(target)[fnName](([key, value], index) =>
      fn(value, key, target, index)
    )
  throw new Error(`Cannot iterate ${typeof target}`)
}

export function forEach(target, fn) {
  return applyArrayFn(target, "map", fn)
}
```
{% endcollapsible %}

###merge(target, ...sources)

Works like `Object.assign` but recurses deep into the underlying structure to update the deeper objects rather than replacing them.

```js
const record = { id: "2", name: "Beth", value: 3, ar: ["test", { a: 3, d: { e: 4 } }] }
console.log(merge(record, { ar: [{ b: 1 }, { c: 3, d: { f: 5 } }]))

   /*=>
    {
      id: "2",
      name: "Beth",
      value: 3,
      ar: [{ b: 1 }, { c: 3, d: { f: 5, e: 4 } }]
    }
   */
```
{% collapsible Implementation %}
```js
export function merge(target, ...sources) {
  for (let source of sources) {
    mergeValue(target, source)
  }

  return target

  function innerMerge(target, source) {
    for (let [key, value] of Object.entries(source)) {
      target[key] = mergeValue(target[key], value)
    }
  }

  function mergeValue(targetValue, value) {
    if (Array.isArray(value)) {
      if (!Array.isArray(targetValue)) {
        return [...value]
      } else {
        for (let i = 0, l = value.length; i < l; i++) {
          targetValue[i] = mergeValue(targetValue[i], value[i])
        }
        return targetValue
      }
    } else if (typeof value === "object") {
      if (targetValue && typeof targetValue === "object") {
        innerMerge(targetValue, value)
        return targetValue
      } else {
        return value ? { ...value } : value
      }
    } else {
      return value ?? targetValue ?? undefined
    }
  }
}
```
{% endcollapsible %}

###omit(object, arrayOfProps)

Returns an object with the props listed removed

```js
const record = { a: 1, b: 2, c: 3}
console.log(omit(record, ['b', 'c'])) //=> {a: 1}
```

{% collapsible Implementation %}
```js
export function omit(target, props) {
  return Object.fromEntries(
    Object.entries(target).filter(([key]) => !props.includes(key))
  )
}
```
{% endcollapsible %}

###set(object, propertyPath, value)

Sets a value on an object, creating empty objects `{}` along the way if necessary.

```js
const record = { a: 1, d: { e: 1 } }
set(record, "a.d.e", 2) //=> { a: 1, d: { e: 2 } }
set(record, "a.b.c", 4) //=> { a: 1, b: { c: 4 }, d: { e: 2 } }
```

{% collapsible Implementation %}
```js
export function set(object, path, value) {
  const parts = path.split(".")
  for (let i = 0, l = parts.length - 1; i < l; i++) {
    const part = parts[i]
    object = object[part] = object[part] || {}
  }
  object[parts[parts.length - 1]] = value
}
```
{% endcollapsible %}

###sortBy(array, function(item)=>value | propertyName)

Sort an array by a sub element.

```js
const array = [{ id: "a7", name: "mike", type: "user" }, { id: "z1", name: "bob", type: "user" }, { id: "a3", name: "beth", type: "admin"} ]
console.log(sortBy(array, 'name'))
     /*=>
      [
        { id: "a3", name: "beth", type: "admin"} 
        { id: "z1", name: "bob", type: "user" }, 
        { id: "a7", name: "mike", type: "user" }, 
      ]
     */
```

{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function sortBy(array, fn) {
  fn = pick(fn)
  return array.sort((a, b) => {
    const va = fn(a)
    const vb = fn(b)
    if (va < vb) return -1
    if (va > vb) return 1
    return 0
  })
}

```
{% endcollapsible %}

###uniq(array) 

Make a unique array from an existing array

```js
const array = ['a', 'b', 'c', 'b', 'b', 'a']
console.log(uniq(array)) //=> ['a', 'b', 'c']
```

{% collapsible Implementation %}
```js
export function uniq(target) {
  return Array.from(new Set(target))
}
```
{% endcollapsible %}

###uniqBy(array, function(item)=>value | propertyName)

Make a uniq array using a property of objects in the array.

```js
const array = [{a: 1, b: 2}, {a: 4, b: 2}, {a: 5, b: 3}]
console.log(uniqBy(array, 'b')) //=> [{a: 1, b: 2}, {a: 5, b: 3}]
```
{% collapsible Implementation %}
```js
import { pick } from "./pick"

export function uniqBy(target, fn) {
  fn = pick(fn)
  const dedupe = new Set()
  return target.filter((v) => {
    const k = fn(v)
    if (dedupe.has(k)) return false
    dedupe.add(k)
    return true
  })
}
```
{% endcollapsible %}

## Partially Implemented `debounce`

lodash `debounce` is very powerful - too powerful for me and too big.  I just need a function I can debounce, a maximum time to wait and the ability to flush any pending calls or cancel them. (So what is missing is trailing and leading edges etc, + other options I don't use).

```js
const debounced = debounce(()=>save(), 1000, {maxWait: 10000})
...
debounced() // Call the debounced function after 1s (max 10s)
debounced.flush() // call any pending 
debounced.cancel() // cancel any pending calls
```
{% collapsible Implementation %}
```js
export function debounce(fn, wait = 0, { maxWait = Infinity } = {}) {
  let timer = 0
  let startTime = 0
  let running = false
  let pendingParams
  let result = function (...params) {
    pendingParams = params
    if (running && Date.now() - startTime > maxWait) {
      execute()
    } else {
      if (!running) {
        startTime = Date.now()
      }
      running = true
    }

    clearTimeout(timer)
    timer = setTimeout(execute, Math.min(maxWait - startTime, wait))

    function execute() {
      running = false
      fn(...params)
    }
  }
  result.flush = function () {
    if (running) {
      running = false
      clearTimeout(timer)
      fn(...pendingParams)
    }
  }
  result.cancel = function () {
    running = false
    clearTimeout(timer)
  }
  return result
}

```
{% endcollapsible %}

### Conclusion

It's possible to drop the need for lodash if you only use these functions.  In our app we do use other lodash functions, but they are all behind lazy imports (so `template` for instance) - our app is way faster to load as a result.

Feel free to use any of the code in your own projects.

{% codesandbox 0c7e1 view=editor module=/src/library/debounce.js %}

{% codesandbox n4dpo initialpath=/gYgF3HggxNP2Mket9_2xe/embed %}