Sign In
Sign In

How to Use JavaScript Array map()

How to Use JavaScript Array map()
Emmanuel Oyibo
Technical writer
JavaScript
16.10.2024
Reading time: 12 min

Arrays play a crucial role in JavaScript programming. They let you store and manipulate collections of data with ease. One powerful method for working with arrays is the map() function. The map() method creates a new array by applying a given function to each element of the original array.

Simply put, map() takes your array, processes each item through a function you provide, and returns a new array with the transformed items. It doesn't change the original array, which helps prevent unintended side effects in your code. 

In this guide, we'll explore the map() function, how it works, and how you can use it in your JavaScript projects.

Basic Syntax and Parameters of map()

The map() function is a built-in method in JavaScript that you can use on arrays. It creates a new array by applying a function to each element of the original array.

Below is the syntax:

let newArray = originalArray.map(function(currentValue, index, array) {
  // return element to newArray
});

Or, using arrow function syntax:

let newArray = originalArray.map((currentValue, index, array) => {
  // return element to newArray
});

Let's break down the parameters:

  • currentValue: The current element being processed in the array.

  • index (optional): The index of the current element.

  • array (optional): The original array to which map() is being applied.

However, you must provide a callback function that tells map() how to transform each element. This function runs once for every item in the array. Importantly, map() does not modify the original array; instead, it returns a new array with the transformed elements.

For example, if you have an array of numbers and want to add 1 to each number, you can use map() like this:

let numbers = [1, 2, 3, 4, 5];
let incrementedNumbers = numbers.map(number => number + 1);
console.log(incrementedNumbers);

Output:

[ 2, 3, 4, 5, 6 ]

In this example, the map() function takes each number in the numbers array, adds 1 to it, and returns a new array called incrementedNumbers.

Using map() to Transform Array Elements

The map() method is helpful when you need to transform each element in an array. It applies a function to every item and returns a new array with the transformed elements. Let's explore how you can use map() to manipulate array data.

Let’s say you have an array of numbers, and want to double each number. Instead of writing a loop, you can achieve this with map() in a more concise way.

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(number => number * 2);
console.log(doubled);

Output:

[ 2, 4, 6, 8, 10 ]

In this example, numbers.map(number => number * 2) takes each element in the numbers array, multiplies it by two, and stores the result in a new array called doubled. The original numbers array remains unchanged.

You can also transform arrays of strings. Let's say you have an array of names and you want to convert them all to uppercase letters.

let names = ['alice', 'bob', 'charlie'];
let upperNames = names.map(name => name.toUpperCase());
console.log(upperNames);

Output:

[ 'ALICE', 'BOB', 'CHARLIE' ]

Here, map() applies the toUpperCase() method to each string in the names array, resulting in a new array upperNames with all names in uppercase.

Another practical use is when working with arrays of objects. For example, you might have an array of user objects and want to extract a specific property from each one.

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

let userNames = users.map(user => user.name);
console.log(userNames);

Output:

[ 'Alice', 'Bob', 'Charlie' ]

In this case, map() extracts the name property from each user object and creates a new array userNames.

Practical Examples of map()

The map() function really shines when working with real-world data. Let's see some practical examples to see how map() can simplify your JavaScript code.

Example 1: Converting Temperatures

Let’s assume you have an array of temperatures in Celsius and want to convert them to Fahrenheit. You can use map() to apply the conversion formula to each element.

let celsius = [0, 20, 30, 40];
let fahrenheit = celsius.map(temp => temp * 9/5 + 32);
console.log(fahrenheit);

Output:

[ 32, 68, 86, 104 ]

In this example, map() takes each temperature in the celsius array, converts it to Fahrenheit, and returns a new array called fahrenheit.

Example 2: Extracting Usernames from Emails

Imagine you have an array of email addresses and you want to extract the usernames.

let emails = ['alice@example.com', 'bob@example.com', 'charlie@example.com'];
let usernames = emails.map(email => email.split('@')[0]);
console.log(usernames);

Output:

[ 'alice', 'bob', 'charlie' ]

Here, map() processes each email address, splits it at the @ symbol, and extracts the username part.

Example 3: Applying Discounts to Products

If you have an array of product objects and need to apply a discount to each product's price, map() makes this task easy.

let products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];

let discountedProducts = products.map(product => {
  return {
    name: product.name,
    price: product.price * 0.9 // Apply a 10% discount
  };
});

console.log(discountedProducts);

Output:

[
  { name: 'Laptop', price: 900 },
  { name: 'Phone', price: 450 },
  { name: 'Tablet', price: 675 }
]

In this case, map() creates a new array discountedProducts with the discounted prices, leaving the original products array unchanged.

Example 4: Formatting Dates

If you have an array of date strings and want to format them into a more readable form.

