menu
Menu
Drakon.Tech logo
Drakon.Tech
Open IDE
DocumentationProgramming in DRAKONTutorialsTutorial 1. Hello world!Tutorial 2. Variables and functionsTutorial 3. Basic flow controlTutorial 4. ChoiceTutorial 5. For each loopTutorial 6. The arrow loopTutorial 7. SilhouetteTutorial 8. Lambdas and exceptionsTutorial 9. ModulesTutorial 10. Concurrent programming with scenariosTutorial 11. Working with source controlExamplesLibrariesThe source code

Tutorial 5. For each loop

How to iterate over an array

To iterate over an array, type the item variable, a semicolon, and then the array variable or expression. This notation is similar to the for-of expression, except that there is no need to declare the item variable. The generated code is compatible with old browsers and does not depend on for-of support.

Loop over an array in Drakon.Tech

Let's build and run the project. We are going to see the elements of the array in the console.

apples
oranges
tomatoes
carrots

How to iterate over an object

To iterate over an object's properties, type two variables instead of one, separated by a comma. The first variable will have the key of the current property, and the second will hold its value. As with iteration over arrays, do not declare any variables.

Loop over an object in Drakon.Tech

Two loops on one skewer look too heavy. Let's put each loop on a separate branch of a silhouette. First, we transform the flowchart into a silhouette. Then, we cut and paste the second loop in its silhouette branch. Let's give the branches meaningful names.

Different looping techniques in Drakon.Tech

Iteration over an object is implemented with the Object.keys() method, which works everywhere.

We build and run the project. The console shows both property names and values.

apples - 40
oranges - 60
tomatoes - 50
carrots - 30

The For-loop icon supports iteration over plain objects only. You cannot use Maps and Sets in a For-loop icon. To iterate over a Map or a Set, use Map.forEach() and Set.forEach() methods respectively.

The traditional "for" loop

There is one more variant of the For-loop icon. Put three expressions separated by semicolons in a For-loop icon, and you will get the traditional JavaScript for loop. Let's add one more branch to the silhouette for it.

The traditional for loop in Drakon.Tech

This construct will also output the content of the array to the console.

0 - apples
1 - oranges
2 - tomatoes
3 - carrots

As always, do not declare any variables here.

close
Close
Drakon.Tech logo
Drakon.Tech home
Programming in DRAKONTutorialsExamplesLibrariesThe source code