More Loops
Looping Arrays and Objects
const testArray = [‘Halo 3’, ‘Halo 4’, ‘Halo 5’];
const newArray = [‘Halo 1’, ‘Halo 2’];
const haloArray = […newArray, …testArray];
Looping Arrays
The for of Loop
This is just like the for loop, however, it creates a loop which can iterate over objects or arrays. A Simple example is given below;
for (const element of haloArray) {
console.log(element);
}
This loop will basically traverse through the haloArray and print each Element of that Array one by one. However, there is a newer way of using this for of loop. The same example is used below;
for (const [item, element] of haloArray.entries())
console.log(`${item + 1} : ${element}`);
The item is basically the Index’s position in the Array. We use +1 in the log because the index starts at 0. This will print out all the Elements in the Array one by one. We use the entries() method because it takes the two parameters of item and element and it returns the Array Iterator Object with a pair. For example (item : 1, element : ‘Halo 1'). The item is used as the key in the Array Object, whilst the element is used as the value inside the Array object.
Looping Objects
The for of Loop
When using the for of Loop, we must take into account of the three methods that an Object can use. This is;
Object.keys()
The Object.keys() method basically returns an Array of Strings in a numerical order. An Example is given below;
const haloProperties = Object.keys(haloArray);
console.log(properties);
Here we used an example from the haloArray example given above. This method returns the length of the Object in a numerical fashion.
Object.values()
The Object.values() method basically returns an Array of the Object’s property values in the order it was written. An example is given below;
const haloValues = Object.values(haloArray);
console.log(haloValues);
This will print out all the property values in the haloArray in that specified order.
Object.entries()
This will basically combine the Object.keys() method and the Object.values() method and will print out the Array in the order it was written. An example is given below;
const haloEntries = Object.entries(haloArray);
console.log(haloEntries);
This will print out the entire object of that Array.
Using the for of Loop, we can destructure the Object given below and take out the individual values and display them in a String;
const gamingHours = {
Monday: {
playHalo: 3,
playPokémon: 3,
},
Tuesday: {
playHalo: 2,
playPokémon: 2,
},
Wednesday: {
playHalo: 4,
playPokémon: 5,
},
Thursday: {
playHalo: 1,
playPokémon: 4,
},
};
First, we will put this Object into a variable and call the Object.entries() method.
const gamingEntries = Object.entries(gamingHours);
Then, we will destructure this Object, and print the individual values the way we prefer by using a Template Literal.
for (const [days, { playHalo, playPokémon }] of gamingEntries) {
console.log(`On ${days}, We Play Halo for ${playHalo} Hours and Pokémon for ${playPokémon} Hours`);
}
The days variable will print out the days given in the gamingHours object, whilst the playHalo and playPokémon variables will display the number of hours given inside the gamingHours object.
This will display the following result;
The days variable will print out the days given in the gamingHours object, whilst the playHalo and playPokémon variables will display the number of hours given inside the gamingHours object.
