Iterating Data Structures in JavaScript

Data Structures

Data structures in JavaScript are the backbone of functionality for most of the projects that I have made in my short coding journey. Data structures, like objects and arrays contain the information that programs need to access for a multitude of reasons. If we have a lot of information or data, these data structures will be the best way to store that information.

Of course, at some point, we will want to access this information. While it is possible to retrieve each element one by one, this is obviously not a feasible way to build code. Ideally, we would want to build one piece of code that helps us sort through the entire array or object. Luckily, we do! We can build a chunk of code using an iterator, allowing us to repeatedly fire code on the information we need to. In this post, I'll go over how we can use iterators, and some useful scenarios to employ them.

Methods Used For Iteration

There are many different methods we can use to iterate objects and arrays in JavaScript. Most of these methods will be used on arrays. I won't go over every single method, but I would like to highlight some important ones that serve to showcase iteration as a whole.

I would like to talk about a couple different types of iterators in this blog, the first type being iterators that allow you to search for existing elements within your array.

Search Iterators

As the name suggests, search iterators are used to iterate over arrays and return specific values. There are many different methods that belong to this category, that can be used in many different ways. I'll start with a very basic example to show what I mean. Here is an example of the find() method:

const prices = [9, 19, 49, 99,]

function searchPrices(price){
  if ( price > 40){
    return price
  } 
}

In this example, we would use the find method like this:

prices.find(searchPrices)

We place our array first, then the find method, and finally we pass the callback function searchTeams as the argument. The find method will go through every element in the array, and run the searchPrces function on it. When it finally finds a price over 40, it returns that price, like this:

'49'

The find method is very limited, because it only returns the first matching element it finds, but it is a good example of all search iterators. If no price matching the criteria is found, find will return undefined.

Instead of just one element, maybe you want a whole list of matching elements. This too is possible with array iterators, using the filter method:

const teams = ['76ers', 'thunder', 'timberwolves', 'heat','warriors']

function searchTeams(team){
  if (team.includes('s'))
    return team
}

Using the same notation, replacing find with filter, like this:

teams.filter(searchTeams)

which returns:

[ '76ers', 'timberwolves', 'warriors' ]

as you can see, the filter method returns all the teams that contain the letter 's', packaged in an array. It's worth making a note that if there are no matching values, instead of an undefined value, it will return an empty array. I'm sure that you can imagine many uses this method could have in retrieving data, that is the power of iterators.

Other Iterators

It's hard for me to come up with a name that incapsulates non-search array iterators, because their uses are vast and unique. The most basic, but still very useful iterator is forEach. It has a somewhat intuitive name, and you might have guessed that for each array element, it calls a function. Lets take a look at an example:

const teams = ['yankees', 'mets', 'mariners']

function changeTeams(team){
   let result = team.toUpperCase()

   console.log(result)


}

teams.forEach(changeTeams)

As you may have already guess, the result is that the console logs the follwing:

YANKEES
METS
MARINERS

So as you can see, the forEach did exactly what is what meant to do. It went to each element in the array, and ran the changeTeams function, making them uppercase.

Using Iteration for Non-Array Objects

One way to utilize iteration on non-array objects is to convert part of the object into an iterable array. While you cannot use methods I've outlines to iterate over non-array objects, you can use them after you convert into an array.
The way you would accomplish this is by using the Object.keys() or Object.values() method. After using one of those two methods, you can iterate the array that is returned.

const car = {
  make: "Toyota",
  model: "Prius",
  year: 2008,
};

typeOfCar = Object.values(car)
console.log(typeOfCar)

In the above example, we use Object.values() to get an array of information from the object car. When typeOfCar is logged, it will look like this:

[ 'Toyota', 'Prius', 2008 ]

Now that we have this array, we can use any iterators we want on it. The same methodology will work using Object.keys(). This allows us to utilize iteration methods on non-array objects.

Conclusion

Iterators are some of the most important and useful methods. Whether you are searching for elements, want to change an array, return a modified copy of an array, or reduce an array to a single value, there is an iterator that will do it for you. What I've shown in this short blog is only one very small glimpse into the power of iterating data structures, and I encourage anyone to explore them as much as possible.

Resources

https://www.w3schools.com/jsref/jsref_find.asp
https://www.w3schools.com/jsref/jsref_filter.asp
https://www.w3schools.com/jsref/jsref_object_values.asp
https://www.w3schools.com/jsref/jsref_object_keys.asp
https://www.w3schools.com/jsref/jsref_foreach.asp