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.