SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Curently learning Javascript question

    Hi all,

    Im currently very new to javascript and have a quick question, how do you know what tyoe of loop to use and when?

    Kyle

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kyllle View Post
    Im currently very new to javascript and have a quick question, how do you know what tyoe of loop to use and when?
    Let's take the for loop, a for..in loop, a while loop, and a do...while loop as an example.

    For loops

    A for loop is best to use when you have a known number of iterations that will not change during the loop.

    Another useful benefit of the for loop is that you can easily change the increment, allowing you to go forward or backwards, or in this example, to add up the even indexes.

    A good for loop:
    Code javascript:
    var values = [1, 3, 4, 6, 7],
        i,
        evenTotal;
    for (i = 0; i < values.length; i += 2) {
        evenTotal += values[i];
    }
    // evenTotal = 1 + 4 + 7 = 12

    If however your for loop depends on an array or a collection that will be changing, it's not such a good idea.

    A bad for loop:
    Code javascript:
    var els = document.getElementsByTagName('p'),
        i,
        el;
    for (i = 0; i < els.length; i += 1) {
        el = els[i];
        if (el.firstChild.length === 0) {
            el.parentNode.removeChild(el);
        }
    }
    // Every element removed reduces the size of the els collection
    // so the elements immediately following a removed item
    // will end up being skipped

    The above will have problems whenever a change happens to the collection.

    You can avoid that problem by working backwards through the collection.

    For..in loops

    The for..in loop allows you to iterate over all of the properties of an object.

    A good for...in loop:
    Code javascript:
    var dog = {
        name: 'Dug',
        speak: function() {
            alert('Woof!');
        },
        feed: function () {
            alert('Om nom nom');
        },
        find: function (what) {
            if (!what) {
                what = 'food';
            }
            alert('Point at ' + what + '!');
        }
    };
    for (property in dog) {
        if (typeof dog[property] === 'function') {
            dog[property]();
        }
    }
    // this dog will do everything he can do: speak, feed, and find

    It should not be used for iterating over arrays, because for...in picks up all properties of an object, not just the array indexes themself.


    A bad for loop:
    Code javascript:
    Array.prototype.sum = function () {
        var i,
            total = 0;
        for (i in this) {
            total += this[i];
        }
        return total;
    };
    var values = [1, 2, 4, 7];
    alert(values.sum());
    // You will not get the expected sum, because along with
    // this[0]...this[3] you also get this['sum']

    Success is achieved here by using a normal for loop instead of the for...in loop

    While loops
    A while loop is used so that you do something as long as a condition is still being met.

    A good while loop:
    Code javascript:
    var total = 0;
    while (total < 10) {
        total += Math.floor(random() * 10);
    }
    // total will be a whole number from 10 to 19

    Be aware that while loops keep on going, even when the results don't make sense to you.

    A bad while loop:
    Code javascript:
    var el = document.getElementById('para');
    while (el.nodeName !== 'DIV') {
        el = el.parentNode;
    }
    // This will error if the paragraph is not contained somewhere inside of a div.

    You can fix this by adding a sanity check for the body.

    Code javascript:
    while (el.nodeName !== 'DIV' && el.nodeName !== 'BODY') {
        ...


    Do...while loops
    A while...do loop is the same as a while loop, except that the condition occurs at the end, not at the start.

    This is useful where the condition cannot be checked until afterwards

    A do...while loop:
    Code javascript:
    var value,
        total = 0;
    do {
        value = Math.floor(random() * 10);
        total += value;
    } while (value < 9);
    // Will keep adding numbers until a 9 is added
    Last edited by paul_wilkins; Nov 18, 2010 at 17:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    *clap clap clap* Nice post.

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep, very nice post and examples

    If you would like a summary of it all, I think of it this way

    FOR loop - if you know how many iterations there will be

    WHILE loop - if the number of iterations is unknown

    DO WHILE - if you need to do 1 iteration before testing for some condition.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Raffles View Post
    *clap clap clap* Nice post.
    Thanks. While doing it I was thinking that it might be possible for someone to submit is as a course assignment, but even with that small risk, at least others here stand to benefit from it too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly great answer pmw57 it clears things up for me quite a bit.

    I'm still new to Javascript and in one of the books I'm reading (Object Oriented Javascript p58) the author states that for in loops are designed to iterate objects and arrays.

    If possible you give a working example of when for in loops shouldn't be used on arrays? Just so I can get a better understanding.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ninja.jay View Post
    If possible you give a working example of when for in loops shouldn't be used on arrays? Just so I can get a better understanding.
    Of course.

    While it's technically possible to use for...in on arrays, you should never use it on arrays.

    This is because arrays do not consist solely of indexed items. Arrays are objects, just like everything else in javascript, which means that arrays are capable of having other properties on them that you do not expect.

    For example: somewhere in your code you have:

    Code javascript:
    for (i in gizmos) {
        ...
    }

    Then you decide to add someone else's script to your page, which includes:

    Code javascript:
    Array.prototype.processWidget = function () {
     
    }

    All of a sudden your own code stops working.

    That is why you should not use for...in for arrays. Because it provides no significant benefit, and it makes your own code fragile.

    Your code is much more resilient when you use a standard for loop.

    Even the for...in page explicitly says this too:

    Although it may be tempting to use this as a way to iterate over an Array, this is a bad idea.
    And then goes on to explain why, in detail.

    It's much safer and better to use a standard for loop.

    Code javascript:
    for (i = 0; i < gizmos.length; i += 1) {
        ...
    }

    There is though in JavaScript 1.6 a forEach method that you can use on arrays instead, which can be more preferable.

    However, some web browsers don't support JavaScript 1.6, or even 1.5 (I'm looking at you, IE), but all is not lost because the forEach page also provides some compatibility code you can use to add that functionality.

    Code javascript:
    if (!Array.prototype.forEach)
    {
      Array.prototype.forEach = function(fun /*, thisp */)
      {
        "use strict";
     
        if (this === void 0 || this === null)
          throw new TypeError();
     
        var t = Object(this);
        var len = t.length >>> 0;
        if (typeof fun !== "function")
          throw new TypeError();
     
        var thisp = arguments[1];
        for (var i = 0; i < len; i++)
        {
          if (i in t)
            fun.call(thisp, t[i], i, t);
        }
      };
    }

    Now you can use the forEach method to process your arrays:

    Code javascript:
    gizmos.forEach(function () {
        ...
    };

    Where the this keyword is for each item in the array
    Last edited by paul_wilkins; Nov 10, 2010 at 18:52.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Guys,

    Thanks for the excellent examples, having only ever really taken code sourced from the web and dropping it into my code Iv realised I really have got to start knowing what is really going on and how I can customize scripts to best suit my sites needs so here I am trying my best to understand the fundamentals of the language. Im sure you will see more of these types of questions appearing throughout the next few weeks and months, thanks again!

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You might find then that our Javascript - Usefull Tips & Tricks will be of some interest.

    It's stickied at the top of the forum too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great! thanks pmw!

  11. #11
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks again for the for-in loop answer makes sense


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •