JavaScript: How to map array values without using \"map\" method?

When you need to transform array elements without using the built-in map() method, JavaScript provides several alternatives. These approaches manually iterate through arrays and apply transformations to create new arrays with modified values.

Table of Contents

You can map array values without using the map method in the following ways:

• Using forEach()
• Using reduce()
• Using a for Loop
• Using while Loop

Using forEach()

The forEach() method iterates through each array element, allowing you to apply transformations while manually building a new result array.

Example

function mapUsingForEach(arr, transform) {
    let result = [];
    arr.forEach(item => result.push(transform(item)));
    return result;
}

const numbers = [1, 2, 3, 4];
console.log(mapUsingForEach(numbers, num => num * 2));

[ 2, 4, 6, 8 ]

Using reduce()

The reduce() method accumulates transformed values into a new array. It iterates through the original array, applies transformations, and builds the result using an accumulator.

Example

function mapUsingReduce(arr, transform) {
    return arr.reduce((acc, item) => {
        acc.push(transform(item));
        return acc;
    }, []);
}

const numbers = [3, 4, 5, 6];
console.log(mapUsingReduce(numbers, num => num * 3));

[ 9, 12, 15, 18 ]

Using a for Loop

A traditional for loop provides direct index-based access to array elements. This approach manually iterates through each position and applies transformations.

Example

function mapUsingForLoop(arr, transform) {
    let result = [];
    for (let i = 0; i  num * 2));

[ 2, 6, 10, 14 ]

Using while Loop

The while loop continues until reaching the array's end, applying transformations and storing results. It requires manual index management.

Example

function mapUsingWhileLoop(arr, transform) {
    let result = [];
    let i = 0;
    while (i  num * 3));

[ 3, 9, 15, 21 ]

Performance Comparison

Conclusion

All four methods effectively map array values without using the native map() method. Choose for loops for best performance, forEach() for readability, or reduce() for complex transformations.