Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript Loops

Well done!

You have completed JavaScript Loops!

Sign up for Treehouse Back to Library

The Refactor Challenge – One Solution

3:05 with Guil Hernandez

This video covers one solution to the refactor challenge.

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    How it'd go? 0:00
    Now, I'll show you one way you might refactor this code. 0:01
    If you use the loop, you most likely remove the most of this code. 0:05
    For instance, you can see that this code here is the same as this code and 0:08
    this code, it's the same code repeated ten times. 0:14
    Before I go into how to optimize the code, I'll start with the code at the top. 0:17
    I declare five variables at the beginning of the script. 0:21
    The html variable is set to an empty string, and the other four variables 0:25
    are not assigned a value, their values are going to be assigned later in the script. 0:30
    I'll start by removing nine of these sets of code. 0:34
    That's already looking much better. 0:44
    Now, the program only adds a single div to the page. 0:47
    I'll use a for loop to repeat this set of code multiple times. 0:51
    I'll name the counter variable i, and set its initial value to 1. 0:59
    Next, comes the condition, as long as the value of i is less than or 1:05
    equal to 10, the loop will run. 1:10
    Finally, the current value of i should 1:14
    increase by 1 at the end of each loop iteration. 1:16
    Now, I'll move this code inside the loop. 1:21
    And great, I went from 67 lines of code to just 15. 1:30
    And to display a number inside each div starting from 1, I'll insert or 1:35
    interpolate the value of i into the string containing the div text. 1:41
    I'll save my file and refresh the browser, and 1:47
    ten color full dots appear on the page. 1:50
    Looking at the elements panel in Chrome dev tools, I see the ten divs. 1:53
    Each one has a style attribute 1:58
    with a background color property set to a random RGB value, good. 2:01
    What's great about using a loop, is that I can go back to the code and 2:10
    change the condition to say i is less than or equal to 100. 2:16
    Now, the code runs 100 times. 2:21
    If you got this far, nice work, you've started to implement the DRY principle and 2:28
    started refactoring JavaScript to make your code more efficient. 2:32
    But is there more that you could do here? 2:36
    Notice that the random number generating code repeats three times. 2:39
    When you see code repeating like this, a warning alarm should go off in your head. 2:43
    So I have another challenge for you, review this code and see if there's a way 2:47
    you can add a function to get rid of this duplicate code. 2:51
    And while you're at it, see if there are other ways you might improve the code. 2:55
    I'll see you in the next video with some of my suggestions. 2:58

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up