- 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 – Duplicate Code
6:01This video covers one way to prevent duplicating code in your program with a loop and a function.
How's the refactoring coming along?
0:00
Were you able to remove the duplicate
code and add a function to your program?
0:02
There's no one correct answer.
0:06
Now, I'll show you how I would solve this.
0:08
Currently, the same code to generate
a random RGB value appears three times.
0:11
So my first move might be to create
a function that returns a number from
0:16
0 to 255.
0:21
In RGB, that's the allowable range of
values for a red, green, or blue value.
0:22
I'll write an arrow function expression
that returns the randomizing code,
0:26
I'll name it randomValue.
0:31
You could have also written
this as a function expression.
0:39
I wrote the arrow function as a single
line statement using an implicit return,
0:43
which means that I'm not using
the return keyword to return the value.
0:47
Calling the randomValue function will
return a random number from 0 to 255.
0:51
Now, one way I can replace
the redundant code is by calling
0:56
the function inside the for
loop like this.
1:00
Now I've removed the repeated code and
replaced it with a function call.
1:13
We still need to call it three times
because we need three different
1:17
random numbers, but we've moved
the code into its own function.
1:21
Functions let you create more modular,
reusable code.
1:28
As you program more,
1:32
you may find that you're creating
a library of useful functions.
1:34
You can use those functions
in other programs you write.
1:37
For instance,
1:39
the randomValue function might be useful
in other places outside of the for loop.
1:40
I'm going to take this modular
approach even further.
1:45
The variable randomRGB combines
the values for red, green, and
1:48
blue to return a string value
that looks similar to this.
1:52
This is an RGB color value.
1:59
It's used in CSS to set
an element's background color,
2:01
text color, border color, or any color.
2:04
So I might want a way to create
random RGB colors for other uses too.
2:07
How about a reusable function that
creates that RGB value altogether?
2:12
I can then use that function
in lots of different places,
2:17
not just inside this for loop.
2:19
I'll create a new
function named randomRGB.
2:22
The job of this function is to
produce a string holding an RGB value.
2:26
I'll start by deleting a few
variables at the top of this script.
2:31
I'll no longer need the red, green,
blue, or randomRGB variables.
2:35
Next, I'll declare a variable
inside the function named color.
2:41
Remember, when you declare
a variable inside a function,
2:46
it lives inside that function only.
2:50
You can only use the variable within that
function, this is called local scope.
2:52
If you're not clear on that concept,
2:56
make sure to review the links posted
in the teacher's notes with this video.
2:58
I'll use a template literal
to hold the RGB color to use.
3:03
Within the parentheses,
I can insert a random red, green, and
3:07
blue value by calling
the randomValue function, like so.
3:12
Then I'll set the function to return
the value assigned to the color variable.
3:27
Finally, inside the for loop,
I can remove these four lines of code.
3:32
And inside the template literal
assigned to the html variable,
3:38
I'll replace the randomRGB variable
with a call to the randomRGB function.
3:43
Now, I'll test my latest changes.
3:50
In the browser, I still get ten
randomly generated colors, good.
3:53
Now, there's one more thing I can do
to make my randomRGB function even
3:59
more efficient and maintainable.
4:03
In a course on JavaScript functions, you
learn that functions are often referred to
4:06
as first class citizens in JavaScript,
which means that you can do almost
4:10
anything with functions, including passing
them as arguments to other functions.
4:14
I'll add a parameter named value
to the function definition.
4:19
Then to use the value of the parameter,
4:23
I'll replace each randomValue
function call with a call to value.
4:26
The randomRGB function now expects
an argument passed to it when called,
4:41
and that argument is a function.
4:46
In the for loop,
4:49
I'll pass the function a reference to
the randomValue arrow function expression.
4:50
Now this function gets assigned
to randomRGB's value parameter,
4:58
and it's executed three times inside the
function to generate the randomRGB value.
5:03
Over in the browser,
everything still works as expected.
5:11
This exercise was a great opportunity to
practice using loops with other JavaScript
5:17
features you've learned about like
functions, scope, and template literals.
5:22
You could have written this
differently and that's totally okay.
5:27
Why don't you share your solution
with other Treehouse students?
5:30
Writing loops is something that you'll
do frequently while programming in
5:34
JavaScript.
5:37
And loops get a whole lot more useful and
interesting when you start using them with
5:38
special data structures or collections
of data called arrays and objects.
5:42
And there are other types of loops and
5:45
iteration methods you'll learn about
in later courses and workshops.
5:47
Remember, we're here to help.
5:51
So if you have questions about anything
covered in this course, you can always get
5:52
in touch with the friendly Treehouse
staff or other students in the community.
5:56
Thanks, everyone, and happy coding.
5:59