1
00:00:00,490 --> 00:00:02,320
How's the refactoring coming along?

2
00:00:02,320 --> 00:00:06,350
Were you able to remove the duplicate
code and add a function to your program?

3
00:00:06,350 --> 00:00:08,290
There's no one correct answer.

4
00:00:08,290 --> 00:00:11,100
Now, I'll show you how I would solve this.

5
00:00:11,100 --> 00:00:16,420
Currently, the same code to generate
a random RGB value appears three times.

6
00:00:16,420 --> 00:00:21,272
So my first move might be to create
a function that returns a number from

7
00:00:21,272 --> 00:00:22,270
0 to 255.

8
00:00:22,270 --> 00:00:26,362
In RGB, that's the allowable range of
values for a red, green, or blue value.

9
00:00:26,362 --> 00:00:31,202
I'll write an arrow function expression
that returns the randomizing code,

10
00:00:31,202 --> 00:00:32,970
I'll name it randomValue.

11
00:00:39,083 --> 00:00:43,020
You could have also written
this as a function expression.

12
00:00:43,020 --> 00:00:47,480
I wrote the arrow function as a single
line statement using an implicit return,

13
00:00:47,480 --> 00:00:50,730
which means that I'm not using
the return keyword to return the value.

14
00:00:51,788 --> 00:00:56,590
Calling the randomValue function will
return a random number from 0 to 255.

15
00:00:56,590 --> 00:01:00,923
Now, one way I can replace
the redundant code is by calling

16
00:01:00,923 --> 00:01:04,206
the function inside the for
loop like this.

17
00:01:13,751 --> 00:01:17,760
Now I've removed the repeated code and
replaced it with a function call.

18
00:01:17,760 --> 00:01:21,315
We still need to call it three times
because we need three different

19
00:01:21,315 --> 00:01:24,882
random numbers, but we've moved
the code into its own function.

20
00:01:28,622 --> 00:01:32,670
Functions let you create more modular,
reusable code.

21
00:01:32,670 --> 00:01:34,050
As you program more,

22
00:01:34,050 --> 00:01:37,140
you may find that you're creating
a library of useful functions.

23
00:01:37,140 --> 00:01:39,770
You can use those functions
in other programs you write.

24
00:01:39,770 --> 00:01:40,580
For instance,

25
00:01:40,580 --> 00:01:45,410
the randomValue function might be useful
in other places outside of the for loop.

26
00:01:45,410 --> 00:01:48,335
I'm going to take this modular
approach even further.

27
00:01:48,335 --> 00:01:52,928
The variable randomRGB combines
the values for red, green, and

28
00:01:52,928 --> 00:01:56,950
blue to return a string value
that looks similar to this.

29
00:01:59,430 --> 00:02:01,182
This is an RGB color value.

30
00:02:01,182 --> 00:02:04,317
It's used in CSS to set
an element's background color,

31
00:02:04,317 --> 00:02:07,080
text color, border color, or any color.

32
00:02:07,080 --> 00:02:10,625
So I might want a way to create
random RGB colors for other uses too.

33
00:02:12,480 --> 00:02:17,050
How about a reusable function that
creates that RGB value altogether?

34
00:02:17,050 --> 00:02:19,700
I can then use that function
in lots of different places,

35
00:02:19,700 --> 00:02:21,240
not just inside this for loop.

36
00:02:22,730 --> 00:02:26,900
I'll create a new
function named randomRGB.

37
00:02:26,900 --> 00:02:31,540
The job of this function is to
produce a string holding an RGB value.

38
00:02:31,540 --> 00:02:35,410
I'll start by deleting a few
variables at the top of this script.

39
00:02:35,410 --> 00:02:39,798
I'll no longer need the red, green,
blue, or randomRGB variables.

40
00:02:41,590 --> 00:02:46,700
Next, I'll declare a variable
inside the function named color.

41
00:02:46,700 --> 00:02:50,250
Remember, when you declare
a variable inside a function,

42
00:02:50,250 --> 00:02:52,690
it lives inside that function only.

43
00:02:52,690 --> 00:02:56,950
You can only use the variable within that
function, this is called local scope.

