"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
JavaScript offers a powerful set of built-in functions, including map(), filter(), and reduce(). If you've been programming for a while, you may already be familiar with these terms. I first encountered them in a sessional exam question during my 3rd semester in Python programming, and now they're second nature to me. In this blog, we'll explore these functions in-depth, and by the end, you'll have a solid understanding of how they work and how to use them effectively. So, let's dive into the main content!
These three functions - map(), filter(), and reduce() - are designed to work with arrays. map() and filter() share some similarities, but reduce() works differently from the other two. It's important to note that all three of these functions require a callback function as a parameter.
map()
'map()' is a built-in function in JavaScript that allows you to transform each element of an array according to a given function, and returns a new array with the transformed elements.
Let's understand this with the help of an example:
In this example, the callback function takes in number as an argument, and returns the square of number using the expression number * number. The map() function then applies this callback function to each element of the numbers array, creating a new array with the squared values. The value returned by the callback function is added to the new array created by map() function.
Note that map() does not modify the original array. It only creates a new array with the transformed elements.
Don't use map() method, if you just need to iterate through an array. Start using forEach or for...of method, if you just want to iterate through an array.
filter()
As the name suggests, it allows you to filter elements from an array based on a condition and returns a new array with the filtered elements.
Let's understand this with the help of an example:
In this example, the callback function takes in number as an argument, and returns true if number is odd (i.e., not divisible by 2), and false otherwise. The filter() function then applies this callback function to each element of the numbers array, creating a new array with only the odd numbers.
Note that filter() does not modify the original array. It only creates a new array with the filtered elements.
reduce()
'reduce()' function is used to transform an array into a single value. It executes a provided callback function on each element of the array, resulting in a single output value.
The reduce() function takes two arguments: a callback function and an optional initial value. The callback function is executed for each element of the array and takes two arguments: an accumulator (which holds the current accumulated value), the current element, the current index, and the original array. The callback function returns a new accumulated value, which is passed as the accumulator to the next iteration of the loop.
Here's an example that demonstrates how the reduce() function works:
In this example, reduce() is used to calculate the sum of all the elements in the numbers array. The reduce() function starts by setting the initial value of the accumulator to the first element of the array (since we did not provide an initial value). The callback function is then executed for each element of the array, adding the current element to the accumulator, and returning the new accumulated value. The final value of the accumulator is the sum of all the elements in the array.
It's important to note that you can provide an initial value as the second argument to the reduce() function. This initial value will be used as the starting value for the accumulator. If you don't provide an initial value, reduce() will use the first element of the array as the initial value of the accumulator and start iterating from the second element.
Here's an example that demonstrates how to use an initial value:
In this example, we provided an initial value of 10 to the reduce() function. The callback function is then executed for each element of the array, adding the current element to the accumulator, and returning the new accumulated value. The final value of the accumulator is the sum of all the elements in the array, plus the initial value of 10.
Wrap-up
These built-in array methods have a wide range of use cases, and mastering them will be a valuable asset on your programming journey. By understanding and effectively using these functions, you can improve the efficiency and functionality of your JavaScript code.
I hope this blog has provided you with a clear understanding of these functions and their applications.
If you enjoyed this article and want to be a part of this amazing journey, don't forget to follow me on Twitter for more content like this!