Javascript For..Of Loops: Pt.3
A Series On JavaScript Loops
I’m am in the process of doing a series of articles on five useful Javascript Loops (for, for…in, for…of, while, do/while). My goal is to make them easy to understand with examples, and when to use them.
About “for…of” Loops
Okay, now onto possibly the easiest loop that I will cover, thus making it a rather short article. Unlike the “for…in” loop for objects, the “for…of” loop is for arrays, strings, maps , and nodelists.
These loops are also great for basic iteration, where you don’t need to track indexes. The “for…of” have a super clean syntax with great readability. Born from ES6 it’s an alternative to the forEach() method.
For…Of Loop Structure:
As such:
for(variable of iterable){
execute code
}Variable: this is primitive you will iterate over (string, integer, boolean, etc).
Iterable: this is what you will be iterating. You can iterate strings, arrays, maps, and nodelists.
Easy Example:
Alright. Let’s do an easy example. One you can test easily with some console.log()’s.
//open up inspect and paste this into your console, it's the easiest visual representation.let string = "this is a string"
for(letter of string){
console.log(letter)
}
So it’s apparent the “for…in” iterates every letter, and logs it to the console. Beautifully simple.
An Algorithm Style Problem:
Let’s do a super easy algorithm problem. What we must do is write a function to determine how many times a letter occurs in a string, then return that number along with the number of times it occurred. So your function will take a string, and a letter as arguments.
let string = "this is the string we will be iterating to see which letter occurs the most"
let letterToCount = "c"Try yourself first before you look at the answer, this type of deep thought is a skill you need to hone when you are starting to program. And it’s super fun.
Remember SHELL is useful.
Solution:
function highestLetter(string,letterToCount){
let count = 0
for(element of string){
if(element === letterToCount){
count++
}
} return `${letterToCount} occurred ${count} times in the sentence.`
}Maps:
Maps are an interesting type of object in JS. I am still fairly new to them, so what better time to work on them than during my blog post?
About Maps:
Maps are a type of object in Javascript, with it you can set key/value pairs. However, instead of only having the keys only be string/symbol in objects, with Maps you can use all primitives (strings, booleans, null, undefined, integers), objects, arrays, and even functions.
They come with methods you can call on a map to retrieve and manipulate data.
Read more about Maps here:
Example:
function maps(){
let animalHabitat = new Map([["Jungle", "Gorilla"],["Desert","Lion"],["Tundra","Polar Bear"]]) console.log(animalHabitat); for([key,value] of animalHabitat){
console.log("The " + value + " lives in the " + key + ".");
}
}
maps()
So here we are creating a new Map set to the variable of animal habitats. Where the keys are habitats, and the values are the animal.
It console.log(‘s)
"The Gorilla lives in the Jungle."
"The Lion lives in the Desert."
"The Polar Bear lives in the Tundra."Adding a key/value:
animalEnvironment.set(["Lake","Trout"])for([key,value] of animalHabitat){
console.log("The " + value + " lives in the " + key + ".");
}
}
maps()
Console.log()’s:
"The Gorilla lives in the Jungle."
"The Lion lives in the Desert."
"The Polar Bear lives in the Tundra."
"The Trout lives in the Lake."
