Hi, I'm Tuan, a Full-stack Web Developer from Tokyo 😊. Follow my blog to not miss out on useful and interesting articles in the future.
Have you ever heard of first-class functions in JavaScript? No, they're not some exclusive club for elite functions – they're just functions that can be treated like any other type of data in your code. This may not sound like a big deal, but trust us – it opens up a whole world of possibilities for writing clean, efficient, and reusable code.
In this article, we'll dive into what makes a function a "first-class citizen" in JavaScript, and give you five real-world examples of how you can use this powerful feature to level up your coding skills.
What are First-Class Functions?
In JavaScript (and many other programming languages), functions are considered "first-class citizens" when they can be assigned to variables, passed as arguments to other functions, or returned as values from functions.
This may seem a bit confusing at first, so let's break it down with a few examples.
Assigning Functions to Variables
In JavaScript, you can assign a function to a variable just like you would any other value. For example:
const addTwoNumbers = function(x, y) { return x + y;
};
Here, we've created a function called addTwoNumbers that takes two arguments, x and y, and returns their sum. We've then assigned this function to a variable called addTwoNumbers.
Passing Functions as Arguments
One of the most powerful ways to use first-class functions is to pass them as arguments to other functions. This is known as a "higher-order function".
For example, let's say we have an array of numbers and we want to find the sum of all the even numbers. We could do this using a higher-order function and a helper function like so:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const isEven = function(num) { return num % 2 === 0;
}; const sum = function(accumulator, currentValue) { return accumulator + currentValue;
}; const evenSum = numbers.filter(isEven).reduce(sum); console.log(evenSum); // 30
Here, we've created a higher-order function called filter that takes an array and a function as arguments. The function passed to filter (in this case, isEven) is used to test each element in the array, and only the elements that return true are kept in the new array.
We've also created a function called sum that takes two arguments, an accumulator and a current value, and returns their sum. This function is passed to another higher-order function called reduce, which iterates over the array and applies the sum function to each element, starting with an accumulator value of 0.
Returning Functions as Values
You can also return functions as values from other functions in JavaScript. This can be useful for creating functions that generate or modify other functions.
For example, let's say we want to create a function that returns a new function that multiplies its argument by a specified number. We could do this like so:
const multiplier = function(x) { return function(y) { return x * y; };
}; const double = multiplier(2);
const triple = multiplier(3); console.log(double(4)); // 8
console.log(triple(4)); // 12
Here, we've created a function called multiplier that takes a single argument, x, and returns a new function that takes a second argument, y, and returns the product of x and y. We've then created two new functions, double and triple, by calling multiplier with different arguments.
Example
Now that we've covered the basics of first-class functions, let's take a look at five examples of how they can be used to make your code more powerful and expressive.
Partial Function Application
Partial function application is a technique for creating a new function by partially applying (or "pre-filling") some of the arguments of an existing function. This can be useful for creating specialized versions of functions or for adapting functions to work with other libraries or frameworks.
For example, let's say we have a function called add that takes two arguments and returns their sum. We could create a partially applied version of this function that always adds 10 to its argument like so:
const add = function(x, y) {
return x + y;
}; const add10 = add.bind(null, 10); console.log(add10(5)); // 15
Here, we've used the bind method to create a new function called add10 that is identical to the original add function, except that the first argument is always set to 10. This allows us to create a specialized version of the add function that is tailored to a specific use case.
Function Composition
Function composition is the process of combining multiple functions to create a new function that performs all the steps in a single function call. This can be useful for creating more modular and reusable code, as well as for simplifying complex algorithms.
For example, let's say we have two functions, multiply and add, that perform simple math operations. We could use function composition to create a new function called calculate that performs both operations in a single call like so:
const multiply = function(x, y) {
return x * y;
}; const add = function(x, y) {
return x + y;
}; const calculate = function(x, y) {
return add(multiply(x, y), x);
}; console.log(calculate(2, 3)); // 7
Here, we've created a function called calculate that takes two arguments, x and y, and returns the result of calling multiply with x and y as arguments, and then calling add with the result of multiply and x as arguments. This allows us to combine the functionality of both functions into a single, more reusable function.
Memoization
Memoization is a technique for improving the performance of recursive or expensive functions by storing the results of function calls in a cache and reusing them when possible. This can be useful for optimizing code that performs the same calculations multiple times or for improving the efficiency of algorithms that perform a lot of repeated calculations.
For example, let's say we have a function called fibonacci that calculates the nth number in the Fibonacci sequence. We could use memoization to improve the performance of this function like so:
const fibonacci = function(n) { if (n <= 1) { return n; } if (!fibonacci.cache) { fibonacci.cache = {}; } if (fibonacci.cache[n]) { return fibonacci.cache[n]; } const result = fibonacci(n - 1) + fibonacci(n - 2); fibonacci.cache[n] = result; return result;
}; console.log(fibonacci(10)); // 55
Here, we've added a cache object to the fibonacci function that stores the results of previous function calls. Whenever the function is called, it first checks the cache to see if the result has already been calculated. If it has, the function returns the cached result; if not, it calculates the result and stores it in the cache for future use. This allows us to greatly improve the performance of the fibonacci function by avoiding unnecessary calculations.
Currying
Currying is a technique for creating a new function by "pre-filling" some of the arguments of an existing function. This can be useful for creating specialized versions of functions or for adapting functions to work with other libraries or frameworks.
For example, let's say we have a function called add that takes two arguments and returns their sum. We could create a curried version of this function that takes one argument at a time like so:
const add = function(x) { return function(y) { return x + y; };
}; const add10 = add(10); console.log(add10(5)); // 15
Here, we've created a curried version of the add function called add10 that takes a single argument, y, and returns the sum of y and 10. This allows us to create a specialized version of the add function that is tailored to a specific use case.
Custom Iterators
Custom iterators are functions that can be used to iterate over a specific data structure or collection of data in a custom way. This can be useful for creating specialized versions of built-in functions like map and reduce, or for implementing custom data structures that behave like arrays or objects.
For example, let's say we have a linked list data structure and we want to create a custom iterator that traverses the list from head to tail. We could do this like so:
class LinkedList { constructor(head, tail) { this.head = head; this.tail = tail; }
} LinkedList.prototype[Symbol.iterator] = function*() { let current = this.head; while (current) { yield current.value; current = current.next; }
}; const list = new LinkedList( { value: 1, next: { value: 2, next: { value: 3, next: null } } }, { value: 3, next: null }
); for (const value of list) {
console.log(value);
} // Output: 1, 2, 3
Here, we've created a class called LinkedList that represents a linked list data structure. We've then added a custom iterator function to the LinkedList.prototype using the Symbol.iterator symbol. This function uses a generator function to yield the values of the linked list nodes one at a time, starting with the head node and ending with the tail node.
We can then use a for...of loop to iterate over the list object and log the values of each node to the console. This allows us to easily and efficiently traverse a linked list using the built-in for...of loop syntax.
Conclusion
First-class functions are a powerful feature of JavaScript that allow you to treat functions like any other type of data in your code. Whether you're using them to create higher-order functions, optimize performance, or implement custom data structures, they offer a wealth of possibilities for writing clean, efficient, and reusable code.
As always, I hope you enjoyed this article and learned something new. Thank you and see you in the next articles!
If you liked this article, please give me a like and subscribe to support me. Thank you. 😊