WEBVTT

1
00:00:00.421 --> 00:00:03.400
Let's use the for
loop to work with an array.

2
00:00:03.400 --> 00:00:07.930
We'll take an array of song names and
display them on a web page, like this.

3
00:00:07.930 --> 00:00:10.460
I'll open the Elements panel
in Chrome DevTools, and

4
00:00:10.460 --> 00:00:14.000
you can see that there's
an ordered list of song names.

5
00:00:14.000 --> 00:00:17.770
Each of these list items
is one item in an array.

6
00:00:17.770 --> 00:00:20.460
Now let's write a program
that generates this list

7
00:00:20.460 --> 00:00:23.460
by running through the array
one item at a time.

8
00:00:23.460 --> 00:00:29.360
To code along with me,
open the file playlist-1.js, and

9
00:00:29.360 --> 00:00:37.700
in index.html, update the script tag
source attribute to js/playlist-1.js.

10
00:00:37.700 --> 00:00:42.930
This file has an array named playlist
containing several song names.

11
00:00:42.930 --> 00:00:49.100
In this file, I'll start by writing
a function named createListItems.

12
00:00:49.100 --> 00:00:51.610
Its job will be to take
an array of elements and

13
00:00:51.610 --> 00:00:53.430
place each inside a list item.

14
00:00:54.950 --> 00:00:58.390
The function needs to accept
an array as an argument

15
00:00:58.390 --> 00:01:00.320
which it will use to create the list.

16
00:01:00.320 --> 00:01:04.778
In the function definition,
add a parameter named arr for array.

17
00:01:04.778 --> 00:01:09.130
Remember, a parameter's like a variable
that holds a value passed to the function.

18
00:01:09.130 --> 00:01:13.960
The array passed to this function will
get assigned to the arr parameter.

19
00:01:13.960 --> 00:01:18.380
The function should build up an HTML
string that looks similar to this.

20
00:01:18.380 --> 00:01:21.730
In other words, it needs to return
list items that can be displayed

21
00:01:21.730 --> 00:01:23.200
inside an ordered list.

22
00:01:25.350 --> 00:01:28.240
Inside the function,
I'll declare a variable named

23
00:01:28.240 --> 00:01:32.790
items to hold the list items and
initialize it to an empty string.

24
00:01:32.790 --> 00:01:35.460
With this items variable, I can build and

25
00:01:35.460 --> 00:01:39.850
store the entire string before returning
it and displaying it on the page.

26
00:01:41.520 --> 00:01:43.310
The next step is to add a for

27
00:01:43.310 --> 00:01:47.580
loop that iterates through the elements
in the array passed to this function.

28
00:01:49.730 --> 00:01:55.076
I'll initialize a counter
variable named i = 0,

29
00:01:55.076 --> 00:02:00.186
then add a test condition
with i < arr.length.

30
00:02:00.186 --> 00:02:04.889
Again, this condition checks that
i is less than the total number of

31
00:02:04.889 --> 00:02:09.150
elements inside the array
passed to this function.

32
00:02:09.150 --> 00:02:12.640
In other words,
the array assigned to this arr parameter.

33
00:02:12.640 --> 00:02:15.920
Once i is no longer less
than the array's length,

34
00:02:15.920 --> 00:02:20.270
there are no more elements to
loop through, so the loop ends.

35
00:02:20.270 --> 00:02:25.180
Finally, I'll increase the value of
i by one after each loop iteration

36
00:02:25.180 --> 00:02:29.180
with i++.

37
00:02:29.180 --> 00:02:32.410
Next, I'll create the HTML list items.

38
00:02:32.410 --> 00:02:35.000
I can do that by building on to or

39
00:02:35.000 --> 00:02:38.330
adding to the current value
of the items variable.

40
00:02:38.330 --> 00:02:42.310
Within the loop, I'll use
the addition assignment operator and

41
00:02:42.310 --> 00:02:46.430
a template literal to add a set of li tags

42
00:02:46.430 --> 00:02:50.980
displaying the element from the array
at the current index position.

43
00:02:50.980 --> 00:02:55.660
Remember, the i variable holds
the current index value.

