Skip to content
Fabian Morón Zirfas edited this page Jun 13, 2025 · 3 revisions

Loops are everywhere in programming. It is the one thing that allows you to do infinite repetitions. So take some time to understand these constructs. They will be the base of most of your scripts

while ( Boolean ) { /* Do Stuff Here! */ }

for ( var i = 0; i < thing.length; i++ ){ /* Do Stuff Here! */ }

for (var key in Object ){ /* Do Stuff Here! */ }

var x = [1, 2, 3];
for (var i = 0; i < x.length; i++) {
	x[i] += 1;
}
alert(x);

Let's play with loops

/*
     Loops
    */

// this is our string
var source_string = "Hi there. I am a string please chop me into pieces";
var source_array = new Array(); // create a new array like this
var target_array = []; // or like this
var target_string; // this will hold our result
var delimiter = " "; // this is what we use to split and join our string

var source_array = source_string.split(delimiter); // split the string into an array

alert("Source string: " + source_string + "\nTarget array:\n" + source_array); // lets see what it did

/*
    Now loop that array we created
    there are three parts in this for loop construct
    var index = 0; // this is our counter 
    than follows a condition
    index < source_array.length
    as long as this is true we do the third part
    index = index + 1; // we increment the index by one
    
    Than the condition loop block { } is executed
    when the block is done he will again check if the condition
    index < source_array.length
    is still true. If so increment by one and execute the block { }
    
    you can stop a loop by using break;
    
    like:
    
    if(index == 5){
    break;
    }
    
    or step over one index by using
    
    if(index == 5){
    continue
    }
    
    Play with it a lot. Don't worry you wont go blind
    
    */
for (var index = 0; index < source_array.length; index = index + 1) {
	target_array.push(source_array[index]);
}

// lets see what happened in the target array
alert("Target array: " + target_array);

// join the array again
target_string = target_array.join(delimiter);

// hey we got our string back
alert("hey we got our string back:\n" + target_string);

There is a different kind of loop. The while loop. He does the same as every other loop but depends more on a condition than in/decreasing an index. Have a look at it:

var highest_value = 20;

var counter = 0;

var aNumber = 200;
while (counter < highest_value) {
	aNumber -= 20;

	counter++;
}

alert("Our result is: " + aNumber);

Looping Objects

The third kind of loop the for(var key in object) can be used to loop objects. Here the key is not can be an index. Important is it also can be the name of a property. Don't use these loops an Arrays! Have a look at this stackoverflow

var obj = {
	a: "Hello World",
	b: 5.5,
	c: true,
	x: [1, 2, 3],
}; //Object

for (var key in obj) {
	if (obj.hasOwnProperty(key)) {
		alert(key);
	}
}
alert(obj["a"]);

Strange Looping

You can also create for loops like the following one. But you wont see this very often.

var i = 0;
var counter = 5;
for (i; i < 5; i++, counter++) {
	alert(counter);
}

Home

Clone this wiki locally