For loops, for...of, and forEach oh my!

As someone who has spent the better part of the past month and a half learning and writing in Ruby, transitioning to Javascript has been a bit disorienting.

Arrays in particular are a type of data that I have had the opportunity to play around with quite a bit over the past month and a half. As a result of using primarily Ruby, I am quite familiar with the each enumerable.

array1 = [1, 2, 3, 4]

def return_all(array)
  array.each do |number|
    puts number
  end
end

return_all(array)

# => "1"
# => "2"
# => "3"
# => "4"

For loops

Naturally, I was a bit apprehensive when considering how to iterate through an array in Javascript. I had some idea of what a for loop was but I was under the impression that I would have to write a much longer function than I would in Ruby.

const array1 = [1, 2, 3, 4]

function returnAll(array) {
  for (let i = 0; i < array.length; i++) {
    console.log(array[i])
  }
}

returnAll(array);

// => 1
// => 2
// => 3
// => 4
// => undefined

As you can see, the above function is a bit longer in terms of syntax than the ruby function above. Although a for loop is the most standard way to iterate over an array in Javascript, as a Ruby user, I was looking for another way to iterate over an array.

In reading more about arrays in Javascript I stumbled across two other ways of iterating over an array. The first, a for ... of statement can be used to loop over more than just an array. According to the MDN Web Docs a for ... of statement can iterate over strings, arrays, typedarrays, maps, and sets.

for ... of

A for ... of statement allows you to use a variable that represents a piece of the data type that you are iterating over. In this way it is very similar to the .each enumerable from Ruby although the syntax looks a bit different.

const array1 = [1, 2, 3, 4]

function returnAll(array) {
  for (let number of array) {
    console.log(number)
  }
};

returnAll(array);

// => 1
// => 2
// => 3
// => 4
// => undefined

In the above code, our returnAll function has been slimmed down quite a bit from the larger for loop that we saw initially. Our for ... of statement closely resembles the Ruby function that we wrote out at the start. A for ... of statement is also very easy to read. When I look at the above function I get a better idea of what it will do than our earlier for loop.

.forEach

Another way to iterate over an array in Javascript is using the forEach method. When we reference the MDN Web Docs on the forEach method, we can see that this method is specific to arrays and is therefore not as versatile as the for ... of statement that we saw above. In my opinion however, it is still a simpler way to iterate over an array than our for loop.

const array1 = [1, 2, 3, 4]

function returnAll(array) {
  array.forEach(element => {
    console.log(element)
  })
};

returnAll(array);

// => 1
// => 2
// => 3
// => 4
// => undefined

The forEach method is a bit different from both our for loop and the for ... of statement that we saw above. Rather than writing out a for statement, we are calling a method on our array. However, I still prefer the forEach method to a for loop when iterating over arrays in terms of readability.

One particular proverb that I have heard quite a few times is "There is more than one way to skin a cat". Although I have never really liked this particular proverb because of it's imagery, I have always been able to appreciate it's message. In my programming journey so far, I have found that this particular proverb is particularly apt.

When looking at the 3 different iterators above, I can say that the for ... of statement is particularly clear to me. I will undoubtedly have to use for loops much more often as I continue my Javascript journey but for now, I have found a particular way of iterating that makes the most sense to me.