- The for Loop 4:52
- Create a for Loop 1 objective
- Dynamically Display HTML with a Loop 6:52
- Exit a Loop
- Terminate a Loop 1 objective
- The Refactor Challenge 3:00
- The Refactor Challenge – One Solution 3:05
- The Refactor Challenge – Duplicate Code 6:01
- Review for Loops and Exiting Loops 6 questions
- Refactor Code with a Loop 1 objective
Preview
Video Player
00:00
00:00
The Refactor Challenge – One Solution
3:05This video covers one solution to the refactor challenge.
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