let dates = ['2023-01-01', '2023-02-14', '2023-12-25'];
let formattedDates = dates.map(date => {
  let options = { year: 'numeric', month: 'long', day: 'numeric' };
  return new Date(date).toLocaleDateString(undefined, options);
});

console.log(formattedDates);

Output:

[ 'January 1, 2023', 'February 14, 2023', 'December 25, 2023' ]

Here, map() converts each date string into a Date object and formats it using toLocaleDateString().

Example 5: Generating HTML Elements

If you're working with the DOM, you can use map() to create an array of HTML elements.

let fruits = ['apple', 'banana', 'cherry'];
let fruitListItems = fruits.map(fruit => `<li>${fruit}</li>`);
console.log(fruitListItems);

Output:

[ '<li>apple</li>', '<li>banana</li>', '<li>cherry</li>' ]

You can then join these items and insert them into your HTML.

let fruits = ['apple', 'banana', 'cherry'];
let fruitListItems = fruits.map(fruit => `<li>${fruit}</li>`);

let fruitList = `<ul>${fruitListItems.join('')}</ul>`;
console.log(fruitList);

Output:

<ul><li>apple</li><li>banana</li><li>cherry</li></ul>

This demonstrates how map() can help generate dynamic content.

Chaining map() with Other Array Methods

The map() function becomes even more powerful when you chain it with other array methods like filter(), reduce(), or sort(). You can perform complex data transformations easily when you combine these methods.

Filtering and Mapping

Let’s say you have an array of numbers and you want to double only the even numbers.

let numbers = [1, 2, 3, 4, 5, 6];

let doubledEvens = numbers
  .filter(number => number % 2 === 0)
  .map(number => number * 2);

console.log(doubledEvens);

Output:

[ 4, 8, 12 ]

In this example, filter() first selects the even numbers from the numbers array. Then, map() doubles each of those numbers.

Mapping and Reducing

Imagine you have an array of objects representing products and want to calculate the total price of all products after applying a discount.

let products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 750 }
];

let totalDiscountedPrice = products
  .map(product => product.price * 0.9) // Apply a 10% discount
  .reduce((total, price) => total + price, 0);

console.log(totalDiscountedPrice);

Output:

2025

Here, map() creates a new array with the discounted prices. Then, reduce() sums up the prices to get the total.

Sorting Mapped Values

Imagine you have an array of strings and want to convert them to uppercase and then sort them alphabetically.

let fruits = ['banana', 'apple', 'cherry'];

let sortedFruits = fruits
  .map(fruit => fruit.toUpperCase())
  .sort();

console.log(sortedFruits);

Output:

[ 'APPLE', 'BANANA', 'CHERRY' ]

In this case, map() transforms each fruit name to uppercase, and sort() arranges them alphabetically.

Complex Data Transformation

Let’s assume you have an array of user objects, and you want to get a sorted list of active users' usernames.

let users = [
  { username: 'alice', active: true },
  { username: 'bob', active: false },
  { username: 'charlie', active: true }
];

let activeUsernames = users
  .filter(user => user.active)
  .map(user => user.username)
  .sort();

console.log(activeUsernames);

Output:

[ 'alice', 'charlie' ]

Here, you filter out inactive users, extract their usernames with map(), and sort the usernames alphabetically.

Handling Edge Cases with map()

While the map() function is powerful, handling edge cases is important to prevent unexpected behavior. Let's explore some common scenarios and how to manage them.

Dealing with Empty Arrays

If you apply map() to an empty array, it simply returns another empty array. There's no need to add extra checks for this case.

let emptyArray = [];
let result = emptyArray.map(item => item * 2);
console.log(result);

Output:

[ ]

Handling Undefined or Null Elements

When your array contains undefined or null values, map() will pass them to your callback function. You need to ensure your function can handle these values without throwing errors.

let values = [1, null, 3, undefined, 5];
let processedValues = values.map(value => {
  if (value === null || value === undefined) {
    return 0; // Assign a default value
  }
  return value * 2;
});
console.log(processedValues);

Output:

[ 2, 0, 6, 0, 10 ]

In this example, we check for null or undefined and assign a default value of 0 before performing the calculation.

Avoiding Holes in Arrays

Arrays can have holes if elements are deleted or uninitialized. The map() function skips these holes, which might lead to unexpected results.

let sparseArray = [1, , 3, , 5]; // Note the missing elements
let doubled = sparseArray.map(number => number * 2);
console.log(doubled);

Output:

[ 2, <1 empty item>, 6, <1 empty item>, 10 ]

To handle this, you can use the Array.from() method to create an array without holes before mapping.

let sparseArray = [1, , 3, , 5]; // Note the missing elements
let doubled = sparseArray.map(number => number * 2);

