map in JavaScript: Examples and Use Cases

map in JavaScript: Examples and Use Cases

map is the most used array method. It transforms each element into a new value. Here are practical examples.

Basic Transformation

[1, 2, 3].map((n) => n * 2); // [2, 4, 6]
[1, 2, 3].map((n) => n * n); // [1, 4, 9] (squares)
``
### Extracting Properties

```js
const users = [{ name: "A", age: 20 }, { name: "B", age: 30 }];
const names = users.map((u) => u.name); // ["A", "B"]
``
### Adding a Property

```js
const users = [{ name: "A" }, { name: "B" }];
const withId = users.map((u, i) => ({ ...u, id: i + 1 }));
// [{ name: "A", id: 1 }, { name: "B", id: 2 }]
``
### Converting Types

```js
["1", "2", "3"].map(Number); // [1, 2, 3]
[1, 2, 3].map(String); // ["1", "2", "3"]
``
### Formatting

```js
const prices = [10, 20, 30];
const formatted = prices.map((p) => `$${p.toFixed(2)}`);
// ["$10.00", "$20.00", "$30.00"]
``
### Using the Index

```js
["a", "b", "c"].map((char, i) => `${i}: ${char}`);
// ["0: a", "1: b", "2: c"]
``
### Rendering Lists (React)

```js
const items = ["Apple", "Banana", "Cherry"];
const list = items.map((item, i) => <li key={i}>{item}</li>);
``
### Flattening One Level

```js
[[1, 2], [3, 4], [5]].map((sub) => sub); // [[1, 2], [3, 4], [5]] (no flatten)
// use flatMap for flattening:
[[1, 2], [3, 4], [5]].flatMap((sub) => sub); // [1, 2, 3, 4, 5]
``
### Common Mistakes

1. **Not returning**: `map((n) => { n * 2; })` returns `undefined` (block body, no return).
2. **Using `map` for side effects**: use `forEach` if you do not need the return value.
3. **Mutating the original**: `map` should be pure. Use spread for objects.

### The Takeaway

`map` transforms each element. Use cases: basic math, extracting properties, adding properties, converting types, formatting, using the index, rendering lists, and flattening (with `flatMap`). Always return from the callback and do not mutate the original.