CodingSpot.com

Loop through an array in Javascript

Christian C. Salvadó — Fri, 05 Oct 2018 05:42:00 GMT

Iterating arrays in Javascript

For a long time, in the era of ECMAScript 3 (1999 - 2008), the for..in statement was very often misused to iterate over array objects, this statement is really meant to enumerate object properties, no question why many people reported strange behaviors. For a newbie or a foreigner of the Javascript world, coming from other languages, the for-in statement might look just good but it shouldn't be used for this.

The simplest way I long suggested was to use a plain sequential for loop:

let array = ["Hello","World"];
for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

And this was the most common way to iterate array objects, of course you can also use any other sequential loop like while, do..while, etc...

Enter ECMAScript 5 `forEach`

The ECMAScript 5 Specification (ES5 for short) introduced a lot of very helpful array methods, one of them, the Array.prototype.forEach and it gives us a very short way to iterate over an array:

array.forEach(function (item) {
    console.log(item);
});

Being almost 9 years as the time of writing that the ES5 spec. was released (Dec. 2009), it has been implemented by almost all modern engines in the desktop, server and mobile environments, so it's safe to use them.

And with the ES6 arrow function syntax, it's even more succinct:

array.forEach(item => console.log(item));

Very short and sweet.

Arrow functions are also being widely implemented, unless you plan to support very old platforms (e.g. IE11) you are also safe to go.

The forEach method accepts two parameters, the first a callback function, and the second one an optional thisArg, which in case provided, will set the this value of the callback function if possible (e.g. it not possible to bind the this value of arrow functions).

The callback function passed to forEach will actually receive 3 arguments when called for each element and they are:

The current element
The index of the element
A reference to the array object being iterated

For example, the following:

var colors = ['red', 'green', 'blue'];

colors.forEach(function (c, i, array) {
  console.log(c, i, array);1
});

Will log:

red   0 Array(3) [ "red", "green", "blue" ]
green 1 Array(3) [ "red", "green", "blue" ]
blue  2 Array(3) [ "red", "green", "blue" ]

However there are some differences with a sequential loop, for instance, the forEach method lacks the ability to stop its execution at an arbitrary point, thing that we can easily do with the break statement. Also you cannot return from the enclosing function if you wanted, since the return value of the callback is simply ignored.

Another difference is that if we have an sparse array, non existent elements are skipped by the forEach method:

var array = [1, , , , 2];
array.forEach((el, i) => console.log(el, i));

// Will log:
// 1  0
// 2  4

Sparse arrays or arrays with holes are by definition, cases in which some of the index properties are missing from the object itself, and there is no continuos sequence from 0 to length - 1.

Enter ECMAScript 6 `for-of`

The ES6 standard introduces the concept of iterable objects and defined a new construct for traversing data, the for...of statement.

Iterables and generators are a big piece of ES6 that deserve to have its own article.

Array objects are by definition built-in iterables in ES6, so you can use this statement on them:

let colors = ['red', 'green', 'blue'];
for (const color of colors){
  console.log(color);
}

Since it's a ES6 statement, we can use more of its features, like let and const bindings.

The for-of statement is also widely implemented in mature platforms, so you can use it if you don't plan to target old engines.

Why not use `for-in` ?

Coming back to the for-in statement, it should be avoided to iterate arrays because as I said earlier, this statement is really meant to enumerate object properties.

It can give unexpected results if you use it to iterate over arrays because:

The order of enumeration is not guaranteed by the specification, the array indexes may not be visited in numeric order.
Inherited properties are also enumerated.

The second point can give you a lot of problems, for example, if the Array.prototype object is extended to include a method there, that property will be also enumerated.

For example:

// Don't do this!
Array.prototype.test = "inherited!";
var array = ['a', 'b', 'c'];
array.prop = 'prop';

for (var i in array) {
  console.log(array[i]);
}

The above code will log, "a", "b", "c" "prop" and "inherited!".

That was a big problem in the past, particularly if you used some library that relied heavily on native prototypes augmentation (such as early versions of MooTools for example).

The for-in statement as I said before is there to enumerate object properties, for example:

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
    // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    console.log("prop: " + prop + " value: " + obj[prop])
  }
}

In the above example the hasOwnProperty method allows you to enumerate only own properties, that's it, only the properties that the object physically has, no inherited properties.

Now with ECMAScript 5 we have the Object.keys method to get the enumerable own properties.

Conclusions

If you can target ES6, use the for-of statement, otherwise use the Array.prototype.forEach method, but if you want to have flow control on the iteration you want to use a traditional for loop.

Here are the pros and cons of each one of them:

`for-of`

Pros
- Clean and easy to read.
- Can use let and const ES6 bindings, this eliminates possible closure problems when working with functions within loops.
- Can use flow control statements like break, continue and labels to potentially manage complex nested looping.
- Can return from the enclosing function.
- Can iterate over array like objects, like the arguments object, strings, Maps, other built-in iterables and custom iterators.
Cons
- Requires you to be able to target ES6

`Array.prototype.forEach`

Pros
- Clean and easy to read.
- Provides the element index if needed without needing to keep track of incrementing a variable.
Cons
- Cannot have complete control of its flow since we cannot use break, continue or labels.
- Cannot return from the enclosing function.

`for` or any traditional sequential loop

Pros
- Works on every platform.
- Can be potentially the fastest way if performance is critical.
- Can use flow control statements like break, continue and labels.
- Can return from the enclosing function.
Cons
- Some might consider it less "elegant" and harder to read.
- Need to keep track and increment the index variable.

And remember, enumeration is not iteration!

Answering the Juriy Zaytsev JavaScript Quiz