let denseArray = Array.from(sparseArray);
let doubledDense = denseArray.map(number => number * 2);
console.log(doubledDense);

Output:

[ 2, NaN, 6, NaN, 10 ]

Now, the missing elements are converted to undefined, and you can handle them accordingly.

Managing Asynchronous Operations

The map() function doesn't support asynchronous operations natively. To perform asynchronous tasks, consider using Promise.all() with map().

let urls = ['url1', 'url2', 'url3'];

let fetchPromises = urls.map(url => fetch(url));

Promise.all(fetchPromises)
  .then(responses => {
    // Handle responses
  })
  .catch(error => {
    // Handle errors
  });

Here, map() creates an array of promises, and Promise.all() waits for all of them to resolve.

Using map() with Callback Functions

The map() method relies on a callback function to process each element in an array. Let's explore different ways to use map() with callback functions.

Using Named Functions

You can pass a named function to map() for better readability, especially when the transformation logic is complex.

function doubleNumber(number) {
  return number * 2;
}

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(doubleNumber);

console.log(doubledNumbers);

Output:

[ 2, 4, 6, 8, 10 ]

In this example, the doubleNumber function is passed as the callback to map(). Each element in the numbers array is doubled, resulting in a new array doubledNumbers.

Using Anonymous Functions

Anonymous functions can be used directly within map() for simple transformations.

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers);

Output:

[ 1, 4, 9, 16, 25 ]

Here, an anonymous function computes the square of each number in the array.

Using Arrow Functions

Arrow functions offer a concise syntax and are commonly used with map().

let numbers = [1, 2, 3, 4, 5];
let tripledNumbers = numbers.map(number => number * 3);

console.log(tripledNumbers);

Output:

[ 3, 6, 9, 12, 15 ]

The arrow function number => number * 3 triples each number in the array.

Using Callback Functions with Multiple Parameters

The callback function can accept additional parameters like index and array, providing more context during the mapping process.

let numbers = [10, 20, 30, 40, 50];
let adjustedNumbers = numbers.map((number, index) => number - index * 2);

console.log(adjustedNumbers);

Output:

[ 10, 18, 26, 34, 42 ]

In this example, each number is adjusted based on its index in the array.

Using thisArg with map()

The map() method accepts an optional second argument called thisArg, which sets the value of this inside the callback function.

let multiplier = {
  factor: 2
};

let numbers = [1, 2, 3];
let scaledNumbers = numbers.map(function(number) {
  return number * this.factor;
}, multiplier);

console.log(scaledNumbers);

Output:

[ 2, 4, 6 ]

By passing multiplier as the thisArg, the callback function can access this.factor to scale each number.

Performance Considerations for map()

When using map(), it's important to consider performance. Since map() creates a new array, it consumes additional memory. Therefore, with very large arrays, this extra memory usage can affect your application's efficiency.

Furthermore, while map() offers clean and readable code, traditional loops like for or while loops might execute faster in performance-critical situations. If speed is crucial, consider using a loop instead of map().

Moreover, keep your callback functions simple. Complex operations inside the map() callback can slow down processing. To maintain optimal performance, aim for straightforward transformations.

Finally, use map() only when you need the new array it returns. If you're performing actions without needing the resulting array, methods like .forEach() are more appropriate. This avoids unnecessary memory allocation and enhances performance.

Conclusion

The JavaScript map() function is a powerful tool for array manipulation. By applying a function to each element, it creates a new array with transformed values, making tasks like data conversion and extraction straightforward. Understanding how to use map() effectively allows you to write cleaner, more efficient code.

JavaScript
16.10.2024
Reading time: 12 min

Similar

JavaScript

Looping through Objects’s Keys and Values in JavaScript

