1 00:00:01,430 --> 00:00:02,430 And this lecture, 2 00:00:02,430 --> 00:00:04,530 we're gonna talk about the precedence 3 00:00:04,530 --> 00:00:06,253 of different operators. 4 00:00:07,990 --> 00:00:11,700 So I already commented out the code from the last lecture, 5 00:00:11,700 --> 00:00:14,730 but let's actually bring some of it back here. 6 00:00:14,730 --> 00:00:18,543 And in particular, the calculation of this ages. 7 00:00:21,090 --> 00:00:22,480 So like this. 8 00:00:22,480 --> 00:00:25,580 And then also this code that we discussed 9 00:00:25,580 --> 00:00:28,310 by the end of the last video. 10 00:00:28,310 --> 00:00:29,690 Remember that? 11 00:00:29,690 --> 00:00:33,450 So the question that I asked by the end of the last video 12 00:00:33,450 --> 00:00:38,040 was why these two subtractions here so this one, 13 00:00:38,040 --> 00:00:42,403 and this one are executed before this comparison operator. 14 00:00:43,440 --> 00:00:46,763 So basically the question is why does this work? 15 00:00:48,470 --> 00:00:51,683 Okay, because we see that it does actually work. 16 00:00:52,800 --> 00:00:56,390 So this number here is clearly gonna be higher 17 00:00:56,390 --> 00:00:57,373 than this one. 18 00:00:58,230 --> 00:01:01,300 Well, it works this way because JavaScript 19 00:01:01,300 --> 00:01:05,490 has a well-defined order of operator precedence. 20 00:01:05,490 --> 00:01:10,180 So basically the order in which operators are executed. 21 00:01:10,180 --> 00:01:12,930 And to actually see the precedence of all the different 22 00:01:12,930 --> 00:01:17,433 operators, let's check out a very handy precedence table. 23 00:01:18,330 --> 00:01:21,150 So let's Google MDN. 24 00:01:21,150 --> 00:01:23,610 Which stands for Mozilla Developer Network 25 00:01:23,610 --> 00:01:27,893 and then operator precedence. 26 00:01:29,420 --> 00:01:31,690 And so the one you're looking for is this one. 27 00:01:31,690 --> 00:01:35,633 So the one that starts with developer.mozilla.org. 28 00:01:36,970 --> 00:01:39,370 So MDN is a very well known 29 00:01:39,370 --> 00:01:42,080 and widely used documentation site. 30 00:01:42,080 --> 00:01:45,400 And we will actually use MDN a lot throughout the course. 31 00:01:45,400 --> 00:01:47,490 And in one of the future sections, 32 00:01:47,490 --> 00:01:50,460 I will show you a bit better how to use this site. 33 00:01:50,460 --> 00:01:53,610 But for now we're looking for a table that is here 34 00:01:53,610 --> 00:01:56,560 on this page and it's this one. 35 00:01:56,560 --> 00:02:00,500 So here we can see that grouping using parenthesis here, 36 00:02:00,500 --> 00:02:03,428 has the highest precedence of 21. 37 00:02:03,428 --> 00:02:07,640 And then we have all the operators that we already saw. 38 00:02:07,640 --> 00:02:11,210 So here plus minus, plus plus, 39 00:02:11,210 --> 00:02:14,160 so they have a precedence of 17. 40 00:02:14,160 --> 00:02:16,820 Then we have a bunch of other stuff here that we don't know 41 00:02:16,820 --> 00:02:20,523 yet, but here is also type of, that we already do know. 42 00:02:21,360 --> 00:02:24,430 We have the exponentiation operator that I showed you. 43 00:02:24,430 --> 00:02:27,000 We have all these math operators here. 44 00:02:27,000 --> 00:02:31,430 We have all comparison operators, right? 45 00:02:31,430 --> 00:02:35,970 We have some well, some other equality operators here, 46 00:02:35,970 --> 00:02:39,110 and a bunch of other operators. 47 00:02:39,110 --> 00:02:41,750 And this is actually a nice reference where you can see all 48 00:02:41,750 --> 00:02:46,040 the operators that exist in JavaScript in one handy table. 49 00:02:46,040 --> 00:02:49,410 But let's not stay in the context of our current example 50 00:02:49,410 --> 00:02:50,870 which is this one here. 51 00:02:50,870 --> 00:02:53,850 And let's understand what exactly happens here, 52 00:02:53,850 --> 00:02:56,800 in terms of operator precedence. 53 00:02:56,800 --> 00:03:01,310 So we already know that these two calculations here are done 54 00:03:01,310 --> 00:03:02,950 before the comparison. 55 00:03:02,950 --> 00:03:05,623 And so let's actually see that in the table. 56 00:03:06,730 --> 00:03:09,020 So here we have the comparison. 57 00:03:09,020 --> 00:03:12,330 So this greater than and you see that it has a lower 58 00:03:12,330 --> 00:03:15,890 precedence than the subtraction here. 59 00:03:15,890 --> 00:03:19,330 So this has 14 and this has 12, right? 60 00:03:19,330 --> 00:03:21,060 And of course you don't need to know any 61 00:03:21,060 --> 00:03:23,170 of these precedence numbers. 62 00:03:23,170 --> 00:03:24,510 Okay, don't worry about that. 63 00:03:24,510 --> 00:03:27,260 It doesn't matter, no one knows these. 64 00:03:27,260 --> 00:03:30,514 You just have to have a general idea of which operators 65 00:03:30,514 --> 00:03:32,743 are executed first. 66 00:03:33,700 --> 00:03:36,156 So usually all the math operators are executed 67 00:03:36,156 --> 00:03:39,630 before the comparison operators for example, 68 00:03:39,630 --> 00:03:41,200 because that makes sense. 69 00:03:41,200 --> 00:03:44,480 And so with this, we explain why this kind of comparison 70 00:03:44,480 --> 00:03:46,177 that we have here works. 71 00:03:46,177 --> 00:03:47,630 Now in this table, 72 00:03:47,630 --> 00:03:51,130 we can also see which operators are executed from left 73 00:03:51,130 --> 00:03:54,230 to right and which one from right to left. 74 00:03:54,230 --> 00:03:55,063 Like for example, 75 00:03:55,063 --> 00:03:58,820 the exponentiation operator is executed from right to left. 76 00:03:58,820 --> 00:04:01,870 While most operators especially the mathematical ones 77 00:04:01,870 --> 00:04:04,600 are executed from left to right. 78 00:04:04,600 --> 00:04:05,453 For example, 79 00:04:07,950 --> 00:04:12,950 let's say we wanted to calculate 25 minus 10 minus five. 80 00:04:14,770 --> 00:04:18,623 And so this one should be 10, right? 81 00:04:19,630 --> 00:04:21,033 So let's check that. 82 00:04:21,900 --> 00:04:23,780 And indeed we get 10. 83 00:04:23,780 --> 00:04:26,630 But if it was right to left, 84 00:04:26,630 --> 00:04:29,330 then it would be five minus 10 minus 25 85 00:04:29,330 --> 00:04:32,690 which would then be something completely different. 86 00:04:32,690 --> 00:04:36,020 So this is an example of left to right operation. 87 00:04:36,020 --> 00:04:37,620 But assignment, for example, 88 00:04:37,620 --> 00:04:40,723 is a good example of right to left execution. 89 00:04:41,650 --> 00:04:44,293 So let's see where we actually have assignment here. 90 00:04:45,550 --> 00:04:49,080 So it should be one of the lowest ones. 91 00:04:49,080 --> 00:04:50,830 And indeed it is. 92 00:04:50,830 --> 00:04:52,063 So it's number three. 93 00:04:53,750 --> 00:04:57,450 And so as I said, this one is right to left. 94 00:04:57,450 --> 00:04:59,130 And so let me show you a nice example 95 00:04:59,130 --> 00:05:01,510 of why this is important. 96 00:05:01,510 --> 00:05:03,940 So let's declare two variables, 97 00:05:03,940 --> 00:05:08,210 let X and Y and here's something new. 98 00:05:08,210 --> 00:05:12,433 So we can define two variables at the same time like this. 99 00:05:13,470 --> 00:05:16,730 So now in one line we declared two empty values. 100 00:05:16,730 --> 00:05:19,810 So two values which are gonna hold for now 101 00:05:19,810 --> 00:05:22,310 the value of undefined, right? 102 00:05:22,310 --> 00:05:24,860 So that's X and Y. 103 00:05:24,860 --> 00:05:26,950 And now, we can do this. 104 00:05:26,950 --> 00:05:31,020 We can say that X should be equal to Y should be equal 105 00:05:31,020 --> 00:05:36,020 to 25 minus 10, minus five which we already know is 10. 106 00:05:38,210 --> 00:05:41,623 And so let's now log both of these values to the console. 107 00:05:42,520 --> 00:05:45,133 And what do you think will happen? 108 00:05:46,800 --> 00:05:48,680 You can really try to think about this 109 00:05:48,680 --> 00:05:50,163 before checking the result. 110 00:05:51,860 --> 00:05:54,570 And so what is it gonna be? 111 00:05:54,570 --> 00:05:56,810 And actually let's delete this one first, 112 00:05:56,810 --> 00:05:58,833 so to avoid some confusion there. 113 00:05:59,710 --> 00:06:00,543 And. 114 00:06:01,760 --> 00:06:05,570 So, we see that X and Y are both 10. 115 00:06:05,570 --> 00:06:08,120 And so let's analyze why that happens. 116 00:06:08,120 --> 00:06:11,140 So when JavaScript first finds this line of code 117 00:06:11,140 --> 00:06:12,480 here to execute. 118 00:06:12,480 --> 00:06:15,090 It will look at all the operators that are present 119 00:06:15,090 --> 00:06:17,760 and it will see the minus operators. 120 00:06:17,760 --> 00:06:19,610 And so it will start with these, 121 00:06:19,610 --> 00:06:23,310 because they have a higher precedence, right? 122 00:06:23,310 --> 00:06:27,457 So assignment has only three, but the, 123 00:06:30,680 --> 00:06:32,390 where is it? 124 00:06:32,390 --> 00:06:33,223 Here it is. 125 00:06:33,223 --> 00:06:35,920 So the subtraction has a 14. 126 00:06:35,920 --> 00:06:38,230 And so of course it's gonna be executed first 127 00:06:38,230 --> 00:06:39,600 and left to right. 128 00:06:39,600 --> 00:06:41,110 And so, as we already know, 129 00:06:41,110 --> 00:06:43,363 this year will turn out to be 10. 130 00:06:45,090 --> 00:06:46,950 And so let's just write that here. 131 00:06:46,950 --> 00:06:48,830 So after these minus operations 132 00:06:48,830 --> 00:06:52,420 we end up with this code basically. 133 00:06:52,420 --> 00:06:57,420 So X equals Y equals 10, right? 134 00:06:57,540 --> 00:07:01,720 Because again, 10 is the result of doing these operations. 135 00:07:01,720 --> 00:07:04,200 And so now we only have two operators left 136 00:07:04,200 --> 00:07:06,430 which are the equal operators. 137 00:07:06,430 --> 00:07:08,470 And so now they are executed 138 00:07:08,470 --> 00:07:12,950 but as I showed you before they are executed right to left. 139 00:07:12,950 --> 00:07:17,950 So from this side here, starting from the 10 to this side. 140 00:07:17,950 --> 00:07:22,950 And so what happens is that we will have Y equals 10. 141 00:07:23,570 --> 00:07:26,290 And so at this point, Y is equal to 10. 142 00:07:26,290 --> 00:07:31,290 And so what we have then is X equal to 10, okay. 143 00:07:31,290 --> 00:07:34,770 And then after that, we're only left with X equal 10. 144 00:07:34,770 --> 00:07:39,410 And so at the end, both X and Y are gonna be 10. 145 00:07:39,410 --> 00:07:41,660 Okay, maybe that sounded a bit confusing, 146 00:07:41,660 --> 00:07:43,060 but that's just how it works 147 00:07:43,060 --> 00:07:46,310 when you evaluate from right to left. 148 00:07:46,310 --> 00:07:48,510 And actually that's the way it has to be, 149 00:07:48,510 --> 00:07:51,770 because if it was the other way around this wouldn't work. 150 00:07:51,770 --> 00:07:54,010 Just imagine if we had this assignment 151 00:07:54,010 --> 00:07:56,070 working from left to right. 152 00:07:56,070 --> 00:07:58,840 Then X would be equal to Y 153 00:07:58,840 --> 00:08:01,390 and Y is undefined at this point. 154 00:08:01,390 --> 00:08:06,200 Remember, because we declared it here as an empty variable. 155 00:08:06,200 --> 00:08:07,230 And so again, 156 00:08:07,230 --> 00:08:10,286 if assignment would be from left to right then first 157 00:08:10,286 --> 00:08:13,450 X would be equal to Y which would be undefined 158 00:08:13,450 --> 00:08:16,660 and then Y would be equal to 10. 159 00:08:16,660 --> 00:08:19,497 And so that's not the result that we expect here. 160 00:08:19,497 --> 00:08:22,060 And so once more, the way this works 161 00:08:22,060 --> 00:08:25,750 is actually very logical and makes a lot of sense. 162 00:08:25,750 --> 00:08:27,670 So I hope that made sense. 163 00:08:27,670 --> 00:08:28,503 And now to finish, 164 00:08:28,503 --> 00:08:33,430 let's just check out the one with the highest precedence, 165 00:08:33,430 --> 00:08:35,230 which is just grouping. 166 00:08:35,230 --> 00:08:37,380 So basically using parenthesis. 167 00:08:37,380 --> 00:08:40,910 And that actually works just like in mathematics 168 00:08:40,910 --> 00:08:44,884 where operations within parenthesis are also executed first. 169 00:08:44,884 --> 00:08:48,300 So I hope you remember that from school. 170 00:08:48,300 --> 00:08:50,770 And the great example is to calculate 171 00:08:50,770 --> 00:08:53,300 the average of two values. 172 00:08:53,300 --> 00:08:56,700 So we have age Jonas and age Sarah. 173 00:08:56,700 --> 00:09:00,353 And so let's calculate the average age of these two people. 174 00:09:02,120 --> 00:09:04,380 So let's actually start by logging their ages 175 00:09:04,380 --> 00:09:07,183 to the console, just so we see. 176 00:09:10,850 --> 00:09:14,950 So age Jonas and age Sarah. 177 00:09:14,950 --> 00:09:17,330 And now I want to calculate the average. 178 00:09:17,330 --> 00:09:19,530 And actually that stood out here above that. 179 00:09:20,440 --> 00:09:23,400 So let's say average age. 180 00:09:23,400 --> 00:09:28,090 And once more, don't forget the descriptive variable names. 181 00:09:28,090 --> 00:09:31,340 So average age describes exactly what this variable 182 00:09:31,340 --> 00:09:33,210 is going to hold. 183 00:09:33,210 --> 00:09:36,300 So to calculate an average, we need to add two values 184 00:09:36,300 --> 00:09:38,930 together and then divide them by two. 185 00:09:38,930 --> 00:09:41,760 At least that's when we have just two values. 186 00:09:41,760 --> 00:09:43,050 So let's say, 187 00:09:43,050 --> 00:09:48,010 age Jonas plus age Sarah. 188 00:09:48,010 --> 00:09:52,230 So that's the addition and then divided by two. 189 00:09:52,230 --> 00:09:54,750 But now what is going to happen? 190 00:09:54,750 --> 00:09:57,073 Well, according to our precedence table, 191 00:09:57,930 --> 00:10:02,930 we have the division here happening before the subtraction. 192 00:10:03,360 --> 00:10:06,740 So this is 15 and this is 14. 193 00:10:06,740 --> 00:10:10,360 And so what happens first is age Sarah is gonna be divided 194 00:10:10,360 --> 00:10:13,473 by two and then the age of Jonas is gonna be added. 195 00:10:14,940 --> 00:10:18,893 So let's actually log that results here as well. 196 00:10:21,560 --> 00:10:25,510 And so here the average age is now 55.5. 197 00:10:25,510 --> 00:10:28,560 Which really doesn't make any sense because how can 198 00:10:28,560 --> 00:10:33,130 the average be larger than one of the two ages, right? 199 00:10:33,130 --> 00:10:35,430 And so that's where the parenthesis come in. 200 00:10:35,430 --> 00:10:39,010 So by using parenthesis, once more, 201 00:10:39,010 --> 00:10:41,170 just like in mathematics, 202 00:10:41,170 --> 00:10:44,050 we can make it so that this operation here, 203 00:10:44,050 --> 00:10:46,270 is executed first. 204 00:10:46,270 --> 00:10:48,910 Okay, so basically everything that is within 205 00:10:48,910 --> 00:10:53,910 the parenthesis which have the precedence of 21, right? 206 00:10:54,472 --> 00:10:59,472 So now this one is executed first and then the division. 207 00:11:00,160 --> 00:11:04,280 And so yeah, now it makes sense. 208 00:11:04,280 --> 00:11:05,113 Okay. 209 00:11:05,113 --> 00:11:07,720 I hope that wasn't too confusing. 210 00:11:07,720 --> 00:11:09,230 And now you're actually ready 211 00:11:09,230 --> 00:11:11,620 for your first coding challenge. 212 00:11:11,620 --> 00:11:14,230 So I hope to see you soon in the next video 213 00:11:14,230 --> 00:11:15,943 for your first challenge.