# How to use JavaScript’s .map() method

The JavaScript method `.map()` lets you iterate through each element in an array and execute actions. A new array is created to store the results, leaving the original array intact.

## What is JavaScript’s `.map()`?

JavaScript’s `.map()` method creates a new array by applying a **callback function** to each element of the original array. The method transforms each value from the original array, storing the result in a separate array. JS `.map()` is non-mutating, meaning that the original array remains unchanged.

The `.map()` method is often used for **transforming all the elements in an array**. For example, it can square elements, format text, filter objects and make a variety of other modifications. That makes `.map()` practical for making non-destructive changes to data, resulting in clean, coherent code.

## What is the syntax for JavaScript `.map()`?

The syntax for JS `.map()` consists of a callback function on an array:

```javascript
const newArr = originalArr.map(function(element, index, array) {
    // Code
});
```

- **`originalArr`**: The array that `.map()` will be applied to
- **`element`**: The current element being processed
- **`index (optional)`**: The index of the current element in the array
- **`array (optional)`**: The original array

Let’s look at an example.

```javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
```

The callback function that’s entered as an argument to `.map()` takes each element from the original array `number` and squares it. We then get a new array with the squares of each element from the original array.

## Examples of JavaScript’s `.map()`

JavaScript’s `.map()` can be used to perform various operations on the elements of an array. Here are some of its most common use cases.

### Filtering data

If you combine `.map()` with `.filter()`, you get an array that only contains values that are true for your chosen condition.

```javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0) .map(num => num * 2);
// Output: [4, 8]
```

In this example, the array `numbers` contains the values 1-5. We then apply the `.filter()` method. The filtering condition says that the number modulo 2 must be zero, which is only true of even numbers. This results in a new array, which only contains elements that are divisible by 2, giving us the array `[2,4]`. Next, we use the `.map()` method to double each element in the array. As a result, `[2,4]` becomes `[4,8]`.

### Rendering lists in JavaScript libraries

React is one of the [most popular JavaScript frameworks and libraries](https://www.ionos.com/digitalguide/websites/web-development/popular-javascript-frameworks-and-libraries/), and `.map()`is useful for rendering lists in it. Note that React uses **JSX syntax**.

```javascript
import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
```

Above, we imported the models `React` and `ReactDOM` and created an array named `colors` with various color names. The **React functional component** `ColorList` uses `.map()` to create a `<li>` element for every color. The `key` attribute enables efficient updates with React. In the final step, the `ColorsList`component is rendered in DOM with `ReactDOM.render` and the output is added to the DOM element with the ID `root`.

### Formatting elements of an array

JavaScript’s `.map()` method is a simple way to format elements like strings.

```javascript
const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
```

In this example, we combine `.map()` with the `toLowerCase()` method to convert each name into lowercase. The result is a new array called `formattedNames`, which contains the lowercase names. The original array `names` remains unchanged.


This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/javascript-map/](https://www.ionos.com/digitalguide/websites/web-development/javascript-map/) for AI/LLM consumption.