JS Loop Visualizer - Help Guide

📘 Application Overview

This application helps developers and students understand how JavaScript loops operate by allowing live loop construction and execution.

for

while

do...while

for...of

for...in

Main Purpose

Teach JavaScript loop behavior interactively
Execute custom code during loop iterations
Visualize collected loop output instantly
Provide ready-made learning examples
Allow experimentation with dynamic loop logic

🖥 Interface Breakdown

Loop Type Selector

Users choose the loop style they want to build. The interface updates automatically depending on the selected loop type.

Dynamic Input Fields

Input fields are generated in real time by the updateUI() function.

Loop Body Editor

Users enter JavaScript code that executes during every loop iteration.

Output Panel

Displays the collected results stored in the output array.

🚀 How To Use The App

1 Select a loop type from the dropdown menu.

2 Configure the loop settings such as initialization, conditions, variables, or iterables.

3 Enter JavaScript code inside the Body field.

4 Click Run Loop to execute the loop.

5 Review the generated output in the Output panel.

6 Use Copy Output to copy results to the clipboard.

🔁 Supported Loop Types

for Loop

Traditional counting loop using initialization, condition, and increment expressions.

while Loop

Executes repeatedly while a condition evaluates to true.

do...while Loop

Executes at least once before checking the condition.

for...of Loop

Iterates through iterable values such as arrays.

for...in Loop

Iterates through object property keys.

⚙ Internal Logic

Dynamic Interface Rendering

The updateUI() function checks the selected loop type and injects matching input fields into the page.

if(type === 'for'){
    html += makeInput('init','Initialization','let i=0');
    html += makeInput('cond','Condition','i<5');
    html += makeInput('inc','Increment','i++');
}

Dynamic Loop Execution

The application uses JavaScript's eval() and new Function() to execute user-defined logic dynamically.

const fn = new Function(
    'i',
    'output',
    document.getElementById('body').value
);

fn(i, output);

💡 Example Usage

Example 1 — Basic for Loop

Initialization: let i=0
Condition: i<5
Increment: i++
Body:
output.push(i)

Expected Output:

[
  0,
  1,
  2,
  3,
  4
]

Example 2 — for...of Array Iteration

Iterable:
["a","b","c"]

Body:
output.push(i)

🧠 Important Functions

updateUI()

Updates form fields based on loop selection.

makeInput()

Generates reusable input controls dynamically.

runLoop()

Executes the selected loop and processes iteration logic.

copyOutput()

Copies the generated output to the clipboard.

loadExample()

Loads predefined demo configurations into the builder.

🔒 Security Considerations

The application uses eval() and new Function() to execute custom JavaScript. This is useful for learning and experimentation but should be handled carefully in production environments.

Avoid executing untrusted user input
Sandbox execution when deployed publicly
Validate loop conditions to prevent infinite loops
Consider replacing eval-based execution with safer parsers

JS Loop Visualizer & Builder