forEach, for…of, and for…in
When you first start learning JavaScript at Flatiron School the first big hurdle to overcome is the unfamiliarity of JavaScripts’ syntax. Curly braces, consts, and callback functions are unknown to us Rubyists. One of the things I initially struggled with was all the seemingly similar but somehow different ways of iterating over arrays in JavaScript: forEach, for…of, and for…in. They all, obviously, begin with for, and seem to do the same thing but with a different syntax. Prior to ECMAScript 2015 there were a few ways to execute a set of statements once for each object in a collection, namely, by using for, or a while loop. But both of these methods require the initialization of a counter, a condition, incrementing a counter, and bracket notation to access the different elements of an array.
But ECMAScript 2015 introduced for…of, which lets us iterate over the same array with one line of code.
For…of is one of the easiest methods in JavaScript for iterating over an array because it allows us to set a const variable, here we’re using element, which is assigned to each element in the array successively. In the looping examples above using for and while, let is required because we are incrementing counter variables, which takes the counter’s current value, adds 1 to it, and assigns that new value to the let variable. For…of has also been found to be up to 24% faster than using forEach, so it also boasts performance benefits as well.
For…in
Recognizing the difference between for…of and for…in was one of the many early struggles I had with JavaScripts’ syntax. A mnemonic I learned on Stack Overflow to keep track of the two is: “for..in..keys === foreign keys === use for...in for keys! As such, use for...of for values.” For…in is used for iterating over the properties of an object in JavaScript, but it doesn’t pass all the properties of the object into the block, just the keys.
Above we have a cat object with a set of defined key-value pairs. By using for…in with the const variable key, which is also console logged, we are able to access each of the objects keys. Each of the keys in our cat object is assigned to the const key variable and passed into the block set by the curly braces, we see the result is each key from cat is console logged in the terminal. If we wanted to access the values of the cat object, and not just the keys, we would simply use the bracket operator with the object’s name, as we could to access any object’s key value: cat[key].
For…in is a great tool for accessing the properties of an object, but a very bad tool for arrays. According to the MDN web docs, “a for...in loop iterates over the properties of an object in an arbitrary order,” which is problematic for ordered collections such as arrays. Using for…in on an array is comparable to shuffling the collection of elements before we iterate over them.
forEach
Like each in Ruby, JavaScripts’ forEach is a method for iterating over or processing the elements of a collection. Unlike map, reduce, or max, forEach always returns undefined to the console and does not change the that is was called on. It is the least expressive method for processing collections and doesn’t clearly communicate to other programmers what we’re trying to do when we use it. Often we want to use forEach in order to console log the elements of a collection if we’re debugging our code, or if we need to create elements on the DOM as we iterate through a collection.
forEach is a great option for working with arrays or objects, but for…of is a faster and possibly more expressive tool for working with arrays in JavaScript.
