Understanding Javascript Array Series VI - Array Loops & Iteration Part III

#javascript #webdev #html #beginners

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

#javascript #beginners #webdev

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 or let.
[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:

Got any question, addition or correction? Please leave a comment.

Thank you for reading. 👍