JavaScript, a user-friendly programming language with important components such as object keys and values, serves as a robust creator of dynamic and interactive web applications. Complex and constantly changing data require efficient iterating over the object's keys and values. It is precisely the 'iterating through object keys and values' concept, or simply JS looping through object keys and values that provides access and performs required actions. You can expand the functionality of your applications and manipulate data with skill once you have mastered these strategies. A fundamental ability for any JavaScript developer enhances the processing and manipulation of intricate data sets, increasing the flexibility and dynamic nature of your code. This cost-effective solution allows developers to readily access and change data without repeating code, even when the data is continually changing and updating. In this article, we’ll delve into various techniques and methods to loop through object keys and values in JS, so you’ll learn how to apply them in your code. Whether you are a beginner or an experienced developer, read on to discover how to improve your data manipulation skills and efficiently apply them in your own projects. Explore the world of looping through object keys and values in JavaScript. JavaScript Object: Key-Value Pairs Objects in JavaScript Before diving into the theory and practice, let's start with understanding what objects are in JavaScript. So, they are a collection of key-value pairs, where the key is a unique identifier and the corresponding value is any data type. They allow data to be stored and manipulated in a structured and organized way. Also they contain any number of key-value pairs with different data types. The loop through object feature in JS stands for creating complex objects, suitable for storing, sorting, filtering, searching and manipulating large amounts of data. Objects can have functions as their values, known as methods, which perform specific actions or operations on the object's data. New key-value pairs can be added to an object, existing values can be modified, or even deleted if required. Basic for loop through object keys and values in JS The JS for loop is commonly used for iterating through arrays and objects as well as for looping through object keys and values, especially to get access and manipulate specific properties within an object.  To start, learn the basic for loop method for looping through an array: for (var i = 0; i < array.length; i++) {// code to be executed} This for loop has three parts: the initialization (var i = 0) the condition (i < array.length) the increment (i++). The loop runs as long as the condition is true, and each time it loops, the i value is increased. This feature gives access to each element in the array with the help of the i index. To use a similar for loop to iterate through object keys and values, you should apply the for...in loop designed specifically for objects: for (var key in object) {// code to be executed} In this loop, the variable key takes on the value of each key in the object as it loops through the JS object. This feature gives access to the corresponding value for each key via object[key]. For instance, for an object called site with the properties web name, age, and occupation, each property and its value can be accessed via the for...in loop: var site = { web name: 'Hostman', age: 5, occupation: 'cloud service provider' }; for (var key in site) { console.log(key + ': ' + site[key]); } // Output: // name: Hostman // age: 5 // occupation: cloud service provider This means without knowing the precise names of the properties beforehand, the for...in loop provides quick access to all of the keys and values in an object. When working with big and complicated items, this is helpful. The for...in loop is also used to check if a specific property exists in an object, and modify its value by using the hasOwnProperty() method: for (var key in site) { if (site.hasOwnProperty(key)) { // code to be executed } } The for loop feature for iterating through object keys and values in JS provides quick access to the properties and the ability to manipulate them within an object. By understanding the syntax and usage of the feature, you can improve the functionality of working with objects and shorten your code. The Object.keys() method to loop through objects in JS The built-in Object.keys() method in JavaScript allows you to get an array of all the keys of a given object. The JS feature is designed to loop over all the properties of an object because it is a simple way to access and manipulate each key individually. The idea is to pass the object you want to get the keys from as a parameter, and the method returns an array of all the keys in that object. Static method syntax is called directly on the Object class, not on the object instance. That's why it got its name Object.keys(). The parentheses after the method name are used to pass the object from which you want to get the keys. For instance, for an object called site with properties such as web name, age, and occupation, apply the following Object.keys() method: Object.keys(site) The JS method will loop over the properties of the passed object and return an array of all keys. The keys in the array are arranged in the same order in which they appear in the object due to the fact that objects in JavaScript are unordered, meaning there is no guarantee that the properties will be returned in a particular order. However, the Object.keys() method ensures that the keys are returned in the order in which they were added to the object. The Object.values() method to loop through objects in JS The Object.values() method allows you to quickly access and retrieve all the values ​​of an object as an array, simplifying the way you manipulate and loop through an array of objects in JS. For instance, for an object called site that contains various properties such as web name, age, occupation, using the Object.values() method allows retrieving all the values of this object in the form of an array. The syntax is simple and consists of passing the object site as a parameter: const siteValues = Object.values(site); This feature will return an array with all the site object values in the same order as they are defined in the object. This array helps performing various operations, such as filtering or sorting the data. Combining Object.keys() and Object.values() for efficient object iteration in JavaScript A more effective method for looping through an object in JavaScript is to use the Object.keys() and Object.values() methods. While the second one gives an array of all the corresponding values, the first one returns an array of all the keys that are present in an object. When both approaches are used together, an object's keys and values can be accessed. For instance, for an object called site with properties like web name, age, occupation, apply the following code. const site = { web name: 'Hostman', age: 5, occupation: 'cloud service provider' }; const keys = Object.keys(site); const values = Object.values(site); console.log(keys); // Output: ['web name', 'age', 'occupation'] console.log(values); // Output: ['Hostman', 5, 'cloud service provider'] As a result of the synergy of both methods, two arrays were returned containing the keys and values of the site object. They are easily accessed and manipulated to perform any operation on the object, including loop through object properties in JS. The for...of method to loop through object in JS The for...of loop provides a simplified syntax compared to the traditional for...in loop, iterating over the values of an object while working with arrays, strings, and other iterable objects. The feature eliminates errors or bugs in code as there is no need for manual counting or using a counter variable. Automatically iterating over each element of the iterable object and assigning it to a variable improves the loop through object keys in JS. The feature can be used with any iterable object, regardless of its length or size, with a variable number of elements, such as arrays. For instance, if you want to print out each flower separately, use the for...of loop.  To start, declare the array of flowers: const flowers = ['rose', 'daisy', 'violet']; Next, apply the for...of loop to iterate over the elements in the flowers array and print out each flower: for (const flower of flowers) {console.log(flower);} In this code, the variable flower is automatically assigned to each element in the flowers array in every iteration of the loop, allowing the value of each flower to be accessed and printed without manually declaring and incrementing a counter variable. The Object.entries() method in JavaScript The Object.entries() method stands for efficient iteration through the keys and values of an object. Simple access to and manipulation of object properties eliminates the need for complex syntax or methods. It takes an object as a parameter and returns an array of arrays. Each inner array consists of two elements, where the first is the object's property key, and the second is the corresponding value. This is a useful feature to loop through an object and access both the keys and values at the same time in JS. For instance, for an object called site with properties such as web name, age, and occupation, apply the Object.entries() method to loop through this object and access both the keys and values. The syntax looks as follows: Object.entries(site); This will return an array of arrays with the following structure: [['web name', 'Hostman'], ['age', 5], ['occupation', 'cloud service provider']] Each inner array contains two elements, the key and value of the object property to access both of them in a single iteration. This method can be used in conjunction with a for loop to iterate through the array and perform any desired operations with the objects in JS. It also allows us to convert an object into an array of key-value pairs to manipulate or transform an object into a different data structure. For instance, apply the Object.entries() method to convert an object into a Map, which is a data structure with key-value pairs. To do this, use the following syntax: const map = new Map(Object.entries(site)); This will create a new Map with the same key-value pairs as the original object. The Object.getOwnPropertyNames() method in JavaScript The getOwnPropertyNames is a method that retrieves all of an object's own properties, including both enumerable and non-enumerable ones, but it excludes Symbol-keyed properties. Let’s try this method. First, we define an object.  const appConfig = { theme: 'dark', language: 'en' }; We can then add a non-enumerable internal property to the object.  // Add non-enumerable internal properties Object.defineProperty(appConfig, 'version', { value: '1.0.0', enumerable: false }); We can then use Object.getOwnPropertyNames(appConfig) to display the properties.  console.log(Object.getOwnPropertyNames(appConfig)); // Output: ["theme", "language", "version"] getOwnPropertyNames will display all internal properties, including hidden ones (version). We can then use the result to loop through the object and display the properties and their values. Object.getOwnPropertyNames(appConfig).forEach(key => { console.log(`${key}: ${appConfig[key]}`); }); // Output: // theme: dark // language: en // version: 1.0.0 The Reflect.ownKeys() method retrieves all own properties of an object, including string keys and symbol keys. By default, symbol keys are not visible for Object.keys() and Object.getOwnPropertyNames() methods. const plugin = { name: 'AuthPlugin', settings: { enable2FA: true, }, [Symbol('id')]: 'auth123', }; // Iterate over all keys Reflect.ownKeys(plugin).forEach(key => { console.log(`${String(key)}: ${plugin[key]}`); }); // Output: // name: AuthPlugin // settings: { enable2FA: true } // Symbol(id): auth123 Looping Through a Nested Object When a JavaScript object contains other objects as values, a simple loop won’t be enough to traverse the whole object. To resolve this issue, we can use recursion combined with the Object.keys().forEach() method.  Here is an example.  const nestedObject = { name: "Alice", details: { age: 25 } }; function traverse(obj) { Object.keys(obj).forEach(key => { if (typeof obj[key] === "object" && obj[key] !== null) { traverse(obj[key]); // Recursively handle nested objects } else { console.log(`${key}: ${obj[key]}`); } }); } traverse(nestedObject); // Output: // name: Alice // age: 25 Iterating Objects with Object.entries / Object.keys Conclusion Loop through object keys and values in JS provides quick access to data stored in objects for manipulation and makes a code more dynamic and flexible. In this tutorial we showed you the basic methods for looping through object keys and values. Mastering these techniques is essential for a developer looking to create complex and efficient applications. By constantly learning and exploring new techniques and resources, you will become more adept at working with objects in your code. Keep practicing and experimenting with different approaches to find the one that works best for your specific project.
25 August 2025 · 11 min to read
JavaScript