44
00:02:56,950 --> 00:02:58,740
If you're not clear on that concept,

45
00:02:58,740 --> 00:03:01,570
make sure to review the links posted
in the teacher's notes with this video.

46
00:03:03,080 --> 00:03:06,840
I'll use a template literal
to hold the RGB color to use.

47
00:03:07,890 --> 00:03:12,033
Within the parentheses,
I can insert a random red, green, and

48
00:03:12,033 --> 00:03:15,885
blue value by calling
the randomValue function, like so.

49
00:03:27,740 --> 00:03:31,390
Then I'll set the function to return
the value assigned to the color variable.

50
00:03:32,770 --> 00:03:38,420
Finally, inside the for loop,
I can remove these four lines of code.

51
00:03:38,420 --> 00:03:43,990
And inside the template literal
assigned to the html variable,

52
00:03:43,990 --> 00:03:49,524
I'll replace the randomRGB variable
with a call to the randomRGB function.

53
00:03:50,640 --> 00:03:53,050
Now, I'll test my latest changes.

54
00:03:53,050 --> 00:03:57,070
In the browser, I still get ten
randomly generated colors, good.

55
00:03:59,290 --> 00:04:03,730
Now, there's one more thing I can do
to make my randomRGB function even

56
00:04:03,730 --> 00:04:06,420
more efficient and maintainable.

57
00:04:06,420 --> 00:04:10,340
In a course on JavaScript functions, you
learn that functions are often referred to

58
00:04:10,340 --> 00:04:14,460
as first class citizens in JavaScript,
which means that you can do almost

59
00:04:14,460 --> 00:04:19,320
anything with functions, including passing
them as arguments to other functions.

60
00:04:19,320 --> 00:04:23,810
I'll add a parameter named value
to the function definition.

61
00:04:23,810 --> 00:04:26,901
Then to use the value of the parameter,

62
00:04:26,901 --> 00:04:32,250
I'll replace each randomValue
function call with a call to value.

63
00:04:41,515 --> 00:04:46,667
The randomRGB function now expects
an argument passed to it when called,

64
00:04:46,667 --> 00:04:49,800
and that argument is a function.

65
00:04:49,800 --> 00:04:50,724
In the for loop,

66
00:04:50,724 --> 00:04:55,417
I'll pass the function a reference to
the randomValue arrow function expression.

67
00:04:58,372 --> 00:05:03,978
Now this function gets assigned
to randomRGB's value parameter,

68
00:05:03,978 --> 00:05:11,073
and it's executed three times inside the
function to generate the randomRGB value.

69
00:05:11,073 --> 00:05:14,552
Over in the browser,
everything still works as expected.

70
00:05:17,722 --> 00:05:22,456
This exercise was a great opportunity to
practice using loops with other JavaScript

71
00:05:22,456 --> 00:05:27,520
features you've learned about like
functions, scope, and template literals.

72
00:05:27,520 --> 00:05:30,460
You could have written this
differently and that's totally okay.

73
00:05:30,460 --> 00:05:34,000
Why don't you share your solution
with other Treehouse students?

74
00:05:34,000 --> 00:05:37,392
Writing loops is something that you'll
do frequently while programming in

75
00:05:37,392 --> 00:05:38,032
JavaScript.

76
00:05:38,032 --> 00:05:42,149
And loops get a whole lot more useful and
interesting when you start using them with

77
00:05:42,149 --> 00:05:45,983
special data structures or collections
of data called arrays and objects.

78
00:05:45,983 --> 00:05:47,514
And there are other types of loops and

79
00:05:47,514 --> 00:05:51,060
iteration methods you'll learn about
in later courses and workshops.

80
00:05:51,060 --> 00:05:52,580
Remember, we're here to help.

81
00:05:52,580 --> 00:05:56,370
So if you have questions about anything
covered in this course, you can always get

82
00:05:56,370 --> 00:05:59,780
in touch with the friendly Treehouse
staff or other students in the community.

83
00:05:59,780 --> 00:06:01,170
Thanks, everyone, and happy coding.