1 00:00:00,900 --> 00:00:05,970 This lesson, I'm going to be showing you how much fun you can have with variables and of course depends 2 00:00:05,970 --> 00:00:10,440 on what your idea of fun is, what there are some different options for variables that you should be 3 00:00:10,440 --> 00:00:14,790 aware of, such as setting, declaring variables with let and contest. 4 00:00:14,940 --> 00:00:21,840 So this is new with ESX as well as different data types that are available within variables such as 5 00:00:21,840 --> 00:00:22,410 booleans. 6 00:00:22,540 --> 00:00:25,740 So what a boolean is, it's either true or false. 7 00:00:26,040 --> 00:00:31,020 So it's just like the strings and the numbers that we've been working with in the earlier lessons when 8 00:00:31,020 --> 00:00:33,390 we're declaring variables and assigning values to them. 9 00:00:33,540 --> 00:00:35,490 And essentially it's like a switch. 10 00:00:35,790 --> 00:00:39,030 So it can either be on or off, true or false. 11 00:00:39,180 --> 00:00:42,300 So those are only two values that are available within a boolean. 12 00:00:42,510 --> 00:00:46,410 And a lot of times booleans are used for conditions. 13 00:00:46,410 --> 00:00:51,000 So they're ideal for conditions because you check to see if this condition is true. 14 00:00:51,120 --> 00:00:53,700 And if it is, then you run a set of code. 15 00:00:53,920 --> 00:00:57,150 So here we have an example of different data types. 16 00:00:57,180 --> 00:01:00,300 So at first we come in and we declare the variable. 17 00:01:00,300 --> 00:01:05,170 And we did mention that you don't have to assign a value, you can just declare a variable. 18 00:01:05,190 --> 00:01:10,920 So when we're doing var message that's just declaring the variable in in order to be able to use it, 19 00:01:10,950 --> 00:01:11,910 you need to declare it. 20 00:01:11,910 --> 00:01:15,520 If you try to access it before you've declared it, then you're going to throw an error. 21 00:01:15,780 --> 00:01:22,760 So at this point we can message and we can see the value of message and it's going to be undefined. 22 00:01:22,950 --> 00:01:24,420 So this is the default state. 23 00:01:24,420 --> 00:01:30,540 When you are setting a variable, the data type is undefined and undefined, is kind of the same thing 24 00:01:30,540 --> 00:01:33,180 as null, but null is used. 25 00:01:33,180 --> 00:01:39,360 And that's another data type that you can utilize when you are writing your code, and that can distinguish 26 00:01:39,360 --> 00:01:41,410 and differentiate between undefined. 27 00:01:41,640 --> 00:01:47,360 So this is a variable that's been set to hold no value and that's equal to null. 28 00:01:47,700 --> 00:01:53,430 And typically we can set to undefined, but we're not going to be setting it to undefined because that's 29 00:01:53,430 --> 00:01:56,990 going to lead to some confusion as the default is undefined. 30 00:01:57,360 --> 00:01:59,950 So when we want to use a boolean. 31 00:01:59,970 --> 00:02:02,000 So this is a great case for using a boolean. 32 00:02:02,190 --> 00:02:08,640 So we have our declarative will we set it to our boolean value, which in this case is false, and then 33 00:02:08,640 --> 00:02:10,500 we logout the boolean value. 34 00:02:10,500 --> 00:02:16,080 So we're going to see false in the console log and then we update the mileage out to be true. 35 00:02:16,200 --> 00:02:18,690 And then we check to see if Bilitis true. 36 00:02:18,690 --> 00:02:20,850 And if it is, then it's going to output the message. 37 00:02:21,060 --> 00:02:22,140 That's my light. 38 00:02:22,410 --> 00:02:28,470 There's also you can declare multiple variables at the same time so we can do var and you can separate 39 00:02:28,470 --> 00:02:31,830 them so you can have multiple variables declared at the same time. 40 00:02:31,830 --> 00:02:36,450 And then these are all going to be equal to undefined, just as we do with the one variable. 41 00:02:36,480 --> 00:02:40,430 And here's another example of the different data types that we've covered so far. 42 00:02:40,560 --> 00:02:42,790 So we have a is equal to hello. 43 00:02:42,930 --> 00:02:44,400 So notice the quotes around there. 44 00:02:44,400 --> 00:02:47,820 So that indicates that it's a string B is equal to 10. 45 00:02:47,910 --> 00:02:53,820 So there's no quotes around there that indicates a no and C is equal to false and true and false is 46 00:02:53,820 --> 00:02:54,780 a boolean value. 47 00:02:54,840 --> 00:02:59,770 So again, no quotes, otherwise it would be a string and you can output that value of a. 48 00:02:59,970 --> 00:03:04,140 So there are different variable types and there's also different ways to declare variables. 49 00:03:04,380 --> 00:03:07,890 So long with s six came Aulet and const. 50 00:03:08,100 --> 00:03:13,560 So what Lenin and Konsta is they allow you to declare a variable and this is SCOP based. 51 00:03:13,800 --> 00:03:15,630 So scope of JavaScript. 52 00:03:15,630 --> 00:03:18,300 And of course we are going to cover this in more detail later on. 53 00:03:18,450 --> 00:03:23,610 But for now it's important to understand that they're just different blocks of code that get run and 54 00:03:23,610 --> 00:03:27,490 typically indicated by the curly brackets, as we see in the example over here. 55 00:03:27,510 --> 00:03:32,430 So the difference between left and const is that left is a value that can change. 56 00:03:32,610 --> 00:03:37,200 And const, as the name implies, is constant and is not meant to be changed. 57 00:03:37,500 --> 00:03:40,860 And var was the initial way to declare a variable. 58 00:03:40,980 --> 00:03:45,750 But now you're going to see that more and more coders are moving to let and const because of the control 59 00:03:45,750 --> 00:03:46,640 over the block. 60 00:03:46,650 --> 00:03:51,450 And essentially if you have a variable that you are changing, then you created a let. 61 00:03:51,720 --> 00:03:56,640 And if you have a variable that you're not changing then you created as const and it gives you also 62 00:03:56,640 --> 00:04:03,780 more control when you are utilizing your code to make sure that you're not unintentionally changing 63 00:04:03,780 --> 00:04:05,340 a variable that shouldn't be changed. 64 00:04:05,460 --> 00:04:07,590 And that's where const really shines. 65 00:04:07,600 --> 00:04:10,260 And of course, more on scope later on in the course. 66 00:04:10,440 --> 00:04:17,220 So now with let so really it is similar to VAR except that its scope based and that's a better way to 67 00:04:17,220 --> 00:04:19,810 do things as you have more control over the variables. 68 00:04:20,070 --> 00:04:25,740 So here we've got an example of that and really the same thing as when we're doing var where we are 69 00:04:25,740 --> 00:04:29,230 assigning a value to it and then we're reassigning a new value to it. 70 00:04:29,280 --> 00:04:35,640 Here we've got a code snippet that's an example of let where we see we're creating a message and this 71 00:04:35,640 --> 00:04:39,420 is an example of scope and we are going to cover this in more detail later on. 72 00:04:39,570 --> 00:04:43,050 But we do have a condition to check to see if a value is true. 73 00:04:43,200 --> 00:04:45,410 And right now we've just defaulted it to true. 74 00:04:45,420 --> 00:04:47,280 So it will automatically run this code. 75 00:04:47,580 --> 00:04:53,130 And you can see that the message is going to be returning back and you're going to see that we've got 76 00:04:53,130 --> 00:04:55,470 my message and then my message again. 77 00:04:55,650 --> 00:04:58,540 But these two values in the console come out different. 78 00:04:58,560 --> 00:05:00,150 So the first one that we're. 79 00:05:00,370 --> 00:05:05,290 Pudding is going to be a new one and then we're going to see welcome when we've got the second console 80 00:05:05,290 --> 00:05:08,100 message outputting the value of my message. 81 00:05:08,320 --> 00:05:14,560 So we see that within this type of format, we're using it within the block scope and we are able to 82 00:05:14,560 --> 00:05:15,640 declare that variable. 83 00:05:15,640 --> 00:05:20,290 And then this variable is only equal to my message within this scope. 84 00:05:20,560 --> 00:05:24,550 And that's why we get the output of new one and welcome in that order. 85 00:05:24,580 --> 00:05:31,810 So contrary to let const, if we do the try to do the same thing as we did with let where we've got 86 00:05:31,810 --> 00:05:36,100 the message, we're going to see that we're going to throw an error because const isn't going to allow 87 00:05:36,100 --> 00:05:38,400 us to update that variable value. 88 00:05:38,410 --> 00:05:44,050 And one thing to keep in mind is that you always need to declare variables before you try to use them 89 00:05:44,050 --> 00:05:46,450 as an example of trying to use const. 90 00:05:46,450 --> 00:05:50,080 And we see that it throws an error because it's not going to allow it to use const. 91 00:05:50,140 --> 00:05:57,370 The challenge for this lesson is to declare a variable called message using let and then check to see 92 00:05:57,370 --> 00:06:00,790 if it exists and if it doesn't exist. 93 00:06:00,790 --> 00:06:03,580 If it exists, then we update its value. 94 00:06:03,730 --> 00:06:06,750 And then lastly, we output that value into the console. 95 00:06:06,760 --> 00:06:09,850 So go ahead and pause the video and try this out and I'll show you the solution. 96 00:06:10,210 --> 00:06:17,350 Set up a variable called message and we can just leave a value of welcome inside and then console log 97 00:06:17,350 --> 00:06:19,390 out the value of message. 98 00:06:19,540 --> 00:06:25,150 You can see that we're outputting that value and then we're going to check to see if message exists. 99 00:06:25,150 --> 00:06:31,210 And if it does, then we're going to reassign a new value for updated message and then we can console 100 00:06:31,210 --> 00:06:34,400 log out message once again so we can see that value. 101 00:06:34,450 --> 00:06:35,500 So let's try that. 102 00:06:35,740 --> 00:06:39,430 And you can see we've got our initial message and then we've got the updated message. 103 00:06:39,760 --> 00:06:45,430 And if we comment this out, we're going to see that we're trying to access message, but it doesn't 104 00:06:45,430 --> 00:06:45,730 exist. 105 00:06:45,730 --> 00:06:46,900 So we're going to throw that error. 106 00:06:47,020 --> 00:06:52,900 So if you do see this reference error message is not defined, that means that we haven't declared message 107 00:06:53,260 --> 00:06:55,570 and that's going to go through all of these. 108 00:06:55,690 --> 00:06:59,410 If we try to define it, then we're not going to get a definition for it. 109 00:06:59,740 --> 00:07:07,120 And you can also try to check to see if message is false or if message is true. 110 00:07:07,540 --> 00:07:13,420 And you can see that initially message gets output, the boolean value, and then we're updating it 111 00:07:13,420 --> 00:07:15,760 with the string value and also outputting it. 112 00:07:15,970 --> 00:07:21,340 And one other thing to note as well, that the booleans and the numbers with chrome, they show up blue 113 00:07:21,550 --> 00:07:24,100 and the string values, they show up black. 114 00:07:24,490 --> 00:07:28,420 And you can also try that with const so you can update it with CONSED. 115 00:07:28,660 --> 00:07:35,020 And you see that when you try to update the value of message that you're going to throw an error because 116 00:07:35,050 --> 00:07:40,780 this variable is a constant variable and it's not able to be reassigned. 117 00:07:40,900 --> 00:07:48,070 And even more bonus points if you tried just to declare the variable and try to see what gets produced 118 00:07:48,070 --> 00:07:48,310 here. 119 00:07:48,460 --> 00:07:52,870 And you can see that we get undefined because there's no value for message. 120 00:07:52,990 --> 00:07:58,930 And even if we were to set message as equal to null, which was one of the data types, and we are going 121 00:07:58,930 --> 00:08:04,060 to be covering that in more detail, you see that this message still doesn't translate to being true 122 00:08:04,180 --> 00:08:09,780 because undefined a null as well as false, none of them are going to be translating into true. 123 00:08:09,790 --> 00:08:14,820 So this actually has to have true or contain a value to be conditioned as true. 124 00:08:14,830 --> 00:08:17,230 And then that's where you able to update those values. 125 00:08:17,420 --> 00:08:21,480 Another thing, too, that you could have tried as well for even more bonus points. 126 00:08:21,480 --> 00:08:25,270 So I know there's a lot of bonus points being handed out in this lesson. 127 00:08:25,480 --> 00:08:28,620 So you can see that we've got our condition here. 128 00:08:28,630 --> 00:08:30,280 So remember, this is a block of code. 129 00:08:30,400 --> 00:08:36,760 So we're able to redefine, let here let message and this will give us a value of message. 130 00:08:36,910 --> 00:08:40,240 So we just need to update this to be finally to be true. 131 00:08:40,420 --> 00:08:46,690 And then that's going to actually run this block a code and you're going to see that this message is 132 00:08:46,690 --> 00:08:52,630 referencing a different variable than this message, because over here we're able to update the value. 133 00:08:52,780 --> 00:08:58,420 And then over here, when we're referencing it outside of the block code, we're still seeing that original 134 00:08:58,420 --> 00:08:59,470 value that we had set. 135 00:08:59,650 --> 00:09:02,200 So lots of bonus points in that example. 136 00:09:02,320 --> 00:09:05,040 And there's more data types coming up in the next lesson. 137 00:09:05,170 --> 00:09:09,340 So do try this out and get comfortable with that and more explanation coming up.