Christian C. Salvadó — Wed, 10 Feb 2010 03:42:00 GMT

Answering the quiz

Juriy Zaytsev (aka kangax) made a really nice JavaScript quiz, which covers a lot of interesting subjects such as scoping, function expressions, variable and function declarations, references, order of evaluation, object instantiation and more.

I’ve had a great time answering those questions, and I would like to share my answers with a brief explanation.

#1

    (function(){
      return typeof arguments;
    })();

It will return "object", because arguments is just that, a simple object.

#2

    var f = function g(){ return 23; };
    typeof g();

The answer is Error.

A ReferenceError will be generated, because the name (Identifier) of a FunctionExpression can be referenced only from inside its FunctionBody, to allow the function to make recursive calls. Unlike with a FunctionDeclaration the Identifier of a FunctionExpression doesn’t affect the enclosing scope.

There are a lot of misconceptions about the differences between function expressions and function definitions, I would highly recommend the following article also written by kangax:

Named function expressions demystified

Note: In the Microsoft JScript implementation there is a bug, a serious deviation from the ECMA specification, where identifiers of function expressions leak to its enclosing scope.

#3

    (function(x){
      delete x;
      return x;
    })(1);

The answer is 1, because argument identifiers are created as properties of the Variable Object, (the Activation Object in the case of Function Code), following the rules of a variable instantiation for the Function Code execution context, those properties are created with the { DontDelete } attribute, so they can’t be deleted.

#4

    var y = 1, x = y = typeof x;
    x;

The answer is "undefined", because the Variable statement at parse time will define the variables (they will be “hoisted” to its enclosing scope, and initialized with the undefined value), then in execution time and due the right-to-left associativity of the AssignmentOperator the first assignment will be done (y = 1;) then, the second assignment: (y = typeof x;) that will return "undefined" and this is the value that will be used in the very last one: (x = "undefined";).

That it’s easier to realize if we reorder the statements:

var y, x; // initialized with undefined
y = 1;
y = typeof x; // x is undefined, so "undefined" is returned
x = y; // "undefined"
x;

#5

    (function f(f){
      return typeof f();
    })(function(){ return 1; });

This one plays with the identifier names inside the scope of the function.

The answer is "number", because the FunctionExpression Identifier (the function name) is bound to the scope chain, but later is overwritten by the value of the f argument.

#6

    var foo = {
      bar: function() { return this.baz; },
      baz: 1
    };
    (function(){
      return typeof arguments[0]();
    })(foo.bar);

The answer is "undefined", because the foo.bar function is executed with the this value pointing to the arguments object of the second function.

Remember that the function context (the this value) can be set implicitly, depending on how a function is invoked, e.g.:

foo(); // a simple function call, this will point to the global object
(function () { })();

obj.method(); // this == obj inside method
obj['method']();

In this question the [] property accessor is used on the arguments object, causing the context change, we are executing the foo.bar function as if it were a "method" of the arguments object.

#7

    var foo = {
      bar: function(){ return this.baz; },
      baz: 1
    }
    typeof (f = foo.bar)();

The answer is "undefined".

This case is similar to the previous one, because the assignment operator will simply return a reference to foo.bar, causing that when we invoke the function, the context point to the Global object.

#8

    var f = (function f(){ return "1"; }, function g(){ return 2; })();
    typeof f;

The answer is "number", because the Comma Operator, will return the value of the second operand, in this case a reference to the g function, that will be invoked and f will contain the returned 2 number literal.

For example:

  (1,2) == 2; // true

#9

    var x = 1;
    if (function f(){}) {
      x += typeof f;
    }
    x;

The answer is "1undefined", because the condition expression of the if statement is a Function Expression, it will evaluate to true and the if block will be executed, but the f identifier it's not available.

Inside the if statement, the typeof operator returns a String ("undefined" since f doesn't exist), and that causes the String concatenation when the += operator is used.

The following can help to realize it:

    var x = 1;
    if (true) {
      x += typeof f; // f is not defined
    }
    x; // "1undefined"

Note: In JScript implementations due the bug I mentioned early, the result of this code will be "1function" which is not correct.

#10

    var x = [typeof x, typeof y][1];
    typeof typeof x;

The answer is "string".

The first statement is just trying to confuse you, because as you know, the typeof operator will return always a String value, so you can figure out why typeof typeof anything; will return always "string" also.

#11

    (function(foo){
      return typeof foo.bar;
    })({ foo: { bar: 1 } });

The answer is "undefined", because as the foo argument, we are passing this object: { foo: { bar: 1 } }.

foo.bar doesn't exist, the bar property is actually accessible by foo.foo.bar.

#12

    (function f(){
      function f(){ return 1; }
      return f();
      function f(){ return 2; }
    })();

The answer is 2, because Function Declarations are "hoisted" at parse time, the second f function will replace the first one, even if the second is defined after the return statement.

#13

    function f(){ return f; }
    new f() instanceof f;

The answer is false because the actual object that is instance of f, is the this value within the constructor, and returning a non-primitive from a constructor, causes that this object with the right [[Prototype]] property (this) to be lost.

So basically, f is not an instance of f, since:

    new f() == f; // true

We can check that behavior by looking how the [[Construct]] internal operation works.

#14

    with (function(x, undefined){}) length;

The answer is 2, because the with statement augments the scope chain with the properties of the passed object, in this case a function.

The length property of functions objects contains the number of expected arguments, in this case two arguments.

Note: undefined has no special meaning, is just another identifier, in this example is used as an argument in the FormalParameterList.

CodingSpot.com

Loop through an array in Javascript

Iterating arrays in Javascript

Enter ECMAScript 5 forEach

Enter ECMAScript 6 for-of

Why not use for-in ?