- 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
3:00In this challenge, you will use a loop to reduce the repetition of code in a program.
As you become more experienced with
JavaScript, you'll likely find yourself
0:00
looking at your code and
noticing ways that you can improve it.
0:04
In fact, it's common for programmers
to first write a program that works
0:08
perfectly well, but
could be written better.
0:12
Then later spend a little time
rewriting it to be less repetitive,
0:14
more efficient, and maintainable.
0:18
Improving code also might
mean making it run faster,
0:20
making the code easier to read,
or adding comments so
0:23
that other developers can
understand how your program works.
0:26
One of the most common
improvements is to review and
0:30
improve code using the DRY
programming principle.
0:34
[SOUND] DRY is an acronym that stands for
Don't Repeat Yourself.
0:38
It's one of the most important
concepts a programmer can learn.
0:43
[SOUND] DRY programming means reducing
the repetition of coding a program.
0:46
[SOUND] The loops you learned about in
this course are one way to write DRY code.
0:54
For example, if you want to use JavaScript
to add ten photos from a photo sharing
0:57
website like Unsplash to a web page,
it's best not to write the code for
1:02
that ten times or once for each photo.
1:06
Instead you'd use a loop which
repeats that same code ten times.
1:09
That's DRY programming.
1:13
[SOUND] JavaScript functions are another
way to embrace the DRY principle.
1:14
Functions let you group and reuse code
that you want to use more than once.
1:19
You can call the function
hundreds of times, but
1:23
you only write the code
inside the function once.
1:26
That's DRY programming too.
1:29
Okay, you've written and learned about
three types of JavaScript loops, and
1:31
it's time for a practice challenge.
1:35
For this challenge, you're going to
improve upon an already existing script.
1:37
Programmers call the process
of improving and
1:41
simplifying code without changing
its behavior refactoring.
1:44
So you're going to refactor
needlessly long and repetitive code.
1:47
Launch the latest workspace with
this video to get started, or
1:51
download the project files and
use your preferred text editor.
1:54
Open the file script.js, and
notice how this file is really long,
1:58
there's 67 lines of code here.
2:03
What does it do exactly?
2:06
Let's preview index.html in the browser,
and
2:08
notice how it adds ten colorful dots
to the page with a number inside each.
2:11
And when you refresh the browser,
the colors change for
2:16
each dot,
the colors are randomly generated.
2:18
Back in the code,
notice how this same chunk of code,
2:22
these five lines,
repeat over and over again.
2:26
Remember, anytime you come across repeated
code like this, or when you find yourself
2:29
copying and pasting blocks of code,
it's a sign that something might be wrong.
2:34
In this case, yikes, if you count them,
2:40
you'll see that it's the same
chunk of code repeated ten times.
2:41
This is the perfect situation for a loop.
2:46
So for this challenge,
you'll need to refactor this code,
2:49
apply the DRY principle to get rid
of all the duplication using a loop.
2:52
In the next video,
I'll show you how I did it.
2:57
Good luck.
2:59