Javascript Array Methods: .map()
.map() is one of the most frequently used javascript array methods. It is frequently utilised in modern frameworks such as react due to…
.map() is one of the most frequently used javascript array methods. It is frequently utilised in modern frameworks such as react due to it’s logical dynamism and practicality.
Previously I wrote about the .foreach() method, which allows us to iterate over an array. This method is a fantastic way to loop through an array and reach each item, although as outlined in the article, we cannot return values via this method, with the returned output being ‘undefined’. (It is worth noting that it is also outlined in the article that .foreach() can be very useful despite this.)
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.forEach((item) => {
return item + 1;
}));
// Console: undefinedThe .map method builds on this, but as opposed to always returning undefined, it returns a new array with the potential for each item to be manipulated. This is extremely useful to when problem solving and developing logic, robustly decreasing lines of code and improving efficiency.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.map((item) => {
return item + 1
}));
// console: [ 2, 3, 4, 5, 6 ]
/// SAME OUTPUT IN VIA .foreach()
const numbers = [1, 2, 3, 4, 5];
let output = [];
numbers.forEach((item) => {
output.push(item + 1)
});
console.log(output)
// console: [ 2, 3, 4, 5, 6 ]This snippet exemplifies how we can quickly reach our desired output when implementing .map(). It is also worth noting that we can store the .map() method within a variable and as with the .foreach() method, we can access each array item’s index.
const numbers = [1, 2, 3, 4, 5];
const mapped = numbers.map((item, index) => {
if (index > 2) {
return item + 1;
} else {
return item;
}
});
console.log(mapped)
// console: [ 1, 2, 3, 5, 6 ]The above snippet illustrates how we can manipulate items at certain indexes, with items at index 2 or above adding 1 and all other indexes return items in the same state. This is stored within a variable and a new array is returned when logging this variable to the console.
A great way to practice using methods such as .map() is by attempting to complete challenges on codewars.
Codewars - Achieve mastery through coding practice and developer mentorship
A coding practice website for all programming levels - Join a community of over 3 million developers and improve your…www.codewars.com
I previously wrote about the .split() method in my article ‘.split() it up!’.
.split() it up!
The javascipt .split() method is something I have implemented over and over in my relatively short programming journey…medium.com
A fantastic codewars kata (challenge in codewars, you’ll soon pick up the lingo…) I recently completed by utilising both .split() and .map() is ‘Stop gninnipS My sdroW!’.
Stop gninnipS My sdroW!
Write a function that takes in a string of one or more words, and returns the same string, but with all five or more…www.codewars.com
Why not give it a go and let me know how you get on? I’ll write a solution with some musings on this in the near future.
Please follow me on medium and Twitter for updates and new stories every week.
Thanks as always for reading.