1 00:00:02,370 --> 00:00:09,840 I want to start with conditional code execution which is super important. For one, there are certain, quite 2 00:00:09,840 --> 00:00:19,950 a lot of cases, of scenarios which you couldn't really solve or couldn't really handle without the availability 3 00:00:19,950 --> 00:00:26,840 of conditional code execution, so without features that help you run code based on certain conditions. 4 00:00:26,940 --> 00:00:33,170 The app we built thus far could be built without conditional code but that's not the case for all apps and 5 00:00:33,220 --> 00:00:40,920 in addition, even if you can build an app without conditional code execution, like our basic calculator, 6 00:00:41,220 --> 00:00:49,770 you can still opt to write cleaner code, shorter code if you can run certain parts of your code conditionally. 7 00:00:49,770 --> 00:00:52,890 Now what does conditional code execution mean? 8 00:00:52,890 --> 00:00:58,440 Imagine that you have a function and conditional code execution is not just available inside of 9 00:00:58,440 --> 00:00:59,580 functions by the way 10 00:00:59,820 --> 00:01:06,900 but consider that you have a function and in there, you have two code snippets that you could execute, 11 00:01:06,900 --> 00:01:13,080 for example you either add two numbers or you subtract two numbers. You do that in the same function 12 00:01:13,080 --> 00:01:18,420 and of course you could write two separate functions but even then, you might want to call one of the 13 00:01:18,420 --> 00:01:20,860 two functions based on some condition 14 00:01:20,910 --> 00:01:23,960 and that's exactly what conditional code execution is about. 15 00:01:24,000 --> 00:01:30,930 You might have some program where you either want to run option A, so want to add two numbers or you 16 00:01:30,930 --> 00:01:32,820 want to subtract two numbers. 17 00:01:33,060 --> 00:01:35,220 So you have some condition that needs to be met 18 00:01:35,220 --> 00:01:42,660 and for this you can use a so-called if statement. If statements are a core construct, not just in Javascript 19 00:01:42,690 --> 00:01:50,590 but actually in any programming language you can learn. Now if statements require conditions, you specify 20 00:01:50,590 --> 00:01:56,920 a condition that must be met and a condition is in the end just a boolean value. 21 00:01:56,920 --> 00:02:01,770 You remember that strange boolean part I mentioned earlier in the course? 22 00:02:01,780 --> 00:02:03,650 Well that's becoming important right now. 23 00:02:03,700 --> 00:02:09,430 This was this special kind of value which could only be true or false but that's exactly what you need 24 00:02:09,430 --> 00:02:13,170 in a condition because a condition executes code A 25 00:02:13,180 --> 00:02:22,100 if it's true or code B if it's false. Now since a condition in an if statement was in the end just true 26 00:02:22,100 --> 00:02:28,120 or false, you can always pass in a variable that holds true or false into that condition part, so 27 00:02:28,130 --> 00:02:34,190 you can always add if and then just check that variable and the value in there. That is possible but 28 00:02:34,190 --> 00:02:37,490 you will not always have a variable that holds true or false, 29 00:02:37,670 --> 00:02:42,650 you will need to create that and more often than not, you'll work with different kinds of data, 30 00:02:42,650 --> 00:02:47,500 let's say you have some user input which is a string or you're working with some numbers, 31 00:02:47,500 --> 00:02:53,870 the result of a calculation and therefore often you need to dynamically derive a boolean value and you 32 00:02:53,870 --> 00:03:01,280 can do that thankfully with the help of some boolean operators, also known as comparison operators because 33 00:03:01,280 --> 00:03:08,720 these are operators built into Javascript, just like plus, minus, the times operator and so on which don't 34 00:03:08,720 --> 00:03:16,220 yield a new number or a new string as a result but which instead return or yield true or false 35 00:03:16,220 --> 00:03:19,940 and there, you for example have the equality operator. 36 00:03:19,940 --> 00:03:23,090 This double equal sign operator and that's important, 37 00:03:23,090 --> 00:03:29,840 these are two equals signs, the single equals sign was used for assigning a value to a variable or constant, 38 00:03:30,140 --> 00:03:36,830 the double equals sign operator is used to compare two values and then return true or false and you 39 00:03:36,830 --> 00:03:39,360 use it to check for value equality. 40 00:03:39,410 --> 00:03:45,990 So for example, you compare the variables a and b and if they hold the same value, this would yield true. 41 00:03:46,100 --> 00:03:51,950 So you could use that comparison here in the condition or as a condition in an if statement. 42 00:03:51,950 --> 00:03:56,300 Of course you also can check for values not being equal, 43 00:03:56,300 --> 00:04:01,060 you do this with the exclamation mark in front of the equals sign and important here, 44 00:04:01,190 --> 00:04:06,740 you only have one equals sign, so the other equal sign is basically replaced by the exclamation mark 45 00:04:06,740 --> 00:04:07,440 here. 46 00:04:07,460 --> 00:04:13,370 This checks for value inequality and therefore you could check if a and b are not equal and only execute 47 00:04:13,370 --> 00:04:21,070 some code if that's the case. Now there also is a special form of these two operators. 48 00:04:21,100 --> 00:04:29,060 You also have the equality operator with three equal signs and therefore also the not equal operator 49 00:04:29,170 --> 00:04:31,850 with an exclamation mark and two equal signs. 50 00:04:31,900 --> 00:04:35,980 Now what's the difference to the first two operators I showed you? 51 00:04:35,980 --> 00:04:44,440 Well, the triple equal sign operator checks for value and type equality or with the exclamation mark, 52 00:04:44,440 --> 00:04:46,210 for inequality. 53 00:04:46,400 --> 00:04:48,160 Now what's the difference here? 54 00:04:48,220 --> 00:04:54,550 To find out, let's just dive here in the console, in the browser developer tools on any web page of your 55 00:04:54,550 --> 00:04:56,110 choice, like our calculator 56 00:04:56,140 --> 00:04:57,890 but that really doesn't matter 57 00:04:58,000 --> 00:05:03,040 and in there, you can quickly play around with these operators. 58 00:05:03,040 --> 00:05:05,400 Now let's start with the double equal sign operator, 59 00:05:05,440 --> 00:05:09,570 let's see what the result is if I compare two to two. 60 00:05:09,580 --> 00:05:13,630 Now of course, we get true as a result because these two values are equal. 61 00:05:13,750 --> 00:05:18,750 Now needless to say that in your program of course, you won't hardcode a comparison like this, 62 00:05:18,910 --> 00:05:21,790 that's redundant because that will always yield true, 63 00:05:21,970 --> 00:05:27,010 instead you might be comparing two values entered by the user, for example with the input like this where 64 00:05:27,010 --> 00:05:28,940 you don't know the value in advance, 65 00:05:28,990 --> 00:05:33,220 I'm just using hardcoded values here to show how these operators work. 66 00:05:33,220 --> 00:05:39,630 So this yields true but you also get true if you compare two to a string that holds a value of two 67 00:05:39,760 --> 00:05:42,450 and that's what the double equality operator does. 68 00:05:42,490 --> 00:05:45,110 It checks for value equality only, 69 00:05:45,190 --> 00:05:50,230 it doesn't care whether the two values you are comparing are of the same type. 70 00:05:50,470 --> 00:05:56,810 That would be the case with triple equal signs though, there for two numbers being compared, 71 00:05:56,890 --> 00:06:02,860 if they have the same value, we get true but if I compare this to a string with the value two, I get 72 00:06:02,860 --> 00:06:03,540 false, 73 00:06:03,550 --> 00:06:05,710 so that's the important difference here 74 00:06:05,710 --> 00:06:09,280 and the same, just the opposite of course is the case with the negation, 75 00:06:09,280 --> 00:06:17,050 so with the exclamation mark. Now typically in Javascript, you should prefer the triple equals sign or not 76 00:06:17,050 --> 00:06:24,100 equal operator over the double equals sign or not equal operator simply because it forces you to write 77 00:06:24,130 --> 00:06:25,240 better code. 78 00:06:25,450 --> 00:06:28,710 You should care about the types of values you working with, 79 00:06:28,720 --> 00:06:35,020 for example if you're checking some user input and you're comparing it whether it's equal to some number, 80 00:06:35,410 --> 00:06:41,320 well you should first convert the user input to a number so that you can use the triple equal sign operator. 81 00:06:41,320 --> 00:06:47,500 It makes your intentions clear and it also avoids cases where a user might not enter a number at all, 82 00:06:47,500 --> 00:06:54,220 it would be better to then handle that case before you use the number instead of just getting a false 83 00:06:54,220 --> 00:06:56,470 result in a condition here. 84 00:06:56,470 --> 00:07:01,690 So typically, you want to use the triple equal sign operator just because it forces you to write more 85 00:07:01,690 --> 00:07:04,520 explicit and clearer code. 86 00:07:04,530 --> 00:07:11,610 Now of course, you can also not just check for equality or inequality, you can also compare numbers 87 00:07:11,610 --> 00:07:13,480 for being greater or smaller, 88 00:07:13,800 --> 00:07:20,430 so that's also available where you can check if number a or input a is bigger or smaller than input 89 00:07:20,460 --> 00:07:21,380 b. 90 00:07:21,390 --> 00:07:24,240 Now both the equality and the greater than and so on 91 00:07:24,240 --> 00:07:27,750 operators can be used with numbers but also with strings, 92 00:07:27,900 --> 00:07:33,150 obviously you can compare two strings for being equal but you can actually also use the greater than 93 00:07:33,180 --> 00:07:39,540 operator for example with two strings to check if one string is greater than another string in a 94 00:07:39,540 --> 00:07:49,070 lexical graphic way which means c would be greater than a because it's greater than a in an English dictionary. 95 00:07:49,080 --> 00:07:55,800 Now besides greater or smaller than, you also have the combined greater than or equal or smaller than 96 00:07:55,800 --> 00:08:02,130 or equal operators which allow you to compare values for being smaller or equal or greater or equal, 97 00:08:02,580 --> 00:08:07,350 which of course makes sense because sometimes you want to include the value in the comparison and not 98 00:08:07,350 --> 00:08:11,070 just check for whether the other value is greater or smaller. 99 00:08:11,070 --> 00:08:17,840 So these are the core boolean operators you have. The exclamation mark operator is also important to highlight, 100 00:08:17,850 --> 00:08:23,340 you saw it of course here with the equality checks, there we can combine it with the equal signs. 101 00:08:23,430 --> 00:08:27,960 Now you can also use it on a value where you already know that it holds a boolean, 102 00:08:27,960 --> 00:08:32,790 so on a variable where you know that it stores a boolean let's say to negate it, 103 00:08:32,790 --> 00:08:35,460 so to check if that is not true. 104 00:08:35,460 --> 00:08:41,450 This might sound a bit strange right now because you typically create booleans with the other operators 105 00:08:41,460 --> 00:08:47,700 and if you wanted to negate it, you could just use the unequal operator but you will find cases 106 00:08:47,730 --> 00:08:53,460 also throughout the course where you have some value which you derive as a boolean in some part of your 107 00:08:53,460 --> 00:08:57,140 code and then in some other part of your code, you need that value again, 108 00:08:57,150 --> 00:09:03,480 so which already is a boolean and you just want to then run code a if that was true or code b if it 109 00:09:03,480 --> 00:09:07,560 was not true and then you can just use that exclamation mark 110 00:09:07,560 --> 00:09:12,840 operator to do that. Now again, we'll see all of that in action in this course and in this module here 111 00:09:12,840 --> 00:09:13,680 already, 112 00:09:13,680 --> 00:09:15,140 this is just the overview 113 00:09:15,180 --> 00:09:21,330 and with that overview out of the way, let's actually see a concrete example for how we write an if statement 114 00:09:21,510 --> 00:09:23,880 and how we use some of these operators in there.