Loops

Repeating tasks in a script is the most important part when programming. This process is done using a specific statement: the loop. In JavaScript, you can use while, for (..), for (.. in ..), for (.. of ..).

Updated for  ECMAScript2015+, it requires at least version ImageJ 1.51r and Java 9. See this post for update [Link].

1. The simplest loop: while

In most of the programming languages, there is a basic loop defined by the  keyword while [Wikipedia]. Fig.1 presents the way it works.

Fig.1: Sketch presenting how a loop works. First, a variable - a counter - is initialized, then the loop contains a condition allowing the execution of all the instructions in the block or stops. At each cycle, the variable is incremented by a certain amount.

The syntax is as follows:

<init>
while (<exit>) {
  instruction #1;
  instruction #2;
  ... 
  instruction #N;
  <step>
} 

For example, to display the numbers 0, 1, 2, 3, and 4, the code with a while loop is:

let i = 0; // 1- Initialization
while (i < 5) { // 2- Exit condition
  IJ.log(i);
  i=i+1; // 3- Step
} 

A more useful example with the computation of the image mean...

++++ ES2015+: loop_while.js ++++ ++++ End of ES2015 ++++

Some explanation of the script above:

• Line 6: we get the current active image opened in ImageJ
• Line 8: Calculate the total number of pixels in this image.
• Line 11: Initialization of the counter i
• Line 12: Loop while. The condition is written such as the counter is stopping when we reach the last pixel of index width * height - 1.
• Line 14: DO NOT FORGET to increment your counter otherwise the loop will be infinite and the only way to stop it is to close ImageJ or kill the process.

Note: The line i++; is equivalent to i = i + 1;.

2. The loop for

The classical loop is defined by the keyword for [Wikipedia] followed by parenthesis containing three parts:

• initialization
• exit condition
• step

The syntax is:
for (<init>; <exit>; <step>) {
  instruction #1;
  instruction #2;
  instruction #3;
}
The principle is exactly the same as the while loop, however, all the parameters are grouped on the same line between the parentheses.

let imp = IJ.getImage(); // Assume the image is a gray-level image
let ip = imp.getProcessor();
let num_pixels = imp.getWidth() * imp.getHeight();
let sum = 0;
for (let i = 0; i < num_pixels; i++) {
  sum = sum + ip.get(i);
}
let mean = sum/num_pixels;
IJ.log(mean);

3. The loop for .. in

This loop is only available for objects whose properties are enumerable. In our example of mean calculation, we cannot use the same code as above. First, we need to get all the pixels as an array which is enumerable and then, use the loop for .. in.

let imp = IJ.getImage();
let pixels = imp.getProcessor().getPixels();
let sum=0;
for (let i in pixels) {
  sum += pixels[i]>>>0 & 0xff;
}
let mean_for_in = sum/pixels.length;
IJ.log(`Mean for..in: ${mean_for_in}`);

4. The loop for .. of (new in ES2015)

This loop is only available for objects iterable like Array and other collection objects.

....
sum=0;
for (let pix of pixels) {
  sum +=pix>>>0&0xff;
}
let mean_for_of=sum/pixels.length;
IJ.log(`Mean for ..of: ${mean_for_of}`);

Note: This loop is similar as the Python loop for ... in. Don't mix the two syntaxes.

Thank you for reading.

<<  Previous: Conditionals Next: Functions  >>

5. Other crazybiocomputing posts

Further readings are available in ...

• Programming in JavaScript Series  [Link]
• JavaScript/ECMAScript TOC [Link]