MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Loops

Standard "for" loops


for (var i = 0; i < 100; i++) {
 console.log(i);
}

Output

0
1
...
99

Multiple declarations

Commonly used to cache the length of an array.


var array = ['a', 'b', 'c'];
for (var i = 0; i < array.length; i++) {
 console.log(array[i]);
}

Output

'a'
'b'
'c'

Changing the increment


for (var i = 0; i < 100; i += 2 /* Can also be: i = i + 2 */) {
 console.log(i);
}

Output

0
2
4
...
98

Decremented loop


for (var i = 100; i >=0; i--) {
 console.log(i);
}

Output

100
99
98
...
0

"for ... of" loop


const iterable = [0, 1, 2];
for (let i of iterable) {
 console.log(i);
}

Output

0
1
2

The advantages from the for...of loop are:

  • This is the most concise, direct syntax yet for looping through array elements
  • It avoids all the pitfalls of for...in
  • Unlike forEach(), it works with break, continue, and return

  • "for ... in" loop

    for...in is intended for iterating over object keys, not array indexes. Using it to loop through an array is generally discouraged. It also includes properties from the prototype, so it may be necessary to check if the key is within the object using hasOwnProperty. If any attributes in the object are defined by the defineProperty/defineProperties method and set the param enumerable: false, those attributes will be inaccessible.


    var object = {"a":"foo", "b":"bar", "c":"baz"};
    // `a` is inaccessible
    Object.defineProperty(object , 'a', {
     enumerable: false,
    });
    for (var key in object) {
     if (object.hasOwnProperty(key)) {
     console.log('object.' + key + ', ' + object[key]);
     }
    }
    

    Output

    object.b, bar
    object.c, baz

    "while" Loops

    Standard While Loop

    A standard while loop will execute until the condition given is false:


    var i = 0;
    while (i < 100) {
     console.log(i);
     i++;
    }

    Output

    0
    1
    ...
    99

    Decremented loop


    var i = 100;
    while (i > 0) {
    console.log(i);
     i--; /* equivalent to i=i-1 */
    }

    Output

    100
    99
    98
    ...
    1

    Do...while Loop

    A do...while loop will always execute at least once, regardless of whether the condition is true or false:


    var i = 101;
    do {
     console.log(i);
    } while (i < 100);

    Output

    101

    "do ... while" loop


    var availableName;
    do {
     availableName = getRandomName();
    } while (isNameUsed(name));

    A do while loop is guaranteed to run at least once as it's condition is only checked at the end of an iteration. A traditional while loop may run zero or more times as its condition is checked at the beginning of an iteration.


    Break specific nested loops

    We can name our loops and break the specific one when necessary


    for (var i = 0;i<3;i++){
     innerloop:
     for (var j = 0;j <3; j++){
     console.log(i);
     console.log(j);
     if (j == 1){
     break outerloop;
     }
     }
    }

    Output

    0
    0
    0
    1

    Break and continue labels

    Break and continue statements can be followed by an optional label which works like some kind of a goto statement, resumes execution from the label referenced position


    for(var i = 0; i < 5; i++){
     nextLoop2Iteration:
     for(var j = 0; j < 5; j++){
     if(i == j) break nextLoop2Iteration;
     console.log(i, j);
     }
    }

    Output

    i=0 j=0 skips rest of j values
    1 0
    i=1 j=1 skips rest of j values
    2 0
    2 1 i=2 j=2 skips rest of j values
    3 0
    3 1
    3 2
    i=3 j=3 skips rest of j values
    4 0
    4 1
    4 2
    4 3
    i=4 j=4 does not log and loops are done


    Conclusion

    In this page (written and validated by ) you learned about Javascript Loops . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Functions.



    Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


    Share On:


    Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.