Top 10 JavaScript Utility Libraries

Following are JavaScript libraries that help you write more concise and maintainable code, often combined with functional programming paradigm. When integrating, cherry-pick must be taken to include in the bundle only the used functions.

They provide a huge collection of different methods, often serving completely separate purposes. Some can easily prove to be useful and make your code less bloated, while others can simply be wrappers around native functionalities provided for convenience.

1. Lodash (59k ⭐) • A JavaScript library that provides utility functions for common programming tasks using a functional programming paradigm. Lodash makes JavaScript easier by taking the hassle out of working with arrays, numbers, objects, strings, etc.

import _ from 'lodash';

_.filter([1, 2, 3, 4, 5], (num) => num % 2 === 0); //=> [2, 4]

2. Underscore (27k ⭐) • A JavaScript library that provides over 100 functions useful functional programming helpers without extending any built-in objects. It has specialized goodies like function binding, javascript templating, creating quick indexes, deep equality testing, etc.

import _ from 'underscore';

_.map([1, 2, 3], n => n * 2);                 //=> [2, 4, 6]
_.reduce([1, 2, 3], (sum, n) => sum + n, 0);  //=> 6

3. Ramda (23.6k ⭐) • A practical functional library for JavaScript, designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

import * as R from 'ramda';

R.add(2, 3);  //=> 5
R.add(7)(10); //=> 17

4. Math.js (14.1k ⭐) • An extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with different data types like numbers, big numbers, complex numbers, fractions, units, and matrices.

import {derivative, evaluate, pow, sqrt} from 'mathjs'

sqrt(-4)                       //=> 2i
pow([[-1, 2], [3, 1]], 2)      //=> [[7, 0], [0, 7]]
derivative('x^2 + x', 'x')     //=> 2 * x + 1
evaluate('1.2 * (2 + 4.5)')    //=> 7.8

5. date-fns (33.8k ⭐) • A modern JavaScript date utility library, provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.

import { format, formatDistance, formatRelative, subDays } from 'date-fns'

format(new Date(), "'Today is a' eeee")
//=> "Today is a Friday"

formatDistance(subDays(new Date(), 3), new Date(), { addSuffix: true })
//=> "3 days ago"

formatRelative(subDays(new Date(), 3), new Date())
//=> "last Friday at 7:26 p.m."

6. Day.js (45.9k ⭐) • A minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.

import dayjs from 'dayjs'

dayjs('2019-01-25').format('DD/MM/YYYY') //=> '25/01/2019'

7. Voca (3.6k ⭐) • A JavaScript library for manipulating strings, offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugify, latinise, sprintf’y, truncate, escape and much more.

import voca from 'voca';
voca.kebabCase('goodbye blue sky'); //=> 'goodbye-blue-sky'

8. clipboard.js (33.8k ⭐) • A modern approach to copy text to clipboard with no Flash, no frameworks, just 3kb gzipped. If you don’t want to modify your HTML, there’s a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.

<!-- Target -->
<input id="foo" value="https://byby.dev">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

9. Immer (27.1k ⭐) • A tiny package that allows you to work with immutable state in a more convenient way. It can be used in any context in which immutable data structures need to be used. For example in combination with React state, React or Redux reducers, or configuration management.

import { produce } from "immer";

const baseState = [
  {
    title: "Learn TypeScript",
    done: true,
  },
  {
    title: "Try Immer",
    done: false,
  },
];

const nextState = produce(baseState, (draftState) => {
  draftState.push({ title: "Tweet about it" });
  draftState[1].done = true;
});

/* =>
[
  { title: 'Learn TypeScript', done: true },
  { title: 'Try Immer', done: true },
  { title: 'Tweet about it' }
]
*/

10. Nano ID (23.6k ⭐) • A tiny (116 bytes minified and brotlied), secure (uses hardware random generator), URL-friendly, unique string ID generator for JavaScript. It uses a larger alphabet than UUID (A-Za-z0-9_-), so ID size was reduced from 36 to 21 symbols.

import { nanoid } from 'nanoid'
model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"