How to map array values without using map method in JavaScript ?

Array elements can be mapped by using looping methods in JavaScript. The map() method creates a new array with the results of the output of a function called for each array element. This can also be implemented using a for loop in JavaScript.

Approach 1: For this, we can create two arrays, in which one array contains the array elements that are to be mapped, and the second array stores all the return values of the corresponding function.  We can use the JavaScript Array push() method to push the return values of the function in the output array.

Syntax:

array.push(element1, element2, element, ... , elementN )

The Array length method can be used to find the length of the corresponding array.

Syntax:

array.length

Return value: Number

Example:

const arr = [4, 5, 10, 3, 8, 6];
let result = [];

// Square function returns square of a number
const square = function (num) {
    return num * num;
}

for (let i = 0; i < arr.length; i++) {
    result.push(square(arr[i]));
}

// Expected output: [16 ,25, 100, 9, 64, 36]
console.log(result);

[ 16, 25, 100, 9, 64, 36 ]

The indices of the elements in the output array are shown before the numbers in the output as well as the length of the output array.

Using forEach() Method

This approach uses the forEach() method to iterate over each element in the array and apply the function to each element, then push the result into a new array.

Example:

const arr = [4, 5, 10, 3, 8, 6];
let result = [];

// Square function returns the square of a number
const square = function (num) {
    return num * num;
};

arr.forEach(element => {
    result.push(square(element));
});

// Expected output: [16, 25, 100, 9, 64, 36]
console.log(result);

[ 16, 25, 100, 9, 64, 36 ]

Using reduce()

In JavaScript, you can use reduce() to map array values by accumulating results in a new array. The callback function applies an operation to each element and pushes the result to the accumulator, which is initialized as an empty array.

Example:

let array = [1, 2, 3, 4, 5];

let newArray = array.reduce(function(accumulator, element) {
    accumulator.push(element * 2); // Example operation: multiplying each element by 2
    return accumulator;
}, []);

console.log(newArray); // Output: [2, 4, 6, 8, 10]

[ 2, 4, 6, 8, 10 ]

Using the for...of Loop

In this approach, we utilize the for...of loop to iterate over each element in the array, apply a function to transform each element, and then push the transformed values into a new array. This method provides a straightforward and readable way to map array values.

Syntax:

for (const element of array) {
    // Transform element
    newArray.push(transformedElement);
}

Example: In this example, we use the for...of loop to square each element in the input array and store the results in a new array.

const arr = [4, 5, 10, 3, 8, 6];
let result = [];

// Square function returns the square of a number
const square = function (num) {
    return num * num;
};

// Iterate over each element using for...of loop
for (const element of arr) {
    result.push(square(element));
}

// Expected output: [16, 25, 100, 9, 64, 36]
console.log(result);

[ 16, 25, 100, 9, 64, 36 ]