Mircea Dinoiu

Removing underscore.js bloat from your ES2015 project

September 08, 2016

I’ve been using Underscore.js for quite some time. It’s a very fast, lightweight library that provides a lot of utility functions.

However, at this moment, with all the newest JavaScript features in place, we have lesser reasons to use 3rd parties like Underscore.js for “daily activities” .

We all know that the latest ECMA spec is not implemented in all the browsers, but that’s why we have Babel. However, I’m optimistic that some day browsers will increase their update cycles so much that we’ll get the latest features in no time.

To get back where we were, I’ve decided to clean up the Underscore.js bloat because there were too many occurrences of .each, .map, _.filter, etc. which are really a useless complexity added from my point of view.

There were two big questions I’ve asked myself:

  1. It's obvious that _.each/_.map/_.filter should and will be replaced by Array.prototype methods. But why not look for other replacements as well? As a lazy (efficient) man, I've browsed to see if someone already did a list for these and what do you know! This article has a really nice list of replacements that I've used to refactor the code by replacing with native solutions.
  2. Now I've replaced the bloat with some vanilla JavaScript code, but I cannot remove Underscore.js yet. Why? I still use lots of methods (like _.sortBy) that would require lot of duplicated code or making my own version of Underscore.js-like methods. To sum up: I don't want to remove Underscore.js, but I also don't want any other people to use again _.each, so what do I do? I've decided to write some linting code that would fail a pull request containing code I don't want to allow anymore. As I already have ESLint at hand, I'll just have a new rule that lints this. I browsed several repos for plugins and I found nothing related to Underscore.js. But I discovered a similar ESLint plugin for jQuery. That was my inspiration and I came up with this:
'use strict';

const traverse = (...args) => {
    let [node] = args;

    while (node) {
        switch (node.type) {
            case 'CallExpression':
                node = node.callee;
            case 'MemberExpression':
                node = node.object;
            case 'Identifier':
                return node;
                return null;

const isUnderscore = (node) => {
    const id = traverse(node);

    return id && id.name.startsWith('_');

const Preferred = {
    extend: 'Object.assign',
    defaults: 'Object.assign',
    each: 'Array.prototype.forEach or Object.entries(...).forEach',
    values: 'Object.values',
    size: 'Object.keys(...).length',
    keys: 'Object.keys(...)',
    findIndex: 'Array.prototype.findIndex',
    compact: '[].filter(Boolean)',
    find: 'Array.prototype.find',
    every: 'Array.prototype.every',
    map: 'Array.prototype.map',
    defer: 'setTimeout',
    clone: 'Object.assign',
    isFunction: '\'function\' === typeof subject',
    isString: '\'string\' === typeof subject',
    isNaN: 'isNaN',
    isNull: 'subject === null',
    isNumber: '\'number\' === typeof subject',
    isUndefined: 'subject === undefined',
    has: 'subject.hasOwnProperty(property)'

module.exports = function (context) {
    return {
        CallExpression: function (node) {
            if (node.callee.type !== 'MemberExpression') {

            const name = node.callee.property.name;

            if (!Preferred.hasOwnProperty(name)) {

            const alternative = Preferred[name];

            if (isUnderscore(node)) {
                    message: `Prefer ${alternative} over _.${name}`

module.exports.schema = [];

I really think that ESLint is definitely a big player in a strategy of controlling your project code’s evolution.

Hope this helps anybody out there! :)

Kyle Mathews
Front End Dev living in Bay Area. I love video games and snowboarding.