1 00:00:00,840 --> 00:00:05,820 OK, so now before we start to create our first component, I do want to talk a little bit more about 2 00:00:05,820 --> 00:00:07,950 ESX context. 3 00:00:08,560 --> 00:00:13,320 Like I said before, I told you about import statements. 4 00:00:13,320 --> 00:00:13,620 Right. 5 00:00:14,430 --> 00:00:21,030 So in this section, we're going to look at the main differences between VA let and CONSED. 6 00:00:22,720 --> 00:00:28,660 So basically, let and contest are ESX, JavaScript variables, just like. 7 00:00:29,590 --> 00:00:31,660 But there are differences among them. 8 00:00:32,640 --> 00:00:37,050 So now I'm going to show you a good panel to work where? 9 00:00:38,460 --> 00:00:42,540 So now do you see in my browser, I just go to the code pen dot I o. 10 00:00:43,880 --> 00:00:47,660 Gopin is a nice, nice platform here. 11 00:00:49,390 --> 00:00:52,120 You can try out your code and you can see your output. 12 00:00:53,150 --> 00:00:57,590 So it's fun to play with and you can see what's what. 13 00:00:58,630 --> 00:01:02,250 If you want, you can sign up, but you really don't have to. 14 00:01:04,280 --> 00:01:06,400 So here, it's just a nice interface for us. 15 00:01:08,570 --> 00:01:15,170 For now, we don't need HTML worse, he says, I just need the JavaScript window. 16 00:01:16,600 --> 00:01:20,770 So I can minimize the HTML editor and the CBS editor. 17 00:01:21,220 --> 00:01:24,760 OK, so now we can work on JavaScript editor. 18 00:01:27,490 --> 00:01:32,980 So to see our outputs now, I'm going to open my console from here. 19 00:01:34,250 --> 00:01:37,360 All right, so everything's ready now to write some JavaScript code. 20 00:01:39,610 --> 00:01:43,180 OK, so first of all, let's create an outside block. 21 00:01:44,210 --> 00:01:45,740 Which is going to be a function. 22 00:01:46,650 --> 00:01:50,510 So I'm just going to call that OK, academy for now. 23 00:01:51,690 --> 00:01:58,470 And inside this block, I'm going to create another block, which is going to be a simple if statement. 24 00:01:59,980 --> 00:02:05,590 Now, inside of here, let's declare a new variable in the old way and. 25 00:02:07,000 --> 00:02:10,780 We're going to call it va pie. 26 00:02:11,670 --> 00:02:17,100 And it's going to be a number three, that one for OK. 27 00:02:19,170 --> 00:02:23,190 And call that function as well, OK, academy down here. 28 00:02:24,690 --> 00:02:28,860 And then outside of the if block, let's print this out. 29 00:02:33,920 --> 00:02:37,070 So we can see now that we've got three point one four, right? 30 00:02:38,090 --> 00:02:45,050 So the variable is being declared inside this block, but it's still being read and printed out from 31 00:02:45,050 --> 00:02:47,840 outside of that block here. 32 00:02:48,760 --> 00:02:58,060 OK, so now let's clear our console so we change this to be let instead of VAR. 33 00:02:59,550 --> 00:03:04,530 And if we try to do the same thing, then we get a reference here. 34 00:03:05,680 --> 00:03:13,600 Because the variables pie isn't actually accessible from outside of this block, so by the time that 35 00:03:13,600 --> 00:03:17,940 we're running this line here, the variable doesn't exist anymore. 36 00:03:19,350 --> 00:03:21,390 OK, so let's clear the console again. 37 00:03:22,080 --> 00:03:24,150 So what this means is that. 38 00:03:25,020 --> 00:03:35,880 If we had an other variable up here also called pie and then this one to be to and also let's print 39 00:03:35,910 --> 00:03:36,490 this one out. 40 00:03:37,230 --> 00:03:44,160 So if we run this now, we're getting pie declared up here and then we're declaring a new version of 41 00:03:44,160 --> 00:03:50,010 pie, which is to say, OK, so that's being printed out, as you can see here. 42 00:03:50,010 --> 00:03:53,490 And then outside of this block, we're again printing out. 43 00:03:53,790 --> 00:03:56,730 What we can see is to clear the console. 44 00:03:57,970 --> 00:04:01,090 So what I'm trying to say is what you just saw. 45 00:04:02,070 --> 00:04:10,980 If he was let or contest, then they are block scope's, so they only exist within the closest block 46 00:04:10,980 --> 00:04:12,030 that surrounds them. 47 00:04:13,080 --> 00:04:16,020 And that's the same with CONSED as well. 48 00:04:17,250 --> 00:04:23,430 Now, just to demonstrate this here, let's write CONSED instead of let OK works the same way. 49 00:04:24,800 --> 00:04:32,390 And the main difference between Lett and CONSED is const variables are immutable, and that means that 50 00:04:32,390 --> 00:04:33,530 you can't change them. 51 00:04:34,900 --> 00:04:45,970 So if you're using left, you can change and redefine the value within that let variable, but if it's 52 00:04:45,970 --> 00:04:48,040 CONSED then you can't do that. 53 00:04:48,920 --> 00:04:55,870 OK, so for example, let's go back to this and let's say that down here, we're going to declare the 54 00:04:55,870 --> 00:04:57,310 value of PI to be one. 55 00:04:58,240 --> 00:05:05,260 Then if we run this, then, as you can see, that's fine, that's being redeployed. 56 00:05:08,260 --> 00:05:13,030 But if we change this to be a contest and then try to rerun. 57 00:05:14,950 --> 00:05:20,260 Look at that, you say that we've got an error because you can't change the value of the const. 58 00:05:21,150 --> 00:05:22,530 OK, I think that's. 59 00:05:23,680 --> 00:05:28,120 Pretty clear, hopefully it's helped to clear it up. 60 00:05:30,250 --> 00:05:33,250 If not, go back, play around with it, and I'll see you in the next lecture.