JavaScript Array Methods

Arrays in JavaScript are a data structure that stores various elements, often of the same type. Their main feature is storing multiple values in a single variable. Thanks to their integrated methods and properties, you can add, delete, process, or search the data based on your needs.  All array values are elements. In turn, they have their own index. Variables can be either of the same or different data types, allowing you to organize more complex data structures. Creating an array There are two ways to initialize an array: 1. Using a literal syntax. In this case, elements are listed inside square brackets and separated by commas.  const ExampleArr = [element0, element1, …, elementN]; 2. using the Array() constructor. Syntax: const ExampleArr = new Array(element0, element1[, …[, elementN]]);const ExampleArr = new Array(arrayLenght); In both methods, we pass elementN as parameters. These are the variables that create the set of ExampleArr values. ArrayLength is the number of elements. Their default value is not defined.  After creating the array, let’s fill it in. Let's create a set of values that stores employees' names. Using the first method: var EmployeeArr = [‘Alex’, ‘Bob’, ‘Oliver’]; Using the second one: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’); Access to array elements  To access an array element, we use square brackets with an integer value of its index inside them. Let's get the value of two elements of the previously created value set EmployeeArr: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);console.log (EmployeeArr[1]);  The index numbering starts from 0, which we should remember when referring to the N-th element. Its index will be N-1. In our case, it will equal 1. To change the value of an element, you need to assign a new value to the variable, as shown below: var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);EmployeeArr[1] = ‘Jack’; Now EmployeeArr contains 'Alex', 'Jack', and 'Oliver.' Now let's look at length, an important property that returns the length of an array in JavaScript. var EmployeeArr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);console.log (EmployeeArr.length);  The length of EmployeArr in our case will be 3. - Array methods Array methods in JavaScript allow developers to work with data more efficiently and conveniently. Their use will help with conversion, sorting, searching, adding or removing elements.  In this article, we'll look at most of the existing JavaScript array methods, grouped by their work logic. Adding and removing elements There are four main methods to add or remove elements from an array: push(), pop(), shift(), and unshift(). push() adds one or more elements to the end of the value set. pop() deletes the last element. shift() deletes the first element. unshift() adds one or more elements to the beginning. Let's look at examples. We'll indicate the output of each method in the comment. var arr = new Array(‘Alex’, ‘Bob’, ‘Oliver’);arr.push (‘Jack’); // ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’arr.unshift (‘Jacob’, ‘George’); //; ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’arr.pop (); // ‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’arr.shift (); // ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’ The pop() and shift() methods return the value of the deleted element, while push() and unshift() return the length of the modified array. In addition to the above methods, we should mention the universal splice() method. It allows you to insert, delete, or replace elements. Syntax of the splice() method: array.splice(startIndex, deleteCount, element1, element2, ...); Parameters:  startIndex is the index where the splice should begin. If this parameter exceeds the array length, the startIndex value will equal the length or take the difference between array.length and this number if a negative number is entered.  deleteCount is the number of elements to delete starting from startIndex. It can be equal to 0. In this case, nothing happens.  element1, element2, .... are the elements we add to the array (optional parameter). The splice() method returns the set of deleted values. In the example, let's look at several ways to apply splice(). The comments will specify the set of values after the method is executed. Below, we will remove two elements, starting with 3: var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);Dog.splice ( 2, 2 ); // ‘Beagle’, ‘Boxer’, ‘Dachshund’, ‘Dalmatian’ Now let's remove one element starting at 4 and add 'Doberman': var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);Dog.splice (3, 1, ‘Doberman’); // ‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Doberman’, ‘Dachshund’, ‘Dalmatian’ Iterating through an array The forEach() method is responsible for iterating array elements. arr.forEach(function callback(currentValue, index, array), thisValue); Parameters: callback is the main parameter, namely the callback function that will be executed once for each element. Its arguments are currentValue, index, array. currentValue is the element to be processed in the set. index is this element's index. array is the array of the selected element. thisValue is an optional parameter. It takes the value used as this when calling the function. The returned value is always undefined. Here are two examples: one using thisValue and one without it. The example without thisValue parameter: var Dog = new Array(‘Beagle’, ‘Boxer’, ‘Bulldog’, ‘Corgi’, ‘Dachshund’, ‘Dalmatian’);var NewDog = [ ];Dog.forEach (function (element) {NewDog.push (element);}) The result will be a new set of NewDog values that completely replicates Dog. Example with the thisValue parameter: var numbers = [1, 2, 3, 4, 5];var doubleNumbers = [ ];var myObject = {    double: function(element) {        return element * 2;    }};numbers.forEach (    function (element) {        doubleNumbers.push(this.double(element));     }, myObject); The result is a doubleNumbers set, which consists of numbers multiplied by two. Searching for an element in an array Such methods as indexOf(), lastIndexOf(), includes(), find(), findIndex(), and filter() help to search for items.  The indexOf() and lastIndexOf() methods search for the required value among all the elements and return its index at the first match. The former searches from the beginning of the array, while the latter searches from the end. Both methods will return -1 if the searched value is not found. Syntax of indexOf() and lastIndexOf() methods: array.indexOf( searchElement, fromIndex )array.lastIndexOf( searchElement, fromIndex ) The searchElement parameter is the same in both cases. It is the element we need to find. This is not the case with the fromIndex parameter. This is the starting index of the element to search for. When indexOf() is used, the fromIndex parameter defaults to zero. In the lastIndexOf() method, it is equal to array.length.  Let's try using these methods in the example below.  var Employee = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘George’, ‘Oliver’, ‘Jack’);Employe.indexOf (‘George’);Employe.lastIndexOf (‘George’); The result of the indexOf() method will be 1 because the first match occurred with an element whose index is 1. In the case of lastIndexOf(), the result will be 3. The next search method is includes(). It determines whether the set of values contains a certain element, returning true or false depending on the result. The syntax of the includes() method: array.includes(searchElement, fromIndex) The parameters are exactly the same as in the previously discussed indexOf() and lastIndexOf() methods. The only difference between them is the return value. The fromIndex parameter is 0 by default. Here's an example of using the includes() method: var Employe = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);Employe.includes (‘Alex’);Employe.includes (‘Jacob’, 3); The result in the first case will be true. In the second case, false. In practice, JavaScript often uses arrays of objects. In this case, you should search using the find() and findIndex() methods. arr.find(function callback(currentValue, index, array), thisValue); arr.findIndex(function callback(currentValue, index, array), thisValue);  Parameters of find() and findIndex() methods are similar to forEach(), so you can find their descriptions above. Let's look at an example of using the find() and findIndex() methods: var Employee = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);Employee.find (element => element == ‘Jacob’);Employee.findIndex (element => element == ‘Jacob’); The return value of the find() method is 'Jacob', and of the findIndex() method is 0. The find() and findIndex() methods are suitable for searching one object. If the task is to find several objects, we can use another method: filter().  Syntax of the filter() method: var filteredArray = arr.filter(function(currentValue, index, array), thisValue);  The parameters of this method are also similar to the parameters of the forEach() method. Let's try it. Here we will search for employees who have worked in the company for less than two years: var Employee = [ {name: “Jacob”, experience: 3},{name: “George”, experience: 1},{name: “Alex”, experience: 1},{name: “Bob”, experience: 4}];var result = Employee.filter(element => element.experience <2); The method will result in a new array consisting of two employees with less than two years of experience. Methods for converting arrays The last group of array methods in JavaScript that we will describe in this article are array transformation methods. These include map(), flat(), flatmap(), sort(), and reverse(). Let's look at each of them in more detail below. map() organizes a new set of values with the result of calling the specified callback function for each element. The syntax of the map() method: var newArray = array.map(function(currentValue, index, arr), thisValue);  Once again, we see the same parameters as in the previously discussed methods. The return value of this method will be a new array with the elements of the callback function result. Let's consider the example that we already used earlier with forEach(), where all the set data were doubled. Now, let's use map() instead of forEach(). var numbers = [1, 2, 3, 4, 5];var doubleNumbers = numbers.map(     function double( element ) {        return element * 2;    });console.log(doubleNumbers); The result is doubleNumbers, a new set of values consisting of numbers 2, 4, 6, 8, 10.  When we use the map() method, the number of lines of code is noticeably reduced compared to forEach(). Also, the forEach() method is used only for iteration and returns nothing. map() returns a new array of the same length as the original array. Flat() allows you to interact with a nested set of values. It returns a new array with all sub-array values merged into it recursively  up to the specified level. The syntax of the flat() method: var newArray = arr.flat(depth); Here, depth specifies the level, i.e. how deep a nested array structure should be flattened. If the nesting depth is unknown, you can set the value of the parameter as Infinity. By default, it is equal to one. Let's consider an example of using the flat() method: var arr = [1, 2, , [4, 5, [6, 7]]];var NewArr = arr.flat(Infinity); The result is NewArr [1, 2, 4, 5, 6, 7]. It is worth noting that one was missing in the set of arr values. The flat() method removed the empty slots. We can combine the previous two methods into one: flatmap().  The syntax of the flatmap() method: var new_array = arr.flatMap(function callback(currentValue, index, arr), thisValue) Here is an example of using flatmap(): var arr = [[1], [2], [3], [4], [5]];var NewArr = arr.flatMap(element => element * 2); The result will be NewArr [2, 4, 6, 8, 10]. The sort() method allows sorting the data set. The default sorting order corresponds to the order of Unicode code characters. Syntax of the sort() method: array.sort(function(firstValue, secondValue));  You can specify a function that determines the sort order as a parameter. Example: var EmployeeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);EmployeeArr.sort (); The result of sorting will be EmployeArr ['Alex', 'Bob', 'George', 'Jack', 'Jacob', 'Oliver']. The reverse() method is also worth mentioning.  Syntax of the reverse() method: array.reverse(); In the example, let's change the order of employees’ names in the previously sorted array. var EmployeeArr = new Array(‘Jacob’, ‘George’, ‘Alex’, ‘Bob’, ‘Oliver’, ‘Jack’);EmployeeArr.sort ();var reversed = EmployeeArr.reverse(); The result of the reverse() method is EmployeArr ['Oliver', 'Jacob', 'Jack', 'George', 'Bob', 'Alex']. Conclusion This article has covered the basic, but not all, array methods in JavaScript. It is not easy to memorize them all at once. But it will become easier with experience in solving problems and using the methods in code. The main thing is to memorize how they work and what they are used for, and if necessary, you can always refer to this article to remember the syntax or see examples. Frequently Asked Questions What are the most commonly used JavaScript array methods? In day-to-day dev work, .map(), .filter(), .reduce(), .forEach(), and .slice() are your best friends — powerful and versatile. What is the difference between map and forEach in JavaScript? .map() transforms and returns a new array. .forEach() just runs code for each element without returning anything. How do I remove elements from an array in JavaScript? Use .filter() or .splice() depending on whether you need immutability or not.
16 June 2025 · 12 min to read
JavaScript

