web-development front-end-development date-manipulation array-manipulation ramda date-fns javascript-functions javascript-cheatsheet functional-programming javascript-tools
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.
| Function | Description | Example |
|---|---|---|
_.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.
| Function | Description | Example |
|---|---|---|
_.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.
| Function | Description | Example |
|---|---|---|
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.
| Function | Description | Example |
|---|---|---|
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.
| Function | Description | Example |
|---|---|---|
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.
Comments
Please log in to leave a comment.