How to return multiple items in a map function in JavaScript
Published: 2023-03-04 11:18:40

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.