Hello fellow developers!

Have you ever wondered about the various ways to use the array.map() function to achieve different transformations?

I have compiled a list of ideas on how to utilize them effectively map() function.

1. Basic Transformation

Transform each element in an array.

const numbers = [1, 2, 3];
const squares = numbers.map(x => x * x);
console.log(squares); // [1, 4, 9]

2. Mapping to Objects

Transform an array of values to an array of objects.

const names = ['Alice', 'Bob', 'Charlie'];
const people = names.map(name => ({ name }));
console.log(people); // [{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }]

3. Extracting Properties

Extract a specific property from an array of objects.

const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];
const ids = users.map(user => user.id);
console.log(ids); // [1, 2]

4. Changing Array of Arrays

Transform an array of arrays.

const pairs = [[1, 2], [3, 4], [5, 6]];
const summedPairs = pairs.map(pair => pair[0] + pair[1]);
console.log(summedPairs); // [3, 7, 11]

5. Asynchronous Operations

Handle asynchronous operations within map (commonly using Promise.all).

const fetchData = async id => {
    // Simulate an async operation
    return new Promise(resolve => setTimeout(() => resolve(`Data for ID ${id}`), 1000));
};

const ids = [1, 2, 3];
const promises = ids.map(id => fetchData(id));

Promise.all(promises).then(data => console.log(data)); // ["Data for ID 1", "Data for ID 2", "Data for ID 3"]

6. Conditional Mapping

Apply a transformation conditionally.

const numbers = [1, 2, 3, 4, 5];
const evensDoubled = numbers.map(num => num % 2 === 0 ? num * 2 : num);
console.log(evensDoubled); // [1, 4, 3, 8, 5]

7. Spreading Arrays into Function Arguments

You can use map to spread array elements as arguments to a function.

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

// Creating an array of sums
const sums = numbers.map(([a, b]) => a + b);
console.log(sums); // [3, 7, 11]

8. Zipping Arrays

Combine two arrays into an array of pairs.

const keys = ['name', 'age'];
const values = ['Alice', 25];

const zipped = keys.map((key, i) => [key, values[i]]);
console.log(zipped); // [["name", "Alice"], ["age", 25]]

9. Mapping with Index

Utilizing the index parameter in JavaScript’s map function allows you to include the position of each element in your transformations.

const colors = ['red', 'green', 'blue'];
const colorDescriptions = colors.map((color, index) => `Color ${index + 1}: ${color}`);
console.log(colorDescriptions); // ['Color 1: red', 'Color 2: green', 'Color 3: blue']

10. Flattening an Array

Using map to flatten a 2D array, though flatMap is better suited for this task.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.map(subArray => subArray).flat();
console.log(flattenedArray); // [1, 2, 3, 4, 5, 6]

Thank you for reading! Feel free to connect with me on LinkedIn or GitHub.

Creative ways to use Array.map()