Other features:

forEach binding for arrays of constant size

Simple (one-time) forEach

One can apply forEach both to an observable array and to a usual (non-observable) array:

← must display 0 1 2 3 4

Similarly, the following line must be a sequence of letters:

When dealing with observable array, index (position) of an element will be supplied to functions reacting on events (for example, onClick).

Open debugger console and click the numbers below.

Let us repeat numerical sequence above this time using observable array:

(Click and see messages in the debug console.)

← The last element was added using push method. See the HTML source. the first arguiment of clickMe is an event containng pointer (mouse) coordinates.

Nested forEach

A table cell below is bound to a non-observable:

When a table cell below is bound to an observable

(Click and see messages in the debug console.)

In case of double (nested) forEach, the function clickMe receives only one index: column number. So how can we know the line number?

– by marking the rows of the table with the function rowNumber. So when we click a table cell, we can get the id of a line from clickEvent.target.parentNode.id, see foreach.js

An alternative way: Array.from(element.parentNode.children).indexOf(element) ← but it is probably taking more time.

---

forEach for arrays with dynamically changing number of elements

Here is a toy example (a real-life code is server/frontend/wiki-config.js): The number of links to a website depends on the number of dots in the domain name (domain level), as well as on the fact if the domain name is a part of an array:

← note that forEach works also without observables.

Dear customer, your website is bound to the following links:

←And now check how this list will change if we update the domain name so that it is no more contained in the LwS-array. For example, add an extra letter to the domain name to see the effect.