1
00:00:02,120 --> 00:00:04,440
Now, besides this for-let loop,

2
00:00:04,440 --> 00:00:08,189
we also have a for-of loop.

3
00:00:08,189 --> 00:00:10,100
And even though it sounds familiar,

4
00:00:10,100 --> 00:00:13,120
it works totally differently.

5
00:00:13,120 --> 00:00:16,793
Let's say we have an array of users,

6
00:00:17,760 --> 00:00:21,250
and this is simply an array with a couple of names in there

7
00:00:22,160 --> 00:00:23,700
like this.

8
00:00:23,700 --> 00:00:27,070
And now we want to do something with every user

9
00:00:27,070 --> 00:00:29,697
in a real website who might want to send an email to

10
00:00:29,697 --> 00:00:34,240
the user, or just show that user on some dashboard screen.

11
00:00:34,240 --> 00:00:36,793
Here I'll just lock these usernames.

12
00:00:37,740 --> 00:00:40,770
Now, of course I can console log users.

13
00:00:40,770 --> 00:00:42,400
And if I do that, it will work,

14
00:00:42,400 --> 00:00:45,770
but it will simply lock the overall array.

15
00:00:45,770 --> 00:00:47,860
That's not what I want here, instead

16
00:00:47,860 --> 00:00:51,150
I just want to lock the individual names because again,

17
00:00:51,150 --> 00:00:54,520
we might be doing more useful things here and send emails

18
00:00:54,520 --> 00:00:56,403
to the individual users in stat.

19
00:00:57,420 --> 00:01:00,780
And that's where a for-of loop can help us.

20
00:01:00,780 --> 00:01:03,450
We again start with the 'for' keyword,

21
00:01:03,450 --> 00:01:06,970
and then we again have brackets and curly braces.

22
00:01:06,970 --> 00:01:09,260
But now between those parentheses here,

23
00:01:09,260 --> 00:01:12,010
we don't write code as we did it up here,

24
00:01:12,010 --> 00:01:13,930
but instead we create a helper

25
00:01:13,930 --> 00:01:18,180
constant, user could be the name we want here.

26
00:01:18,180 --> 00:01:19,350
The name is up to you.

27
00:01:19,350 --> 00:01:23,400
It should describe your individual array elements though.

28
00:01:23,400 --> 00:01:25,660
And since here I have users

29
00:01:25,660 --> 00:01:28,563
an individual element could be named user.

30
00:01:29,450 --> 00:01:32,350
And then we at the 'of' keyword there after

31
00:01:32,350 --> 00:01:36,893
and then we point at the array for which we want to loop.

32
00:01:38,320 --> 00:01:41,330
In my case to 'users' array.

33
00:01:41,330 --> 00:01:45,353
And with that, we loop through all the elements in 'users'

34
00:01:46,230 --> 00:01:49,570
and we get access to the individual elements

35
00:01:49,570 --> 00:01:54,570
inside of that looping code under this helper constant.

36
00:01:54,680 --> 00:01:57,930
And here it's a constant and not a variable because it's

37
00:01:57,930 --> 00:02:01,760
basically a brand new variable that will be created for

38
00:02:01,760 --> 00:02:05,247
every iteration whereas in the first kind of for loop,

39
00:02:05,247 --> 00:02:08,680
it was the existing variable that was changed.

40
00:02:08,680 --> 00:02:10,240
It's a slight difference.

41
00:02:10,240 --> 00:02:12,960
That's why we can use the 'const' keyword here.

42
00:02:12,960 --> 00:02:16,650
Of course you could also use 'let' alternatively,

43
00:02:16,650 --> 00:02:18,620
but I'll use const since that is what

44
00:02:18,620 --> 00:02:21,173
you'll see more often out there in the wild.

45
00:02:22,260 --> 00:02:24,980
And then here I can console log user,

46
00:02:24,980 --> 00:02:27,420
so not 'users', but 'user'

47
00:02:27,420 --> 00:02:30,803
to log to individual elements for every iteration.

48
00:02:32,590 --> 00:02:36,070
Now, with that, if I save that, you see here at the bottom,

49
00:02:36,070 --> 00:02:41,070
Max, Anna, and Joel printed out as free individual elements

50
00:02:42,060 --> 00:02:46,550
because this for-of loop now executed the code in here

51
00:02:46,550 --> 00:02:49,790
three times, once for every element.

52
00:02:49,790 --> 00:02:52,363
And it gave us access to every element.