---
title: JavaScript — Array Methods
lang: en
description: Practical JavaScript array methods. Demonstrates `code-behavior`, `comparison`, and `pitfall` card types.
tags:
  - javascript
  - programming
  - arrays
  - reference
visibility: private
---

# JavaScript — Array Methods

> Each card pairs a code snippet with a short explanation.
> Demonstrates the **code-behavior**, **comparison**, and **pitfall** card types.

---

## Front

```js
[1, 2, 3].map((n) => n * 2);
```

What does this expression evaluate to?

## Back

A **new array** of the same length, with each element transformed by the callback.

```js
[1, 2, 3].map((n) => n * 2);
// → [2, 4, 6]
```

The original array is not mutated.

<!-- card:
  cardType: code-behavior
  subject: JavaScript
  topic: Array.prototype.map
  prompt: "Predict the output before flipping."
  difficulty: easy
-->

---

## Front

```js
const xs = [1, 2, 3];
xs.push(4);
console.log(xs.length, xs);
```

What is logged?

## Back

```
4 [1, 2, 3, 4]
```

`push` **mutates** the array in place and returns the new length.

<!-- card:
  cardType: code-behavior
  subject: JavaScript
  topic: Mutating methods
  difficulty: easy
-->

---

## Front

```js
const total = [10, 20, 30].reduce((sum, n) => sum + n, 0);
```

What is `total`?

## Back

`60`.

`reduce(reducer, initialValue)` folds the array into a single value. Without an initial value the first element is used as the seed and the callback starts at index 1.

<!-- card:
  cardType: code-behavior
  subject: JavaScript
  topic: Array.prototype.reduce
  difficulty: medium
-->

---

## Front

When do you reach for `map`, `filter`, or `reduce`?

## Back

| Method | Returns | Use when |
| --- | --- | --- |
| `map(fn)` | New array, same length | You need a 1:1 transformation |
| `filter(fn)` | New array, length ≤ input | You want to keep elements that pass a predicate |
| `reduce(fn, init)` | Any single value | You're folding the array (sum, max, grouping, …) |

If you find yourself reaching for `reduce` to build a new array, you probably want `map` or `filter`.

<!-- card:
  cardType: comparison
  subject: JavaScript
  topic: Iteration
  frontType: text
  backType: markdown
  prompt: "Pick the right tool for each scenario."
  difficulty: medium
-->

---

## Front

> Common mistake: using `forEach` to build a new array.

```js
const doubled = [];
[1, 2, 3].forEach((n) => doubled.push(n * 2));
```

## Back

`forEach` runs the callback for side effects only — it always returns `undefined`. The code above works but **`map` is the right tool**:

```js
const doubled = [1, 2, 3].map((n) => n * 2);
// → [2, 4, 6]
```

✅ **Better alternative:** `map` when you need the transformed array; `forEach` only when you genuinely don't want a return value.

<!-- card:
  cardType: pitfall
  subject: JavaScript
  topic: forEach vs map
  frontType: markdown
  backType: markdown
  difficulty: easy
-->

---

## Front

Steps to remove duplicates from an array.

## Back

1. Wrap the array in a `Set` to dedupe (uses `SameValueZero`).
2. Spread back into an array.
3. (Optional) sort the result if order matters.

```js
const unique = [...new Set([1, 1, 2, 3, 2])].sort();
// → [1, 2, 3]
```

> info: For arrays of objects, dedupe by a key with a `Map` keyed on that property.

<!-- card:
  cardType: procedure
  subject: JavaScript
  topic: Deduplication
  frontType: text
  backType: markdown
  difficulty: medium
-->