Iterate over “Array” in Javascript, not just regular for loop? 😏

Photo by Pawel Czerwinski on Unsplash

Did you forget how to loop over Array apart from using regular for statement and not just .map() because you don’t want to generate a new array with the same size?

Or you just forgot how to do it like me? 😂 Here is a quick note & love from me 💜

Level 1 — Simple For Statement

Ok, I am going to start with the simplest way, for statement for some context and comparison! 😘

So, what we need to do is just iterate over it, DONE.

const array = ['a', 'b', 'c'];
for (for i = 0; i < array.length; i++) {
  console.log(array[i]);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"

Ready for the alternative?

Level 2 — Using for…of 😏

So, the alternative way is here by using for...of as we have element value in each iteration, for instance;

const array = ['a', 'b', 'c'];
for (const element of array) {
  console.log(element);
}
// expected output: "a"
// expected output: "b"
// expected output: "c"

NOTE: You can use const to declare the variable as long as it's not reassigned within the loop body (it can change between iterations, because those are two separate variables). Otherwise, you can use let.

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

It’s not just for the array that can use for...of to iterate over it but it can also be used by

Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), as well as the arguments object, generators produced by generator functions, and user-defined iterables.

Ref: for...of

Bonus — Difference between for…of and for…in

I created a blog about for..in previously, and if you wonder what is the difference between that, let me tell you.

Both for...in and for...of statements iterate over something. The main difference between them is in what they iterate over.

Long story short, for...in loop over properties while for...of looping over the values, you can read the example below!

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

const iterable = [3, 5, 7];
iterable.foo = "hello";

for (const i in iterable) {
  console.log(i);
}
// "0", "1", "2", "foo", "arrCustom", "objCustom"

for (const i in iterable) {
  if (Object.hasOwn(iterable, i)) {
    console.log(i);
  }
}
// "0" "1" "2" "foo"

for (const i of iterable) {
  console.log(i);
}
// 3 5 7

1st iteration — It logs 0, 1, 2 because it’s a key of an array [3, 5, 7] and foobecause we add it there together with arrCustom, objCustom because it’s the prototype of Object & Array we manually added in lines 1–2.

2nd iteration — It logs only 0, 1, 2, foo because we use Object.hasOwn() it to check and log only the ones that are not inherited.

😘 Explanation of Object inheritance in Javascript will be in the next blog.

3rd iteration — Just logs the value of the array.