Underscore Js Library

By /
underscore js

In this tutorial, we will deliver into underscore library of JavaScript and see how to use them in your programs.

What is Underscore.js?

Underscore.js is a popular JavaScript utility library that provides helpful functions for working with arrays, objects, functions, and more. performing common tasks in a concise and efficient way. Learn about Javascript basics.

It is used for several reasons like:

  • Having a range of utility functions for common tasks like array manipulation, object iteration, and function handling
  • Code Readability and Expressiveness nature provides developers to write more readable and expressive code
  • Backward Compatibility
  • Familiarity and Community Support

However, it’s worth noting that with the advent of ES6 and newer JavaScript features, many of the functionalities provided by Underscore.js are now available natively in JavaScript, and you may not need to use a utility library like Underscore.js in modern JavaScript projects.

key features of Underscore.js

Collection manipulation: Underscore.js provides a rich set of functions for manipulating arrays and objects, including functions for filtering, mapping, reducing, and sorting collections.

Function handling: Underscore.js includes utility functions for working with functions, such as debounce, throttle, and memoize, which can help with optimizing performance and controlling the execution of functions.

Template rendering: Underscore.js includes a simple template rendering engine that allows you to interpolate data into HTML templates, making it easier to generate dynamic content.

Utility functions: Underscore.js includes various utility functions for working with strings, numbers, dates, and other data types, such as functions for checking data types, deep cloning objects, and generating unique IDs.

Chaining: Underscore.js supports chaining of function calls, allowing you to chain together multiple operations in a concise and readable way, which can make your code more expressive and efficient.

Working with underscore.js

1.) To start working with underscore js, you first need to install it in your environment. You can install Underscore.js using a package manager such as npm or yarn, or by including the library directly in your HTML file with a script tag. You can run the following command in your project directory if you want to install it through npm:

npm install underscore

2.) You need to import the underscore library in your project like:

const _ = require('underscore'); // CommonJS syntax
// or
import _ from 'underscore'; // ES6 syntax

If you are using Underscore.js directly in the browser without a module bundler, you can include it in your HTML file with a script tag:

<script src="path/to/underscore.js"></script>

3.) Now, you can start using its functions in your JavaScript code.

Underscore.js provides a variety of functions for working with arrays, objects, functions, and other data types. You can use these functions to perform common tasks such as filtering, mapping, reducing, sorting, and more. Apart from various useful functionalities in underscore.js library, we are discussing only _.filter, _.reduce and _.chain

Here’s an example that uses Underscore.js to filter an array of numbers and calculate their sum:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = _.filter(numbers, num => num % 2 === 0);
const sum = _.reduce(evenNumbers, (acc, num) => acc + num, 0);
console.log(sum);
Output: 6

Underscore.js allows you to chain multiple function calls together in a concise and readable way. You can use the _.chain() function to create a wrapped object that supports chaining, and then chain multiple Underscore.js functions together. Here’s an example:

const numbers = [1, 2, 3, 4, 5];
const sum = _.chain(numbers)
  .filter(num => num % 2 === 0)
  .reduce((acc, num) => acc + num, 0)
  .value();
console.log(sum);
Output 6

There are many other functionalities under underscore.js library. You can visit its official documentation of underscore.js for more.

Related posts

JavaScript Confirm() Method
For Each Method Javascript
JavaScript Array slice()
setTimeout Javascript