Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Loops!
You have completed JavaScript Loops!
Preview
This video covers one way to prevent duplicating code in your program with a loop and a function.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up