~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/13js-advanced-array-methods

# JavaScript Advanced Array Methods

Advanced array methods for complex data transformations.

## flatMap

Maps and flattens in one step — replaces `map().flat()`:

```javascript
let words = ["hello", "world"];
let chars = words.flatMap((word) => word.split(""));
// ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]
```

**Tip:** Only flattens one level deep.

## reduce for Complex Operations

```javascript
let students = [
  { name: "Alice", scores: [90, 85, 95] },
  { name: "Bob", scores: [80, 75, 85] }
];

let averages = students.map((s) => ({
  ...s,
  average: Math.round(s.scores.reduce((sum, score) => sum + score, 0) / s.scores.length)
}));
```

## findLast

Returns the last matching element:

```javascript
let numbers = [1, 2, 3, 4, 5, 3];
numbers.findLast((n) => n === 3); // 3 (last occurrence)
```

## at() Method

Accepts negative indices for easy access from the end:

```javascript
let arr = [1, 2, 3, 4, 5];
arr.at(-1); // 5
arr.at(-2); // 4
```

## Object.groupBy

Groups array elements by a key:

```javascript
let inventory = [
  { name: "apple", type: "fruit" },
  { name: "carrot", type: "vegetable" },
  { name: "banana", type: "fruit" }
];

let grouped = Object.groupBy(inventory, (item) => item.type);
// { fruit: [{name:"apple",...}, {name:"banana",...}], vegetable: [...] }
```

## Complete Example: Data Analysis

```javascript
let transactions = [
  { id: 1, type: "income", amount: 100 },
  { id: 2, type: "expense", amount: 50 },
  { id: 3, type: "income", amount: 200 }
];

let totals = Object.groupBy(transactions, (t) => t.type);
let summary = Object.fromEntries(
  Object.entries(totals).map(([type, items]) => [
    type, items.reduce((sum, t) => sum + t.amount, 0)
  ])
);

console.log(summary); // { income: 300, expense: 50 }
```

## Complete Example: Flatten Nested Data

```javascript
let departments = [
  { name: "Engineering", employees: ["Alice", "Bob"] },
  { name: "Marketing", employees: ["Charlie"] }
];

let allEmployees = departments.flatMap((dept) => dept.employees);
// ["Alice", "Bob", "Charlie"]
```

## Best Practices

1. **Use `flatMap` instead of `map+flat`** — more efficient
2. **Use `reduce` for aggregations** — more powerful than loops
3. **Use `at()` for negative indexing** — more readable
4. **Use `Object.groupBy` for grouping** — cleaner code

## Common Mistakes

1. **Forgetting `reduce` accumulator type** — can cause type coercion
2. **Over-nesting `reduce`** — hard to read and maintain
3. **Using `findLast` when `find` suffices** — unnecessary complexity
4. **Forgetting `Object.groupBy` requires a callback** — not a standalone function

No changes yet

cancel