How to return multiple items in a map function in JavaScript

The map() function enables you to loop over every element in an array, modify it and then return a different element to replace the initial element. The map() function does not change the original array, you will still have the same amount of elements as the original array.

The map() method takes a function that accepts three arguments:

1. The first argument is the current value
2. Second argument is the index
3. The third argument is the original array

Let's take a deeper look into this with an example;

- Create an array...

let val = [1, 2, 3, 4];

- Using the map() function, iterate through every element in the array...

let newVal = val.map((v) => {
 return [v*v, v*v*v, v+1];
});

//log 'newVal' into console

console.log(newVal);

The map function will return a new array in the console.

Let us go through an array of programming languages;

let languages = ["Kotlin", "Java", "Rust", "React", "Node", "Python"];

Now we need to create a map function, inside this function, we need to have a return statement and whatever we return will become the content of the new array.

let languages = ["Kotlin", "Java", "Rust", "React", "Node", "Python"];

//log the variable to console to see the languages array

console.log(languages);

//now let's make use of the map function

let langLength  = languages.map(function(item, index, array) {
return 6;
});

//log langLength to console

console.log(langLength);

You will observe that the new array now has six 6s in it.

Let us put an index in the array and see what it returns...

let langLength = languages.map(function(item, index, array){
return index;
});

//log langLength to console

console.log(langLength);

You will see in your console that it outputs the index number of each item in the array.

- Now, pass in the third argument of the function to the return statement...

let langLength = languages.map(function(item, index, array){
return array;
})

//log langLength to console to see the output

console.log(langLength);

You can see in the console that each item in the array has now been listed.

A better approach to returning multiple items from an array is by using the flatMap() function...

const num = [2, 4, 6, 8];
const newNum = num.flatMap((v) => [v*v, v*v*v, v+1]);
console.log(JSON.stringify(newNum));

//You should have a result like this: [4,8,3,16,64,5,36,216,7,64,512,9]

The map() function in JavaScript returns a new array with the same number of elements as the original array. If you want to create a new array with a different number of elements, you may need to use a different function such as filter(), reduce(), or flatMap().

The flatMap() function is available as a built-in function on arrays in JavaScript. It works similarly to the map() function, but it also flattens the output into a single array. This means that if the function applied by flatMap() returns an array, the elements of that array are included in the final output array.

I hope you have found this article helpful. Please take a moment to share your feedback in the CS. Thank you for reading.