How to Use .map() in JavaScript

JavaScript supports several methods for iterating over arrays. Developers commonly use the traditional for loop and the less common .forEach() method. However, the most popular method is .map(). This method creates a new array by calling a function on every element of the original array. It avoids mutations and generates truly "clean" arrays.  This is different from mutation-based methods, which inevitably alter the original array in some way. In this article, we'll explore four ways to use .map() in JavaScript (though many more exist). Method 1: Calling Functions on Individual Array Elements When using .map() in JavaScript, the callback function is treated as an argument. The value of the array element at the time of execution becomes a required parameter of this function. You can use it to modify or create functions. Example: const sweetArray = [6, 7, 11, 13, 20]; const sweeterArray = sweetArray.map(sweetItem => {     return sweetItem * 2; }); console.log(sweeterArray); Output: [12, 14, 22, 26, 40] You can clean up and simplify the code: const makeSweeter = sweetItem => sweetItem * 2; const sweetArray = [6, 7, 11, 13, 20]; const sweeterArray = sweetArray.map(makeSweeter); console.log(sweeterArray); Output: [12, 14, 22, 26, 40] Using sweetArray.map(makeSweeter) makes the code more readable compared to the first version. Method 2: Converting Strings to Arrays You can use the .map() method from the Array prototype to convert strings. Instead of working directly with arrays, we use .call() to apply .map() to a string. Keep in mind that in JavaScript, strings can be treated like arrays of characters, allowing access to some array methods. Example: const name = "Hostman"; const map = Array.prototype.map; const newName = map.call(name, eachLetter => {     return `${eachLetter}e`; }); console.log(newName); Output: ["He", "oe", "se", "te", "me", "ae", "ne"] In this example, .map() is used to transform each character in the string by appending an "e". This works similarly to .split() and other methods that operate on string characters before transforming them back into an array. Method 3: Rendering Lists in JavaScript Libraries This use case is common in JavaScript frameworks like React. Here, you’ll need JSX syntax since .map() is used within it. For example: import React from "react"; import ReactDOM from "react-dom"; const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"]; const NamesList = () => ( <div> <ul>{names.map(name => <li key={name}>{name}</li>)}</ul> </div> ); const rootElement = document.getElementById("root"); ReactDOM.render(<NamesList />, rootElement); In this example, the React component renders a <div> containing a list. The JavaScript .map() method is used to iterate over the array of names and generate individual list items. Rendering is handled by ReactDOM.render on a DOM element with the ID root. Method 4: Transforming Array Object Formats Another use case for .map() in JavaScript is transforming each object in an array and returning a new array of modified objects. This works much like traditional data processing. Example: const myUsers = [ { name: 'cloud', likes: 'scalability' }, { name: 'devops', likes: 'automation' }, { name: 'kube', likes: 'orchestration' } ]; const usersByLikes = myUsers.map(item => { const container = {}; container[item.name] = item.likes; container.popularity = item.name.length * 12; return container; }); console.log(usersByLikes); Output: [   { cloud: 'scalability', popularity: 60 },   { devops: 'automation', popularity: 72 },   { kube: 'orchestration', popularity: 48 } ] In this example, each object in the array is modified using bracket notation and object property assignments. This approach is useful for transforming and condensing incoming data before using it in client-side applications. Conclusion We reviewed four main ways to use the .map() method in JavaScript. You can expand its capabilities by combining it with other methods. For more detailed information, refer to the official documentation.
11 June 2025 · 4 min to read

Do you have questions,
comments, or concerns?

Our professionals are available to assist you at any moment,
whether you need help or are just unsure of where to start.
Email us
Hostman's Support