Introduction to JavaScript Array mapfunction or map()
The map function or map() in javascript is very helpful when you need to convert or modify the elements in an Array. See Below image code
It runs from left to right across the array to generate a new array, and for each item, some function is executed that is passed by args, and you must return a value for that function.
In this article, I would like to explain about the map() or map function, a JavaScript-related array function that I use a lot, and it’s very useful in different situations.
Also Read: How to Fix broken images automatically using jQuery
Let’s see an example below.
Suppose that you are receiving this data from your API as response:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const data = [ { id: 1, name: 'John Doe', location: { city: 'São Paulo', state: 'SP', country: 'Brazil', zipcode: '00000-000' } }, { id: 2, name: 'Don Juan', location: { city: 'Rio de Janeiro', state: 'RJ', country: 'Brazil', zipcode: '11111-111' } }, { id: 3, name: 'The Rock', location: { city: 'Curitiba', state: 'SP', country: 'Brazil', zipcode: '22222-222' } } ] |
So, you have an array of objects as below:
|
2 3 4 5 6 7 8 9 10 |
- user id - name - location - city - state - country - zipcode |
Let’s suppose we don’t need all above data, we need only an array with some objects like:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const data = [ { id: 1, name: 'John Doe', city: 'São Paulo' }, { id: 2, name: 'Don Juan', city: 'Rio de Janeiro' }, { id: 3, name: 'The Rock', city: 'Curitiba' } ] |
Probably, to fulfil this requirement , you may be thinking in something like:
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
let newData = [] for (var index in data) { const user = data[index]; newData.push({ id: user.id, name: user.name, city: user.location.city }); } |
Am I Right?
It isn’t wrong, and it works, but, there is a lot of steps, and, we can do it better!
Doing that way, you are:
- Instancing a new variable;
- Doing a for loop through the data Array, getting each index;
- Using this index to access the current element of the Array;
- Pushing the new object to the variable previously created;
The map() or map function provides an easy way to do the same task and with fewer steps!
Check below code snippet, how to write the same using map():
|
2 3 4 5 6 7 8 |
const newData = data.map(item => ({ id: user.id, name: user.name, city: user.location.city })); |
Let’s explain how every step work..
So, this also can be re-written to something like:
|
2 3 4 5 6 7 8 9 10 11 12 |
function getUser(user) { return { id: user.id, name: user.name, city: user.location.city } } const newData = data.map(getUser); |
And if you’re familiar with ES6, you can re-write it to:
|
2 3 4 |
const newData = data.map(({ id, name, location: { city }}) => ({ id, name, city })); |
Output
Using any of the examples above, if you run a console.log(newData), you will receive
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[ { id: 1, name: 'John Doe', city: 'São Paulo' }, { id: 2, name: 'Don Juan', city: 'Rio de Janeiro' }, { id: 3, name: 'The Rock', city: 'Curitiba' }, ] |
Conclusion
I hope you found this tutorial helpful for your project. I hope you guys enjoy The map() or map function in javascript and keep learning!. If you face – we are here to solve your problems.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request
Also Read: JavaScript Code to get Difference between two dates
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
