What is Method Chaining in JavaScript?

09/30/2021

Contents

In this article, you will learn about method chaining in JavaScript.

Method chaining in JavaScript

Method chaining is a popular programming pattern used in JavaScript and many other object-oriented languages. It allows developers to write more concise and readable code by chaining together multiple method calls on the same object.

Method chaining involves calling a series of methods on an object in a single statement, where the output of one method becomes the input of the next method. This allows for a fluent, chain-like syntax that can help make code more readable and expressive.

In JavaScript, method chaining is often used with libraries such as jQuery, Lodash, and D3.js, which provide a wide range of methods that can be chained together to manipulate and traverse DOM elements, manipulate data, and perform other tasks.

Here is an example of method chaining in JavaScript:

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .sort((a, b) => a - b);
console.log(filteredNumbers); // Output: [4, 8]

In this example, we start with an array of numbers and then use the filter() method to filter out all the odd numbers. The resulting array is then passed to the map() method, which doubles each number in the array. Finally, we use the sort() method to sort the resulting array in ascending order.

Another example of method chaining in jQuery:

$('p')
  .css('color', 'red')
  .slideUp(2000)
  .slideDown(2000);

In this example, we select all <p> elements on the page and then use the css() method to change their color to red. We then use the slideUp() and slideDown() methods to animate the elements by sliding them up and down.