# javascript: arrays map function

german9304 Updated on ・3 min read

## Welcome to an introduction to the map function in an array.

The map in an array is a function that takes your elements and transforms them into new elements. One of the benefits of map is that it does not mutate your original elements it creates a new array.

mutation: it means when your original array gets modified,
for instance: the use of the push function in an array mutates your original element, the original array gets modified.

Let's dive in:

### What do I mean by transforms your elements?

• Let's say we have an array of numbers:
const numbers = [1, 2, 3, 4, 5, 6];

• And We would like to create an array of those elements with every element multiplied by 2, in order words: an array with their double number. Well map would do this very simple:
const numbers = [1, 2, 3, 4, 5, 6];
let doubleNumbers = numbers.map((number) => number * 2); // with arrow function

console.log(doubleNumbers) // [ 2, 4, 6, 8, 10, 12 ]

// numbers remains intact, it is not mutated

console.log(numbers) // [ 1, 2, 3, 4, 5, 6 ]



### Pretty simple right? But, how does map work internally?

This is a small representation of map, of course the original has more things to check or code, I just wanted to provide an example of this.

/**
* map function
* @param {Array} elements elements to transform
* @param {function} cb callback that will transform the elements
*/
function map(elements, cb) {
let newElements = [];
for (let i = 0; i < elements.length; i++) {
newElements.push(cb(elements[i]));
}

return newElements;
}

let resultDouble = map(numbers, number => number * 2);
console.log(resultDouble); // [ 2, 4, 6, 8, 10, 12 ]


Note:
I've been using arrow function, but you can use normal function as well.

let myFunc = number => number * 2;

let myFunc2 = function(number) {
return number * 2;
}


Pretty great right? you the the full benefits of immutability and also you accomplish to get a new transformed array.

What else could I do with map? well:

#### Let's give more examples:

• Suppose you would like to return a string representation of an array of objects we can use map!

const person = [
{
name: 'john',
lastName: 'frank',
age: 34
},
{
name: 'Mark',
lastName: 'Roger',
age: 40
}
];

const personInfo = person.map(person => {
return My name is ${person.name}, Last Name is${person.lastName} and age ${person.age}; }); console.log(personInfo); // Result: // [ 'My name is john, Last Name is frank and age 34', // 'My name is Mark, Last Name is Roger and age 40' ]  • What about html?  const people = [ { name: 'john', lastName: 'frank', age: 34 }, { name: 'Mark', lastName: 'Roger', age: 40 } ]; const peopleHtml = people.map(person => { return  <li> <p> name:${person.name} </p>
<p> last name: ${person.lastName} </p> <p> age:${person.age} </p>
</li>
;
});

const container = document.querySelector('div');

container.innerHTML = peopleHtml.join('');

console.log(peopleHtml.join(''))

/*

<li>
<p> name: john </p>
<p> last name: frank </p>
<p> age: 34 </p>
</li>

<li>
<p> name: Mark </p>
<p> last name: Roger </p>
<p> age: 40 </p>
</li>

*/

• In react we often use the map function to create jsx:

function App() {

const numbers = [1, 2, 3, 4, 5];

return (
<div className="App">
<h1> map </h1>
<ul>
{numbers.map((number) => (
<li> {number} </li>
))}
</ul>
</div>
)
}


There are more cases to cover, however I wanted to make it simple so you get a better understand what the map function in an array is and why it is helpful.