1 00:00:02,210 --> 00:00:04,630 So did you succeed? 2 00:00:04,630 --> 00:00:07,150 Let's now solve this together. 3 00:00:07,150 --> 00:00:09,250 And for this first of all, 4 00:00:09,250 --> 00:00:13,020 I will include exercise.js here 5 00:00:13,020 --> 00:00:16,780 in my index.html file instead of app.js, 6 00:00:16,780 --> 00:00:20,840 so that the code I do write in exercise.js actually 7 00:00:20,840 --> 00:00:22,810 has an effect. 8 00:00:22,810 --> 00:00:24,880 So let's save this HTML file, 9 00:00:24,880 --> 00:00:27,633 and now go back to exercise.js. 10 00:00:28,570 --> 00:00:31,820 And here we can start with task number one, 11 00:00:31,820 --> 00:00:34,270 creating three variables. 12 00:00:34,270 --> 00:00:37,040 And I'll solve that directly here, 13 00:00:37,040 --> 00:00:38,990 just so that we always see the task, 14 00:00:38,990 --> 00:00:41,310 but you can of course also just solve it 15 00:00:41,310 --> 00:00:43,683 below this entire comment block. 16 00:00:44,780 --> 00:00:46,360 Now, here we need three variables, 17 00:00:46,360 --> 00:00:48,290 one for storing a name, a price, 18 00:00:48,290 --> 00:00:51,163 and then one for storing a couple of goals. 19 00:00:52,490 --> 00:00:55,200 Now let's start by defining those variables. 20 00:00:55,200 --> 00:01:00,200 And we learned that we can do that with the let keyword. 21 00:01:00,210 --> 00:01:03,980 Now we need to pick a name for our first variable. 22 00:01:03,980 --> 00:01:07,110 And since that variable we'll store the name 23 00:01:07,110 --> 00:01:10,850 of an online course, I'll name it courseName, 24 00:01:10,850 --> 00:01:14,381 of course, we could also pick onlineCourseName 25 00:01:14,381 --> 00:01:18,600 or just onlineName, whatever you want, 26 00:01:18,600 --> 00:01:21,173 but I think courseName isn't too bad. 27 00:01:22,020 --> 00:01:24,550 Now that's my first variable. 28 00:01:24,550 --> 00:01:27,250 Now we should also store a value in there 29 00:01:27,250 --> 00:01:29,130 and we can do this in the same line 30 00:01:29,130 --> 00:01:31,140 as we use for defining the variable 31 00:01:31,140 --> 00:01:34,470 by adding an equal sign and then the value. 32 00:01:34,470 --> 00:01:37,590 Alternatively, we just define the variable 33 00:01:37,590 --> 00:01:41,010 and we then assign the value in a new line. 34 00:01:41,010 --> 00:01:42,890 Both (indistinct), both is fine, 35 00:01:42,890 --> 00:01:44,693 here, I will do it in one line. 36 00:01:45,760 --> 00:01:48,030 Now that should store the name of an online course 37 00:01:48,030 --> 00:01:49,330 of our choice, 38 00:01:49,330 --> 00:01:52,050 and hence, we will need a string 39 00:01:52,050 --> 00:01:55,460 because the name of a course is definitely some text, 40 00:01:55,460 --> 00:01:57,933 not a number or anything like that. 41 00:01:58,930 --> 00:02:01,210 And here we can then then therefore pick 42 00:02:01,210 --> 00:02:02,050 a name of our choice, 43 00:02:02,050 --> 00:02:07,050 like Web Development - The Complete Guide, 44 00:02:08,820 --> 00:02:09,919 something like this. 45 00:02:10,967 --> 00:02:13,660 This semi-colon here as you learned is optional, 46 00:02:13,660 --> 00:02:17,280 but I prefer to add it and hence I will add it everywhere 47 00:02:17,280 --> 00:02:19,550 in the regular sections, and lectures, 48 00:02:19,550 --> 00:02:21,513 and also in this exercise. 49 00:02:22,870 --> 00:02:24,967 Now the second variable should store 50 00:02:24,967 --> 00:02:26,880 the price of that course. 51 00:02:26,880 --> 00:02:29,280 So here we could have coursePrice 52 00:02:30,440 --> 00:02:32,230 and that could be a number, 53 00:02:32,230 --> 00:02:35,140 because a price typically is a number. 54 00:02:35,140 --> 00:02:39,003 And now let's assume that is $39 here. 55 00:02:42,040 --> 00:02:44,093 Of course that value is up to you. 56 00:02:45,920 --> 00:02:48,950 Now, the last variable is a variable 57 00:02:48,950 --> 00:02:51,680 that stores multiple values in it. 58 00:02:51,680 --> 00:02:54,670 Multiple main goals that you might have 59 00:02:54,670 --> 00:02:56,420 when taking this course. 60 00:02:56,420 --> 00:02:59,290 And we did learn that we do have value types 61 00:02:59,290 --> 00:03:02,840 for storing multiple values in one variable, 62 00:03:02,840 --> 00:03:05,263 we have arrays and objects. 63 00:03:06,160 --> 00:03:08,420 Now, arrays are the right choice 64 00:03:08,420 --> 00:03:11,440 if we basically have a list of data, 65 00:03:11,440 --> 00:03:15,670 so the same kind of data, just multiple pieces of it. 66 00:03:15,670 --> 00:03:18,860 For example, a list of shopping card items 67 00:03:18,860 --> 00:03:22,970 or a list of goals like in this case. 68 00:03:22,970 --> 00:03:26,890 And hence here, I'll add a courseGoals variable, 69 00:03:26,890 --> 00:03:28,970 and then we create an array 70 00:03:28,970 --> 00:03:31,230 with these square brackets as you learned, 71 00:03:31,230 --> 00:03:34,250 opening and closing square brackets. 72 00:03:34,250 --> 00:03:36,163 That's how we create an array. 73 00:03:37,030 --> 00:03:40,860 And in this array, we can now store our goals. 74 00:03:40,860 --> 00:03:45,220 And here my goal could be Learn Web Development. 75 00:03:45,220 --> 00:03:49,080 And then I have a second goal where I have, 76 00:03:49,080 --> 00:03:51,830 Become a web developer. 77 00:03:51,830 --> 00:03:55,433 And maybe a third goal, which is, Have fun. 78 00:03:56,970 --> 00:04:00,030 And of course you can add as many goals as you want. 79 00:04:00,030 --> 00:04:03,700 Here my individual goals are strings, 80 00:04:03,700 --> 00:04:07,290 because again, text makes most sense here I would say. 81 00:04:07,290 --> 00:04:10,810 And as you learned, they are separated with commas. 82 00:04:10,810 --> 00:04:14,393 That's how you separate items in such an array. 83 00:04:15,480 --> 00:04:18,313 And that's now task number one solved. 84 00:04:19,899 --> 00:04:21,640 Task number two, 85 00:04:21,640 --> 00:04:24,733 now is to output these values. 86 00:04:25,770 --> 00:04:28,810 And for that here, below this comment, 87 00:04:28,810 --> 00:04:32,670 I will use this built-in alert function we learned about 88 00:04:32,670 --> 00:04:34,213 to output the courseName, 89 00:04:35,570 --> 00:04:37,333 and then the coursePrice, 90 00:04:39,240 --> 00:04:41,730 and then also here, 91 00:04:41,730 --> 00:04:43,133 the courseGoals, 92 00:04:44,850 --> 00:04:45,840 like that. 93 00:04:45,840 --> 00:04:47,590 That's what we also did before, 94 00:04:47,590 --> 00:04:51,070 we called this built-in alert function 95 00:04:51,070 --> 00:04:54,150 and we pass our variable values 96 00:04:54,150 --> 00:04:57,580 as parameter values to that function, 97 00:04:57,580 --> 00:04:59,800 that's what we're doing here. 98 00:04:59,800 --> 00:05:02,130 And hence if we save all of that 99 00:05:02,130 --> 00:05:05,540 and we view this on our page, 100 00:05:05,540 --> 00:05:08,890 if we reload once after clicking away the old boxes, 101 00:05:08,890 --> 00:05:12,170 we get the Web Development - The Complete Guide, 102 00:05:12,170 --> 00:05:15,880 which of course is our courseName being output here. 103 00:05:15,880 --> 00:05:17,770 Then we get 39, 104 00:05:17,770 --> 00:05:19,150 and last but not least, 105 00:05:19,150 --> 00:05:22,340 we get our array and the different values 106 00:05:22,340 --> 00:05:23,363 we have in there. 107 00:05:24,380 --> 00:05:26,593 So that's task number two solved. 108 00:05:27,620 --> 00:05:30,790 Task number three now becomes more tricky. 109 00:05:30,790 --> 00:05:33,600 Because now we should group the three variables 110 00:05:33,600 --> 00:05:36,280 we defined before together. 111 00:05:36,280 --> 00:05:39,110 And we got a good hint that 112 00:05:39,110 --> 00:05:42,620 we might have a good grouping opportunity here 113 00:05:42,620 --> 00:05:45,290 because their names are very similar. 114 00:05:45,290 --> 00:05:47,660 They all start with course. 115 00:05:47,660 --> 00:05:50,680 So it looks like they actually do belong together 116 00:05:50,680 --> 00:05:55,530 and they describe different traits of a course. 117 00:05:55,530 --> 00:05:58,380 And if you have something like this, 118 00:05:58,380 --> 00:06:02,680 if you already start naming them in similar ways, 119 00:06:02,680 --> 00:06:04,790 then that's a good indicator 120 00:06:04,790 --> 00:06:08,240 that instead of using three individual variables, 121 00:06:08,240 --> 00:06:10,820 which you can use, nothing wrong with that, 122 00:06:10,820 --> 00:06:12,570 but that instead of that, 123 00:06:12,570 --> 00:06:15,293 you maybe can use an object. 124 00:06:16,230 --> 00:06:18,140 Because we learned that an object 125 00:06:18,140 --> 00:06:21,050 is another kind of value in JavaScript 126 00:06:21,050 --> 00:06:24,713 which we can use for grouping related data together. 127 00:06:25,720 --> 00:06:27,910 And the difference to an array 128 00:06:27,910 --> 00:06:31,120 where we also group multiple values together, 129 00:06:31,120 --> 00:06:32,420 is that in an array, 130 00:06:32,420 --> 00:06:35,250 we basically have the same kind of value, 131 00:06:35,250 --> 00:06:37,250 we have three goals here, 132 00:06:37,250 --> 00:06:41,060 whereas in an object we have different kinds of values. 133 00:06:41,060 --> 00:06:42,470 And I don't just mean different 134 00:06:42,470 --> 00:06:44,470 in the sense of strings and numbers, 135 00:06:44,470 --> 00:06:48,230 but instead I mean different things being described 136 00:06:48,230 --> 00:06:50,180 by these values. 137 00:06:50,180 --> 00:06:53,350 For example, a courseName is a different thing than 138 00:06:53,350 --> 00:06:56,280 a course description if we had one. 139 00:06:56,280 --> 00:06:58,640 Here, we have courseName, price, and goals, 140 00:06:58,640 --> 00:07:01,910 and these are clearly three totally different traits 141 00:07:01,910 --> 00:07:03,543 that make up a course. 142 00:07:04,450 --> 00:07:08,340 And hence we can group these three variables together here 143 00:07:09,650 --> 00:07:12,320 by creating a fourth variable, 144 00:07:12,320 --> 00:07:15,967 which could be named course or onlineCourse. 145 00:07:17,710 --> 00:07:21,630 And then we create such an object with curly braces 146 00:07:21,630 --> 00:07:23,060 as you learned. 147 00:07:23,060 --> 00:07:25,800 We do use curly braces in different parts 148 00:07:25,800 --> 00:07:27,450 of our JavaScript code, 149 00:07:27,450 --> 00:07:29,610 for example, all of the four functions, 150 00:07:29,610 --> 00:07:33,973 but also when used like this for creating objects. 151 00:07:35,710 --> 00:07:37,680 And now these objects as you learned, 152 00:07:37,680 --> 00:07:41,590 contain label value pairs. 153 00:07:41,590 --> 00:07:43,500 And the labels are up to you. 154 00:07:43,500 --> 00:07:45,780 So here we could again repeat courseName 155 00:07:45,780 --> 00:07:48,240 or since we're already in an object, 156 00:07:48,240 --> 00:07:50,030 maybe just name 157 00:07:50,030 --> 00:07:52,630 or just title. 158 00:07:52,630 --> 00:07:55,330 And by the way this strikethrough effect here 159 00:07:55,330 --> 00:07:56,930 is something you can ignore, 160 00:07:56,930 --> 00:07:59,210 and it goes away as soon as you add a colon. 161 00:07:59,210 --> 00:08:02,810 It's essentially a little bug here in Visual Studio Code, 162 00:08:02,810 --> 00:08:03,743 you could say. 163 00:08:04,620 --> 00:08:06,180 So here I'll pick name, 164 00:08:06,180 --> 00:08:08,960 and then store my courseName in here, 165 00:08:08,960 --> 00:08:12,540 or of course, create a brand new value, 166 00:08:12,540 --> 00:08:16,003 either by copying it or by adding a brand new string. 167 00:08:17,600 --> 00:08:19,830 It's up to you since we already 168 00:08:19,830 --> 00:08:21,780 have those variables up there, 169 00:08:21,780 --> 00:08:23,547 we could reuse them on the array. 170 00:08:23,547 --> 00:08:25,220 And here, I'll do something 171 00:08:25,220 --> 00:08:27,300 which is called commenting out. 172 00:08:27,300 --> 00:08:30,483 I'll mark them and press this comment shortcut. 173 00:08:31,810 --> 00:08:35,980 You can also find it here in your Menu under Edit. 174 00:08:35,980 --> 00:08:39,130 I'm toggling a line comment here. 175 00:08:39,130 --> 00:08:42,280 And with that I'm actually making sure that 176 00:08:42,280 --> 00:08:44,680 we can still see that code, 177 00:08:44,680 --> 00:08:48,160 but that it doesn't have any effect anymore. 178 00:08:48,160 --> 00:08:49,340 And with that of course, 179 00:08:49,340 --> 00:08:52,700 I can't reference those variables anymore down there, 180 00:08:52,700 --> 00:08:55,870 but instead I have to create three new values. 181 00:08:55,870 --> 00:08:59,160 But it's totally optional whether you wanna do that 182 00:08:59,160 --> 00:09:01,610 or reference those values. 183 00:09:01,610 --> 00:09:03,510 Here I'm creating new values, 184 00:09:03,510 --> 00:09:06,650 so now I'll also add a price which is 39, 185 00:09:06,650 --> 00:09:09,330 and then my goals, 186 00:09:09,330 --> 00:09:11,090 which is still an array, 187 00:09:11,090 --> 00:09:13,260 so we still have the square brackets. 188 00:09:13,260 --> 00:09:17,120 And we can have arrays inside of objects as values. 189 00:09:17,120 --> 00:09:20,180 We could even have objects inside of objects, 190 00:09:20,180 --> 00:09:21,720 that's all allowed. 191 00:09:21,720 --> 00:09:25,320 And now we just have to copy these three values, 192 00:09:25,320 --> 00:09:26,800 these three strings, 193 00:09:26,800 --> 00:09:30,863 and add them to this new goals array down there, like that. 194 00:09:32,150 --> 00:09:34,950 And now I will press this autoformat shortcut 195 00:09:34,950 --> 00:09:37,583 and that formats this object such that 196 00:09:37,583 --> 00:09:39,133 it's a bit more readable. 197 00:09:41,290 --> 00:09:44,410 Now we did group these variables together, 198 00:09:44,410 --> 00:09:47,223 now we should still output their values. 199 00:09:48,090 --> 00:09:50,870 And for this we can again use the alert function, 200 00:09:50,870 --> 00:09:54,390 but now we don't just use the name 201 00:09:54,390 --> 00:09:56,820 or the price as a name here, 202 00:09:56,820 --> 00:10:00,950 but instead these are now labels inside of an object. 203 00:10:00,950 --> 00:10:04,900 So we start by using the overall object onlineCourse. 204 00:10:04,900 --> 00:10:08,030 And then you'll learn about this dot notation, 205 00:10:08,030 --> 00:10:10,090 which you can use to access 206 00:10:10,090 --> 00:10:13,120 the different properties stored in there. 207 00:10:13,120 --> 00:10:15,579 And here I then access the name property 208 00:10:15,579 --> 00:10:16,912 and output this, 209 00:10:17,755 --> 00:10:19,167 like this. 210 00:10:19,167 --> 00:10:22,850 And then I'll do the same here, access my onlineCourse. 211 00:10:22,850 --> 00:10:26,400 And then here the price let's say. 212 00:10:26,400 --> 00:10:31,010 And then last but not least access onlineCourse.goals, 213 00:10:31,010 --> 00:10:31,983 like this. 214 00:10:33,720 --> 00:10:36,000 And that's now task number three solved, 215 00:10:36,000 --> 00:10:38,140 let's see if it works. 216 00:10:38,140 --> 00:10:42,100 If I clicked this away and reload, 217 00:10:42,100 --> 00:10:45,140 I still see Web Development - The Complete Guide, 218 00:10:45,140 --> 00:10:47,630 39, and my goals. 219 00:10:47,630 --> 00:10:49,593 So that's still working. 220 00:10:52,480 --> 00:10:57,480 Task number four now is to also outputs the second element. 221 00:10:57,490 --> 00:10:59,960 So Become a web developer in my case 222 00:10:59,960 --> 00:11:01,763 in this main goals variable. 223 00:11:03,290 --> 00:11:06,810 And for this we can, again, of course use the alert function 224 00:11:06,810 --> 00:11:09,400 since that is still the only way we have 225 00:11:09,400 --> 00:11:11,660 for outputting values. 226 00:11:11,660 --> 00:11:13,920 And in this function, 227 00:11:13,920 --> 00:11:16,977 I now wanna output onlineCourse.goals, 228 00:11:19,360 --> 00:11:21,650 but not the entire array, 229 00:11:21,650 --> 00:11:24,360 but the second item in there. 230 00:11:24,360 --> 00:11:28,760 And for that we can use this square bracket notation here 231 00:11:28,760 --> 00:11:31,420 when accessing such an array. 232 00:11:31,420 --> 00:11:34,600 This as you learned does not create a new array, 233 00:11:34,600 --> 00:11:37,970 but it's a special syntax for accessing an item 234 00:11:37,970 --> 00:11:41,210 in the array by its identifier. 235 00:11:41,210 --> 00:11:43,440 And you learned that identifiers 236 00:11:43,440 --> 00:11:47,120 are automatically assigned to array items. 237 00:11:47,120 --> 00:11:51,710 They are numbers starting at zero for the first item. 238 00:11:51,710 --> 00:11:53,670 And that's a potential gotcha 239 00:11:53,670 --> 00:11:58,130 when accessing the second item here, you don't enter two, 240 00:11:58,130 --> 00:12:00,960 because that would actually be the third item. 241 00:12:00,960 --> 00:12:05,000 But instead one since that index starts at zero 242 00:12:05,000 --> 00:12:08,770 and therefore Learn Web Development has the identifier zero, 243 00:12:08,770 --> 00:12:11,470 Become a web developer, which is the second item, 244 00:12:11,470 --> 00:12:13,323 has the identifier one. 245 00:12:15,630 --> 00:12:17,370 And hence if I save this, 246 00:12:17,370 --> 00:12:22,003 now I also get this second item here. 247 00:12:23,150 --> 00:12:25,003 That's task number four. 248 00:12:26,410 --> 00:12:28,100 In task number five, 249 00:12:28,100 --> 00:12:30,870 we're now going to build a function. 250 00:12:30,870 --> 00:12:34,200 And that function should basically do what we do here, 251 00:12:34,200 --> 00:12:37,260 but the identifier should be dynamic 252 00:12:37,260 --> 00:12:40,600 and the list on which we do it 253 00:12:40,600 --> 00:12:42,513 should also not be set in stone. 254 00:12:43,630 --> 00:12:47,520 Now for that, I will start with the function keyword 255 00:12:47,520 --> 00:12:50,140 because a custom command is a function 256 00:12:50,140 --> 00:12:53,343 and we create such a function with that function keyword. 257 00:12:54,210 --> 00:12:56,320 Then you learned that the name is up to you, 258 00:12:56,320 --> 00:13:00,530 but it should describe what this function does. 259 00:13:00,530 --> 00:13:05,530 And here this function will in the end access a goal, 260 00:13:06,660 --> 00:13:09,050 but actually since that should also be dynamic 261 00:13:09,050 --> 00:13:11,060 and it should work on any list, 262 00:13:11,060 --> 00:13:15,200 it will access an element in an array. 263 00:13:15,200 --> 00:13:17,980 It will access an element in a list we could say. 264 00:13:17,980 --> 00:13:20,697 So here we could name it, accessListItem, 265 00:13:22,843 --> 00:13:24,093 or getListItem, 266 00:13:25,290 --> 00:13:26,670 whatever you prefer. 267 00:13:26,670 --> 00:13:29,070 And I think that accurately describes 268 00:13:29,070 --> 00:13:30,420 what this function will do. 269 00:13:32,060 --> 00:13:35,300 Then we add parentheses and now curly braces 270 00:13:35,300 --> 00:13:37,713 between which we put our function code. 271 00:13:39,010 --> 00:13:41,300 We use curly braces just as we did it 272 00:13:41,300 --> 00:13:42,920 for creating an object, 273 00:13:42,920 --> 00:13:46,380 but after the function keyword and this syntax. 274 00:13:46,380 --> 00:13:49,410 These curly braces do something totally different, 275 00:13:49,410 --> 00:13:51,150 they don't create an object, 276 00:13:51,150 --> 00:13:54,833 they just mark the beginning and end of this function code. 277 00:13:56,170 --> 00:14:00,270 Now in here, we now wanna do all the different operations 278 00:14:00,270 --> 00:14:02,030 we wanna perform. 279 00:14:02,030 --> 00:14:04,140 And for that, this function 280 00:14:04,140 --> 00:14:06,900 will actually need to use parameters 281 00:14:06,900 --> 00:14:10,650 because both the identifier here, 282 00:14:10,650 --> 00:14:13,970 as well as the main goals should be dynamic. 283 00:14:13,970 --> 00:14:16,853 So that list which we access should be dynamic. 284 00:14:17,960 --> 00:14:22,960 So hence here, I wanna get my list or my array, 285 00:14:23,560 --> 00:14:25,500 and my identifier 286 00:14:25,500 --> 00:14:30,500 or my arrayIndex as parameters. 287 00:14:30,610 --> 00:14:33,490 So that we can find them in the place 288 00:14:33,490 --> 00:14:37,213 where we execute this command later on. 289 00:14:38,610 --> 00:14:39,870 And then here in this function, 290 00:14:39,870 --> 00:14:41,283 we can add a variable, 291 00:14:42,771 --> 00:14:45,230 arrayElement could be the name 292 00:14:46,240 --> 00:14:49,560 where we access this array. 293 00:14:49,560 --> 00:14:52,330 And then again, we use the square brackets to access 294 00:14:52,330 --> 00:14:54,500 a certain item in this array. 295 00:14:54,500 --> 00:14:56,797 That of course has the assumption that 296 00:14:56,797 --> 00:15:00,690 the value for this parameter will always be an array. 297 00:15:00,690 --> 00:15:03,070 But since we are the one writing this function, 298 00:15:03,070 --> 00:15:06,180 we can of course dictate on how it should be used 299 00:15:06,180 --> 00:15:08,740 and which values we accept. 300 00:15:08,740 --> 00:15:11,340 So that's absolutely fine. 301 00:15:11,340 --> 00:15:13,910 And here the value which I wanna use, 302 00:15:13,910 --> 00:15:16,230 and that's now maybe tricky and new 303 00:15:16,230 --> 00:15:18,830 is not a hard coded number, 304 00:15:18,830 --> 00:15:22,080 but the value stored in arrayIndex, 305 00:15:22,080 --> 00:15:25,563 which I assume to be a number. 306 00:15:26,940 --> 00:15:29,140 And that's definitely a tricky step 307 00:15:29,140 --> 00:15:32,330 since that's not something we did before, 308 00:15:32,330 --> 00:15:34,300 but it hopefully makes a lot of sense 309 00:15:34,300 --> 00:15:36,490 if you think about it. 310 00:15:36,490 --> 00:15:39,630 We put a number between square brackets 311 00:15:39,630 --> 00:15:42,530 and instead of writing that number like that, 312 00:15:42,530 --> 00:15:44,850 we can of course also write a variable 313 00:15:44,850 --> 00:15:47,210 that stores a number. 314 00:15:47,210 --> 00:15:48,940 And that's in the end what we're doing here 315 00:15:48,940 --> 00:15:51,000 because parameters inside 316 00:15:51,000 --> 00:15:54,403 of a function basically act like variables. 317 00:15:55,860 --> 00:16:00,400 And now I'm accessing a certain element in that list, 318 00:16:00,400 --> 00:16:03,800 in that array, which we get as a parameter. 319 00:16:03,800 --> 00:16:07,493 And I store that accessed element in a new variable. 320 00:16:08,690 --> 00:16:12,300 And now it makes most sense to then return 321 00:16:12,300 --> 00:16:14,020 this array element here, 322 00:16:14,020 --> 00:16:17,210 because with that we ensure that we can use 323 00:16:17,210 --> 00:16:20,060 that accessed element in the place 324 00:16:20,060 --> 00:16:22,970 where this function is being executed, 325 00:16:22,970 --> 00:16:26,330 so that this is a pure utility function 326 00:16:26,330 --> 00:16:28,640 that does a certain operation 327 00:16:28,640 --> 00:16:31,920 and then yields the result of that operation. 328 00:16:31,920 --> 00:16:35,610 That's what I also request here in this last instruction. 329 00:16:35,610 --> 00:16:38,580 This custom command should provide, 330 00:16:38,580 --> 00:16:41,773 which means return, the accessed value. 331 00:16:43,090 --> 00:16:45,430 And now we have our function in place, 332 00:16:45,430 --> 00:16:48,330 now we can use it down there to get our, 333 00:16:48,330 --> 00:16:51,160 let's say first goal, for example, 334 00:16:51,160 --> 00:16:52,670 and store it in a variable, 335 00:16:52,670 --> 00:16:55,540 which hence is named firstGoal. 336 00:16:55,540 --> 00:16:56,833 By calling getListItem, 337 00:16:57,770 --> 00:16:58,960 and you learned for that, 338 00:16:58,960 --> 00:17:03,150 that you repeat your name and then you add parentheses. 339 00:17:03,150 --> 00:17:05,290 And then between those parentheses, 340 00:17:05,290 --> 00:17:10,290 you pass in the concrete values for these parameters. 341 00:17:10,800 --> 00:17:13,180 And here the order does matter. 342 00:17:13,180 --> 00:17:16,910 So the first value should be a value for this array 343 00:17:16,910 --> 00:17:19,079 which we expect as a parameter. 344 00:17:19,079 --> 00:17:21,530 The second value which we pass in 345 00:17:21,530 --> 00:17:23,990 should be a value for this arrayIndex. 346 00:17:25,440 --> 00:17:27,970 Now the array I wanna access here 347 00:17:27,970 --> 00:17:32,970 is my onlineCourse.goals array. 348 00:17:34,610 --> 00:17:36,830 So I'm still using the dot notation here 349 00:17:36,830 --> 00:17:39,180 because I wanna get access to that array, 350 00:17:39,180 --> 00:17:42,120 which is stored in my onlineCourse object, 351 00:17:42,120 --> 00:17:44,483 so to this array here. 352 00:17:45,650 --> 00:17:48,420 For that I'm using the dot notation. 353 00:17:48,420 --> 00:17:51,930 That's my value for this first parameter. 354 00:17:51,930 --> 00:17:55,590 Now we also use a comma here for then passing in 355 00:17:55,590 --> 00:17:58,720 a value for the second parameter. 356 00:17:58,720 --> 00:18:01,080 And that is the index which I wanna access, 357 00:18:01,080 --> 00:18:03,350 and since I wanna get my firstGoal here, 358 00:18:03,350 --> 00:18:06,823 and the index starts at zero, that's zero. 359 00:18:08,150 --> 00:18:11,810 And now if I alert my firstGoal here, 360 00:18:11,810 --> 00:18:13,820 and I save this, 361 00:18:13,820 --> 00:18:17,193 if I go back to my page, 362 00:18:20,160 --> 00:18:22,610 here I get Learn Web Development, 363 00:18:22,610 --> 00:18:27,223 which indeed is my first goal here. 364 00:18:28,770 --> 00:18:31,403 And that's done with help of my function. 365 00:18:32,800 --> 00:18:36,950 Now I am 100% aware that this part 366 00:18:36,950 --> 00:18:40,640 was probably very challenging and tricky, 367 00:18:40,640 --> 00:18:44,330 because you had to apply certain steps 368 00:18:44,330 --> 00:18:47,430 which we haven't used exactly like this before, 369 00:18:47,430 --> 00:18:51,590 like using two parameters or providing a variable 370 00:18:51,590 --> 00:18:53,753 for the index of an element. 371 00:18:54,620 --> 00:18:57,810 If you were still able to do that, congratulations, 372 00:18:57,810 --> 00:18:59,490 that's really amazing. 373 00:18:59,490 --> 00:19:01,960 If you did struggle a bit with that, 374 00:19:01,960 --> 00:19:03,460 that's no problem at all, 375 00:19:03,460 --> 00:19:04,950 we're just getting started. 376 00:19:04,950 --> 00:19:08,100 And this was a quite challenging exercise, 377 00:19:08,100 --> 00:19:11,270 but we are going to see plenty of other examples 378 00:19:11,270 --> 00:19:14,563 and we'll see plenty of other exercises as well.