Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What is function chaining in JavaScript?
Function chaining is a technique that allows you to call multiple methods on the same object in sequence using dot notation. This makes code more concise and improves readability by eliminating the need to repeatedly reference the same object.
How Function Chaining Works
For function chaining to work, each method must return the object itself (typically using return this). This allows the next method in the chain to be called on the returned object.
Without Function Chaining
In this example, the methods don't return this, so chaining is not possible:
<html>
<body>
<script>
var Calculator = function(){
this.value = 0;
this.add = function(num){
this.value += num;
// No return statement - chaining not possible
};
this.subtract = function(num){
this.value -= num;
// No return statement - chaining not possible
};
this.print = function(){
document.write(this.value);
document.write("<br>");
}
}
var calc = new Calculator();
// Individual method calls work fine
calc.add(5);
calc.subtract(2);
calc.print(); // Outputs: 3
// Attempting to chain methods fails
document.write("Chaining result: ");
try {
calc.add(10).subtract(3).print(); // This will throw an error
} catch(e) {
document.write("Cannot chain - methods return undefined");
}
</script>
</body>
</html>
3 Chaining result: Cannot chain - methods return undefined
With Function Chaining
By adding return this to each method, we enable chaining:
<html>
<body>
<script>
var Calculator = function(){
this.value = 0;
this.add = function(num){
this.value += num;
return this; // Enable chaining
};
this.subtract = function(num){
this.value -= num;
return this; // Enable chaining
};
this.multiply = function(num){
this.value *= num;
return this; // Enable chaining
};
this.print = function(){
document.write("Result: " + this.value + "<br>");
return this; // Even print can be chained
}
}
var calc = new Calculator();
// Method chaining in action
calc.add(10).subtract(3).multiply(2).print(); // 10 - 3 = 7, 7 * 2 = 14
// Can continue chaining after print
calc.add(6).print(); // 14 + 6 = 20
</script>
</body>
</html>
Result: 14 Result: 20
Built-in Examples of Function Chaining
Many JavaScript built-in objects support chaining. Here's an example with arrays:
<html>
<body>
<script>
var numbers = [1, 2, 3, 4, 5, 6];
var result = numbers
.filter(num => num % 2 === 0) // Get even numbers: [2, 4, 6]
.map(num => num * 2) // Double each: [4, 8, 12]
.reduce((sum, num) => sum + num, 0); // Sum them: 24
document.write("Chained result: " + result);
</script>
</body>
</html>
Chained result: 24
Benefits of Function Chaining
| Aspect | Without Chaining | With Chaining |
|---|---|---|
| Code Lines | Multiple lines | Single line |
| Readability | Repetitive object references | Fluent, readable flow |
| Performance | Multiple variable lookups | Single object reference |
Conclusion
Function chaining improves code readability and reduces repetition by allowing multiple method calls in sequence. The key is returning this from each method to maintain the chain.
4K+ Views
