JavaScript Utility Libraries Cheatsheet

Introduction

JavaScript utility libraries are essential tools that help developers perform common tasks more efficiently, reduce boilerplate code, and improve code readability. These libraries offer a wide range of utility functions for tasks such as array manipulation, object handling, data transformation, and more. This cheatsheet provides a quick reference to some of the most popular JavaScript utility libraries and their key features.

1. Lodash

Lodash is one of the most popular JavaScript utility libraries, offering a wide range of functions for common programming tasks such as working with arrays, objects, and strings.

<table>
  <tr>
    <th>Function</th>
    <th>Description</th>
    <th>Example</th>
  </tr>
  <tr>
    <td><code>_.chunk(array, size)
    Splits an array into groups of the specified size.
    _.chunk(['a', 'b', 'c', 'd'], 2) => [['a', 'b'], ['c', 'd']]
  
  
    _.debounce(func, wait)
    Creates a debounced function that delays invoking the provided function until after the specified wait time.
    _.debounce(() => console.log('Hello'), 1000)
  
  
    _.cloneDeep(value)
    Creates a deep clone of the provided value.
    _.cloneDeep({ a: 1, b: { c: 2 } }) => { a: 1, b: { c: 2 } }
  
  
    _.merge(object, sources)
    Merges two or more objects into one, combining their properties.
    _.merge({ a: 1 }, { b: 2 }) => { a: 1, b: 2 }
  
  
    _.uniq(array)
    Creates a duplicate-free version of an array.
    _.uniq([1, 2, 2, 3, 4, 4]) => [1, 2, 3, 4]
  

2. Underscore.js

Underscore.js is a lightweight utility library similar to Lodash, providing useful functions for working with arrays, objects, and other data types.

<table>
  <tr>
    <th>Function</th>
    <th>Description</th>
    <th>Example</th>
  </tr>
  <tr>
    <td><code>_.each(list, iteratee)
    Iterates over a list, invoking the iteratee for each element.
    _.each([1, 2, 3], alert)
  
  
    _.map(list, iteratee)
    Creates a new array by applying the iteratee to each element in the list.
    _.map([1, 2, 3], num => num * 3) => [3, 6, 9]
  
  
    _.reduce(list, iteratee, memo)
    Reduces a list to a single value by iterating and combining elements.
    _.reduce([1, 2, 3], (sum, num) => sum + num, 0) => 6
  
  
    _.filter(list, predicate)
    Returns an array of elements that pass a truth test.
    _.filter([1, 2, 3, 4], num => num % 2 == 0) => [2, 4]
  
  
    _.findWhere(list, properties)
    Returns the first element that matches the specified properties.
    _.findWhere([{a: 1}, {a: 2}], {a: 2}) => {a: 2}
  

3. Moment.js

Moment.js is a popular library for parsing, validating, manipulating, and formatting dates in JavaScript.

<table>
  <tr>
    <th>Function</th>
    <th>Description</th>
    <th>Example</th>
  </tr>
  <tr>
    <td><code>moment().format(formatString)
    Formats a date as a string according to the specified format.
    moment().format('MMMM Do YYYY, h:mm:ss a') => September 20th 2024, 3:45:07 pm
  
  
    moment().add(number, unit)
    Adds a specified amount of time to a date.
    moment().add(7, 'days') => Moment object 7 days in the future
  
  
    moment().subtract(number, unit)
    Subtracts a specified amount of time from a date.
    moment().subtract(1, 'year') => Moment object 1 year ago
  
  
    moment().fromNow()
    Displays the time from now in a human-readable format.
    moment('2020-01-01').fromNow() => 3 years ago
  
  
    moment().diff(moment, unit)
    Calculates the difference between two dates.
    moment().diff(moment('2000-01-01'), 'years') => 24
  

4. Ramda

Ramda is a functional programming library for JavaScript developers, designed for better code composition and function handling.

<table>
  <tr>
    <th>Function</th>
    <th>Description</th>
    <th>Example</th>
  </tr>
  <tr>
    <td><code>R.compose(...functions)
    Composes functions from right to left.
    R.compose(Math.abs, R.add(1))(-5) => 4
  
  
    R.curry(fn)
    Returns a curried version of the provided function.
    R.curry((a, b) => a + b)(1)(2) => 3
  
  
    R.filter(predicate, list)
    Returns a new list containing only the elements that satisfy the predicate.
    R.filter(x => x % 2 === 0, [1, 2, 3, 4]) => [2, 4]
  
  
    R.map(fn, list)
    Applies the function to each element of the list.
    R.map(x => x * 2, [1, 2, 3]) => [2, 4, 6]
  
  
    R.reduce(reducer, initialValue, list)
    Reduces the list to a single value using the reducer function.
    R.reduce(R.add, 0, [1, 2, 3]) => 6
  

5. Date-fns

Date-fns is a modern JavaScript date utility library that provides over 200 functions for manipulating dates without modifying native JavaScript objects.

<table>
  <tr>
    <th>Function</th>


 <th>Description</th>
    <th>Example</th>
  </tr>
  <tr>
    <td><code>format(date, formatString)
    Formats the date according to the provided format string.
    format(new Date(), 'MMMM do, yyyy') => 'September 20th, 2024'
  
  
    addDays(date, amount)
    Returns a new date with the specified number of days added.
    addDays(new Date(), 10) => Date object 10 days in the future
  
  
    differenceInDays(dateLeft, dateRight)
    Returns the number of days between two dates.
    differenceInDays(new Date('2024-09-20'), new Date('2024-09-10')) => 10
  
  
    isBefore(date, dateToCompare)
    Checks if the first date is before the second one.
    isBefore(new Date('2024-09-10'), new Date('2024-09-20')) => true
  
  
    parse(dateString, formatString, referenceDate)
    Parses a date string according to the provided format string.
    parse('20th September 2024', 'do MMMM yyyy', new Date()) => Date object for 20th September 2024
  

Conclusion

This cheatsheet covers some of the most popular JavaScript utility libraries, providing a quick reference to key functions and their usage. These libraries help streamline your development process, reduce code duplication, and enhance the functionality of your JavaScript applications.