In the previous article, I talked about iterating over arrays using while
& do ... while
loops. You can check it out below:
Understanding Javascript Array Series V - Array Loops & Iteration Part II
Nedy Udombat ・ Oct 3 '19
In this article, I will talk about using Map to iterate over arrays.
1. Map
This is an array method then iterates over an array and performs a specified statement on every element of the array and stores the result in a new array. A real-life example would be peeling boiled eggs on a plate. As an egg is peeled it is put on a new plate. The Map
method executes a statement on each element of an array and stores them in a new array.
// syntax
const newArray = arr.map(([currentValue], [arrayIndex], [arr]) => {
// [specified statement]
});
Let's take a look at each component that makes up the syntax.
On the left side of the assignment, the result of the map statement is stored in a new variable. It can be declared by using
const
orlet
.[currentValue]: This is the current item in the array that is being processed. After the procession, the current value becomes the value of the next element in the array.
[arrayIndex]: This is the index of the current value in the array. This also changes after the current value has been processed.
[arr]: This is the array being iterated over.
Below are some examples of the map method in use.
// A function to square all the numbers in an array
const unSquaredArray = [1, 2, 3, 4, 5];
const squaredArray = unSquaredArray.map(item => item * item);
console.log(squaredArray); // [1, 4, 9, 16, 25]
// A function to divide all even numbers in an array by 2
const numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const formattedArray = numberArray.map(number => {
if (number % 2 === 0) {
return number/2;
}
return number;
});
console.log(formattedArray); // [1, 1, 3, 2, 5, 3, 7, 4, 9]
A map function can also be used to reformat an array of objects. Here we have an array of objects that holds peoples name and age.
const humans = [
{ name: "Soji", age: 8},
{ name: "Chukwudi", age: 15},
{ name: "nedy", age: 22},
{ name: "Ezekiel", age: 17},
{ name: "LII", age: 50},
]
Let's assume we want to add another key-value pair in each object stating if a person is a child
, teenager
, or an adult
. We would do this:
const humans = [
{ name: "Soji", age: 8},
{ name: "Chukwudi", age: 15},
{ name: "Nedy", age: 22},
{ name: "Ezekiel", age: 17},
{ name: "LII", age: 50},
]
const formattedHumansArray = humans.map(human => {
if(human.age <= 12) {
return `${human.name} is a child`;
} else if(human.age > 12 && human.age <= 19) {
return `${human.name} is a teenager`;
} else {
return `${human.name} is an adult`;
}
})
console.log(formattedHumansArray);
// ["Soji is a child", "Chukwudi is a teenager", "Nedy is an adult", "Ezekiel is a teenager", "LII is an adult"]
Things to note about the map method:
The map method itself does not mutate the original array, this means that the original array is left untouched by the map method. The specified statement(callback) however, may mutate the array.
The map method can be used on a two-dimensional array.
const twoDimensionalArray = [[4, 3, 2], [5, 6, 7], [3, 2, 1]];
const newArray = twoDimensionalArray.map(item => {
return item.map(number => number * number)
});
console.log(newArray);
// [[16, 9, 4], [25, 36, 49], [9, 4, 1]]
- The map method only executes the specified statements on the elements of an array that has been set. Hence, it is not called for missing elements.
Conclusion
If you are not looking to store the results of the specified statement of an array iteration in a new array, or if you a generally not returning any value, then you might want to consider using other Iteration methods like for ...
, for ... in
or forEach
loops, etc.
Got any other instances for the use of the map
function? Please do well to share it in the comment section.
That's all for today, tomorrow we will talk about another set of functions used in array Iteration.
Here is the link to the other articles on this Array series written by me:
- What is an Array?
- Alternate ways of Creating an Array.
- Array Properties
- Array Loops & Iteration Part I
- Array Loops & Iteration Part II
- Array Loops & Iteration Part IV
Got any question, addition or correction? Please leave a comment.
Thank you for reading. 👍
Top comments (3)
True. Thank you for that correction @dovca
So if you don't write the current Value then you have to replace it with () ?
Thanks bro