Key takeaways:
The map() method applies a function to each array element, creating a new array with the returned values. It’s ideal for tasks like transforming data, calculating square roots, or generating ASCII values.
The reduce() method processes an array to produce a single cumulative value. Common applications include summing array values, flattening nested arrays, or grouping objects by properties.
JavaScript array methods like map() and reduce() enhance data management by allowing developers to modify, query, and organize arrays efficiently without altering the original data structure.
These methods can simplify complex operations, such as counting array elements that satisfy specific conditions or aggregating data in multi-dimensional arrays.
Ever struggled with transforming or summarizing data in JavaScript? Loops can be tedious, and writing custom functions for every transformation feels inefficient. That’s where JavaScript’s built-in array methods—map() and reduce()—come in. These two methods streamline data manipulation, making our code more readable and concise. This blog will discuss how to use them effectively with practical examples.
Let’s dive in!
In JavaScript, arrays are ordered collections of values accessible via numerical indexes. Unlike objects, which use named keys, arrays simplify data storage when order matters. They are flexible, allowing dynamic resizing and built-in methods for efficient data manipulation.
Arrays are easy to declare in JavaScript. Below, we create an array of fruit types and store them orderly.
var fruit = [
"Apple",
"Banana",
"Kiwi",
"Orange"
];
Arrays in JavaScript have special features that make them particularly useful, including:
If you are a beginner and want to learn about JavaScript, check out the Educative’s course below. It will start from the basics of JavaScript and lead you to mastery.
Learn JavaScript
JavaScript is a versatile language essential for web development, working alongside HTML and CSS to build both simple and complex web applications. This course offers a comprehensive introduction to JavaScript for beginners, starting with fundamental concepts like problem-solving and simple JavaScript programs. Through interactive exercises, challenges, and quizzes, learners will master control structures, loops, strings, arrays, and functions. By the end of this course, you'll have solid problem-solving skills, a deep understanding of JavaScript programming, and practical experience in writing clean, efficient code. This knowledge will prepare you for a successful career as a JavaScript developer and significantly enhance your employability in the tech industry.
Array properties define specific attributes of an array, such as its size or structure. These are usually static values that describe or affect the array’s behavior. For example:
length: Returns the number of elements in the array.
prototype: Provides shared methods and properties for all array instances.
Properties allow you to query or adjust key characteristics of an array without extra effort.
Array methods, conversely, are actions or functions that you can apply to an array to manipulate data. For example:
push(): Adds one or more elements to the end of the array.
pop(): Removes the last element from the array.
These methods simplify modifying, accessing, and organizing array data dynamically.
Functions are a set of instructions that carry out a task. They allow us to reuse code anywhere in the program.
Why does it matter?
With these tools, you don’t need to create custom objects or write repetitive code. Array methods and properties provide a robust framework for handling data efficiently.
Now, we’ll examine two powerful JavaScript array methods—map() and reduce()—and see how they simplify common data operations.
The map() method creates a modified version of an array by applying a callback function to each element. It returns a new array containing the results of the function applied to every element in the original array without altering the original array.
The syntax of the method is as follows:
array.map(function(currentValue, index, arr), thisValue)
The map() method accepts two parameters:
function(currentValue, index, arr): This parameter is required to run on each array element. It contains three parameters: currentValue, index, and arr.
thisValue: This optional parameter represents the value to be used as this when executing the callback function. If not provided, undefined is used as the default value.
The map() method applies a callback function to each element of an array and returns a new array with the results. The function passed to map() receives arguments in the following order:
function callbackfn(value: any, index: number, array: any[])
For each element, the callbackfn will be passed with its value as the first argument, its index as the second argument, and the array as the third argument. This callbackfn function takes between 0 and 3 arguments.
Finally, the map method returns a new array with all the returned values from the callbackfn function. Check out an example below:
var arr = [10, 20, 30, 40, 50]; // initialize an array and assign it to arrvar arr1 = arr.map(a => a * 2); // double the element in the arrayconsole.log("arr:",arr); // print original arrayconsole.log("doubled array:",arr1); // print doubled array
Note: You can see that the
map()method maps the arrow function to each element and returns a new array. The original array remains unchanged.
There are many uses of map() in your JavaScript code. Let’s break down the most common ones.
Below, our code shows how to use this method on a String to generate an array of bytes in ASCII encoding.
// Assign the map() method from Array.prototype to a variablelet map = Array.prototype.map;/*** Use map.call() to apply the map() method to a string* JavaScript treats strings as array-like, allowing us to use map() on them* Each character is mapped to its ASCII (char code) value*/let a = map.call('Hello World', function (x) {return x.charCodeAt(0); // Convert each character to its ASCII value});// Print the array of ASCII valuesconsole.log(a);
Below, our code takes an array of numbers and creates a new array with the square roots of each number.
// Initialize an array of numberslet numbers = [3, 25, 100];/*** Use the map() method to create a new array* where each number is replaced by its square root*/let roots = numbers.map(function(num) {return Math.sqrt(num); // Calculate the square root of each element});// Print the new array containing square rootsconsole.log(roots);
Below, our code shows how map() can be used alongside a function with one argument. The argument will be assigned automatically from each element of the array.
// Initialize an array of numberslet numbers = [3, 25, 100];/*** Use the map() method to create a new array* where each number is doubled*/let doubles = numbers.map(function(num) {return num * 2; // Multiply each element by 2});// Print the new array with doubled valuesconsole.log(doubles);
Tips: As map() builds a new array, you should not use this method if:
You are not using the array that is returned.
You are not returning any value from the callback.
The reduce() method reduces the array to a single value from left to right. This method leaves the original array unchanged.
The syntax of the method is as follows:
arr.reduce(<function>);
The reduce() method iterates through an array, applying a function to each element and accumulating a single result. It takes the return value from the previous iteration and uses it as input for the next, progressively combining all elements into a final value. The method passes arguments to the callback function in the following order:
function callbackfn(prev: any, curr: any, index: number, array: number[])
For each element, the callbackfn will be passed with the previous callbackfn function’s return value as the first argument and the element’s value as the second argument. This is followed by the index of the element as the third argument. Lastly, the array itself is taken as the fourth argument.
The callbackfn function returns a value that becomes the accumulator for the next iteration. If the array has only one value, that value is returned. For an empty array, an error is thrown.
Let’s learn more about reduce with an example below:
var arr = [10, 20, 30, 40, 50]; // Initialize an array and assign it to arrvar val = arr.reduce((prev, curr) => prev + curr); // Reduce element to sumconsole.log("arr:",arr); // Print original arrayconsole.log("reduced val:",val); // Print element returned by reduce
Here, the arrow function takes the previous value prev and adds it to the value iterated in the array curr. The reduce method sums up the entire array.
Note: We can use the
reduceRightmethod to apply the reduce method in the opposite direction.
// Initialize an array with valuesvar arr = [10, 20, 30, 40, 50];// Use reduce() to sum all elements in the array (left to right)var sum = arr.reduce((prev, curr) => prev + curr, 0);// Print the original arrayconsole.log("Original Array:", arr);// Print the reduced value (sum of array elements)console.log("Sum using reduce():", sum);// Use reduceRight() to sum all elements in the array (right to left)var sumRight = arr.reduceRight((prev, curr) => prev + curr, 0);// Print the reduced value using reduceRight()console.log("Sum using reduceRight():", sumRight);
The below code uses the reduce() method to flatten a nested array into a single-level array:
// Initialize a nested arrayvar nestedArray = [[0, 1], [2, 3], [4, 5]];// Use reduce() to flatten the array from left to rightvar flattened = nestedArray.reduce((prev, curr) => prev.concat(curr), []);// Print the original nested arrayconsole.log("Nested Array:", nestedArray);// Print the flattened arrayconsole.log("Flattened Array (Left to Right):", flattened);// Use reduceRight() to flatten the array from right to leftvar flattenedRight = nestedArray.reduceRight((prev, curr) => prev.concat(curr), []);// Print the flattened array using reduceRight()console.log("Flattened Array (Right to Left):", flattenedRight);
The code below groups an array of objects by a specified property (age) using the reduce() method to create an object where keys represent property values and values are arrays of corresponding objects.
// Initialize an array of people objects with name and age propertieslet people = [{ name: 'Matt', age: 25 },{ name: 'Asma', age: 23 },{ name: 'Cami', age: 29 }];/*** Function to group objects in an array based on a specified property* @param {Array} objectArray - The array of objects to group* @param {string} property - The property to group objects by* @returns {Object} - An object where keys are unique property values, and values are arrays of matching objects*/function groupBy(objectArray, property) {return objectArray.reduce(function (acc, obj) {let key = obj[property]; // Extract the property value for groupingif (!acc[key]) { // If key doesn't exist in accumulator, initialize an empty arrayacc[key] = [];}acc[key].push(obj); // Push the current object into the corresponding arrayreturn acc;}, {}); // Initialize accumulator as an empty object}// Group the people array by the 'age' propertylet groupedPeople = groupBy(people, 'age');// Print the grouped resultconsole.log(groupedPeople);
Now, let’s learn an example of how we can use the two methods together to make certain tasks easier. Often, we need to count array elements that satisfy a certain condition. Here’s how it’s done:
The final output is a count of elements that satisfy a given condition.
var arr = ['Hello', 1, true, NaN, 'Bye']; // Initialize an array of elementsvar countArr = arr.map(ele => typeof ele === 'string' ? 1 : 0); // map to 0 and 1var sum = countArr.reduce((prev, curr)=> prev + curr); // reduce for sumconsole.log("arr:",arr); // Print original arrayconsole.log("array from map:", countArr); // Print array returned from map methodconsole.log("number of Strings:",sum); // Print number of strings
On line 2, we apply the map() method to transform each array element into 1 if it is a string and 0 otherwise. This creates a new array of ones and zeroes.
On line 3, we use the reduce() method to sum up the values in this new array. Since each string in the original array was mapped to 1, the sum effectively represents the total count of string elements in the array assigned to arr.
Note: We can also use these methods to find the number of elements in a two-dimensional array.
JavaScript’s map() and reduce() methods are powerful tools for transforming and aggregating data with minimal effort. Whether you need to modify each element in an array, sum values, flatten nested arrays, or even group objects dynamically, these methods provide elegant, readable, and efficient solutions.
By leveraging map(), you can create new arrays with transformed data effortlessly, while reduce() enables you to accumulate values into a single result. Combined, they become even more versatile—helping you solve complex problems with clean and maintainable code.
The next step? Start experimenting! Try using map() and reduce() in your JavaScript projects. Mastering these methods will significantly enhance your coding skills and efficiency, whether working with APIs, building web applications, or analyzing data.
To deepen your knowledge, explore these related blogs:
TypeScript vs. JavaScript: What’s the difference?
Looking to enhance your JavaScript skills further? Check out Educative’s JavaScript courses for hands-on lessons, challenges, and quizzes to accelerate your learning journey.
Some of the latest courses available on our platform include:
What do map(), filter(), and reduce() methods do in JavaScript?
How do you reduce an array to a map?
Can map() return undefined values?
How is map() different from forEach()?
Can map() skip elements in an array?
Do I need to provide an initial value to reduce()?
Can reduce() handle an empty array?
Free Resources
