1 00:00:00,350 --> 00:00:05,330 Let's begin our journey through array iteration methods with a look at forEach. 2 00:00:05,330 --> 00:00:10,190 The forEach method is simply a loop that accesses each item in an array. 3 00:00:10,190 --> 00:00:14,140 You've probably used a for loop to do the exact same thing. 4 00:00:14,140 --> 00:00:15,670 Let's look at a for loop and 5 00:00:15,670 --> 00:00:19,390 I'll show you how to rewrite it using the forEach method. 6 00:00:19,390 --> 00:00:23,380 Open a workspace below this video if you want to follow along with me. 7 00:00:23,380 --> 00:00:26,060 If you want to work locally on your own computer, 8 00:00:26,060 --> 00:00:28,320 look at the teacher's notes to get started. 9 00:00:28,320 --> 00:00:31,740 But I do recommend using WorkSpaces for this course. 10 00:00:31,740 --> 00:00:36,870 I have an array of strings in this JavaScript file called iteration.js. 11 00:00:36,870 --> 00:00:40,610 Let's loop through this array and log each string to the console. 12 00:00:41,670 --> 00:00:45,318 First I'll set up my for loop by typing for 13 00:00:45,318 --> 00:00:49,882 () and {}. 14 00:00:49,882 --> 00:00:54,600 Now only to set up my counter variable. 15 00:00:54,600 --> 00:00:59,980 You can use any variable name but programmers frequently use the letter i. 16 00:00:59,980 --> 00:01:01,484 I'll set it equal to 0. 17 00:01:02,520 --> 00:01:07,840 I'll type a semicolon and set a condition to check each time through the loop. 18 00:01:07,840 --> 00:01:11,500 Because I want to look at each element in the array, 19 00:01:11,500 --> 00:01:14,830 I'll check to see if i is less than the array's length. 20 00:01:18,840 --> 00:01:23,600 An array's length property stores the total number of items in the array. 21 00:01:23,600 --> 00:01:25,860 In this example that's 3. 22 00:01:25,860 --> 00:01:28,640 Array items are accessed using their index value, 23 00:01:28,640 --> 00:01:33,280 and the first item in an array is at index 0. 24 00:01:33,280 --> 00:01:38,970 So the three items here are at the 0, 1, and 2 spots in the array. 25 00:01:38,970 --> 00:01:43,210 So as long as i is less than 3, this loop runs. 26 00:01:43,210 --> 00:01:47,300 When the loop accesses the last item, i will be increased to 3, and 27 00:01:47,300 --> 00:01:49,060 the loop will end. 28 00:01:49,060 --> 00:01:54,150 Finally let's add a statement that runs before the next time through the loop, 29 00:01:54,150 --> 00:01:58,620 usually this expression increases or decreases the counter variable. 30 00:01:58,620 --> 00:02:01,218 I'll increment i by 1. 31 00:02:01,218 --> 00:02:05,682 I wanna log each item to the console, so 32 00:02:05,682 --> 00:02:11,540 in the body of the loop, I'll type console.log. 33 00:02:11,540 --> 00:02:16,400 I can use i to access each element in the array using square brackets. 34 00:02:21,770 --> 00:02:26,320 Now, to run this code, I'll go to my console and use the node command. 35 00:02:26,320 --> 00:02:29,850 In WorkSpaces I can get there by going to View. 36 00:02:31,080 --> 00:02:36,350 And currently my console is showing, so this says Hide Console. 37 00:02:36,350 --> 00:02:38,350 If I wanna show it, I go to Show Console. 38 00:02:39,940 --> 00:02:43,490 If you're working locally, you'll need to use your terminal application. 39 00:02:44,600 --> 00:02:52,020 I'll type node and then the name of the file I want to run, which is iteration.js. 40 00:02:52,020 --> 00:02:55,200 I can actually just start typing the name and hit Tab, and 41 00:02:55,200 --> 00:02:57,770 the console will auto-fill the rest. 42 00:02:57,770 --> 00:03:03,990 When I hit Return, nothing happens, that's because I did not save this file. 43 00:03:03,990 --> 00:03:07,980 So I'll hit Command+S or you can go to File and Save. 44 00:03:09,660 --> 00:03:11,360 And then that orange dot disappeared. 45 00:03:12,460 --> 00:03:18,210 Now, if I just hit up arrow, the command will come back and I can hit Return. 46 00:03:19,440 --> 00:03:23,790 And you can see the three strings were logged to the console. 47 00:03:23,790 --> 00:03:26,450 Now, let´s do the same thing with the forEach method. 48 00:03:26,450 --> 00:03:32,470 forEach is a method on any array just like push or pop for example. 49 00:03:32,470 --> 00:03:36,970 Remember, to call a method you first put the variable you want to call it on, 50 00:03:36,970 --> 00:03:41,648 then a dot, the method name, which is forEach 51 00:03:41,648 --> 00:03:45,949 in parenthesis. 52 00:03:46,970 --> 00:03:50,272 Now, I'll pass a call back function into forEach. 53 00:03:50,272 --> 00:03:54,760 The forEach method will call this function for each element in the array. 54 00:03:54,760 --> 00:04:00,010 When the function is called, the next array element is passed in as an argument. 55 00:04:00,010 --> 00:04:03,380 Arrays are often named using plural nouns like fruits, 56 00:04:03,380 --> 00:04:08,480 customers, photos, etc, because they are a collection of those things. 57 00:04:08,480 --> 00:04:12,770 Since this argument references just a single item in the fruits array, 58 00:04:12,770 --> 00:04:13,910 I'll name it fruit. 59 00:04:17,180 --> 00:04:22,340 Inside the body of the function we can do what we want with each item. 60 00:04:22,340 --> 00:04:25,710 I'll log each fruit to the console, like we did in the for loop. 61 00:04:29,430 --> 00:04:32,400 Since this function has only one statement in it, 62 00:04:34,032 --> 00:04:39,030 I can simplify this by putting it all on one line and removing the curly brackets. 63 00:04:43,581 --> 00:04:47,580 Now, I'll save and run this file again in the console below. 64 00:04:48,800 --> 00:04:54,052 And I´ll just clear the console first, I can type clear, and that'll clear it. 65 00:04:54,052 --> 00:04:58,356 And if I type the up arrow, I get to clear and 66 00:04:58,356 --> 00:05:04,280 if I hit up one more time, I can get to node iteration.js. 67 00:05:04,280 --> 00:05:09,120 You can see the fruit names were all printed twice, once in the for loop and 68 00:05:09,120 --> 00:05:11,165 once with the forEach method. 69 00:05:11,165 --> 00:05:14,220 Look at this two pieces of code for a moment. 70 00:05:14,220 --> 00:05:17,500 The for loop includes more code than a forEach version. 71 00:05:18,750 --> 00:05:21,831 Many programmers find forEach easier to read than for 72 00:05:21,831 --> 00:05:26,124 loops as well, since it replaces the bracket notation used in a for 73 00:05:26,124 --> 00:05:29,930 loop with a single variable name for an array element. 74 00:05:29,930 --> 00:05:34,240 Note that you could also create a named variable with a for loop too. 75 00:05:34,240 --> 00:05:38,500 But then it becomes even more verbose, see the teacher's notes for an example. 76 00:05:39,610 --> 00:05:43,770 Let's cover some of the benefits of the forEach method over a for loop for 77 00:05:43,770 --> 00:05:46,100 iterating over arrays. 78 00:05:46,100 --> 00:05:50,354 forEach is easier to read and understand with a simpler syntax. 79 00:05:50,354 --> 00:05:55,722 The forEach method manages the process of accessing each element in an array for 80 00:05:55,722 --> 00:05:59,550 you, for loops make you have to do that yourself. 81 00:05:59,550 --> 00:06:02,710 You have to create a counter variable, increment it, and 82 00:06:02,710 --> 00:06:06,320 check to see when you've looped through the entire array. 83 00:06:06,320 --> 00:06:09,675 There are also several kinds of bugs that forEach eliminates, 84 00:06:09,675 --> 00:06:15,815 forEeach won't loop an infinite number of times the way for loops can, for example. 85 00:06:15,815 --> 00:06:18,490 forEach also takes care of implementing and 86 00:06:18,490 --> 00:06:22,830 breaking the loop which are both potential sources for bugs. 87 00:06:22,830 --> 00:06:23,961 On the other hand, 88 00:06:23,961 --> 00:06:28,860 forEach doesn't let you break out of the loop early the way you can with for loops. 89 00:06:28,860 --> 00:06:35,160 Every array element will always be visited by forEach, however this need is rare. 90 00:06:35,160 --> 00:06:39,380 If you need to be able to stop iterating before you get to the end of an array, 91 00:06:39,380 --> 00:06:41,660 use a for or while loop. 92 00:06:41,660 --> 00:06:44,740 Just so you know, forEach shares these features with 93 00:06:44,740 --> 00:06:47,380 all of the array methods you'll learn in this course. 94 00:06:48,570 --> 00:06:52,630 Now that you've learned about forEach, let's practice using it in the next video.