44
00:02:55.660 --> 00:03:00.044
Inside the li tags, I'll use string
interpolation with dollar sign,

45
00:03:00.044 --> 00:03:05.410
curly braces to insert the element at
the index that matches the i variable.

46
00:03:07.530 --> 00:03:10.360
Now I have a loop that runs as many times

47
00:03:10.360 --> 00:03:14.500
as there are elements in the array
assigned to the arr parameter.

48
00:03:16.640 --> 00:03:19.680
Finally, the createListItems function

49
00:03:19.680 --> 00:03:23.790
needs to return the value
assigned to the items variable.

50
00:03:25.340 --> 00:03:29.260
You've learned that a function doesn't
actually do anything until it's called or

51
00:03:29.260 --> 00:03:30.380
invoked.

52
00:03:30.380 --> 00:03:34.676
So I'll first test the function in
the browser's JavaScript console by

53
00:03:34.676 --> 00:03:39.810
calling createListItems and
passing it the playlist array.

54
00:03:41.180 --> 00:03:44.820
And there's the full string
holding the six list items.

55
00:03:44.820 --> 00:03:50.330
Notice how each playlist element is
inside its own set of li tags, great!

56
00:03:52.260 --> 00:03:57.600
Now, let's display the list items on
the page within an HTML ordered list.

57
00:03:57.600 --> 00:04:00.070
There are several ways you might do this.

58
00:04:00.070 --> 00:04:04.930
I'll use a familiar method,
document.querySelector.

59
00:04:04.930 --> 00:04:09.220
This should select the main
element in index.html.

60
00:04:09.220 --> 00:04:14.420
Then to display the HTML inside main,
I'll use the innerHTML property.

61
00:04:15.450 --> 00:04:19.580
I'll set the property to a template
literal to build the final string.

62
00:04:19.580 --> 00:04:25.818
Now I can use the createListItems function
to display each item between ol tags.

63
00:04:28.130 --> 00:04:32.770
These values will be dynamically
inserted into the final string, so

64
00:04:32.770 --> 00:04:37.620
I need to use interpolation or
the dollar sign, curly braces syntax here.

65
00:04:37.620 --> 00:04:42.284
Inside the curly braces,
I'll call the createListItems function and

66
00:04:42.284 --> 00:04:44.156
pass it the playlist array.

67
00:04:44.156 --> 00:04:48.327
Finally, in index.html,
just outside the main element,

68
00:04:48.327 --> 00:04:52.514
I'll add a heading to this page
that says My Music Playlist.

69
00:04:55.202 --> 00:04:57.800
All right, let's test it in the browser.

70
00:04:57.800 --> 00:05:02.760
I'll save the file, refresh the page,
and there's our music playlist.

71
00:05:05.160 --> 00:05:08.785
Now, any updates you make
to the playlist array,

72
00:05:08.785 --> 00:05:13.376
like adding a new song, for
example, will appear on the page.

73
00:05:18.442 --> 00:05:21.300
Working with each element in an array or

74
00:05:21.300 --> 00:05:27.190
iterating through an array is one of
the most common uses of a for loop.

75
00:05:27.190 --> 00:05:29.940
You can use arrays and
loops together in many ways.

76
00:05:29.940 --> 00:05:32.690
For example,
say you had an array of scores.

77
00:05:32.690 --> 00:05:35.410
To find the average of the scores,
you could use a for

78
00:05:35.410 --> 00:05:39.710
loop to access each number in the array
and add it to an ongoing total.

79
00:05:39.710 --> 00:05:43.510
Then when the loop's done, divide
the total by the length of the array.

80
00:05:43.510 --> 00:05:46.830
Check out an example I wrote in
the teacher's notes with this video.

81
00:05:46.830 --> 00:05:49.890
And keep in mind that there
are other more compact ways of

82
00:05:49.890 --> 00:05:54.040
iterating through arrays using special
iteration methods you'll learn about later

83
00:05:54.040 --> 00:05:55.940
in your JavaScript learning journey.

84
00:05:55.940 --> 00:05:59.070
Learning how to use for
loops with arrays now

85
00:05:59.070 --> 00:06:03.350
will set you up to better understand the
mechanics of how the other methods work.