1 00:00:00,670 --> 00:00:04,340 You guys in this video we're going to talk about variables and declaration. 2 00:00:04,340 --> 00:00:10,870 Now there's three possible keywords to define a variable so we have Vire which has been around since 3 00:00:10,870 --> 00:00:12,520 the beginning of javascript. 4 00:00:12,550 --> 00:00:21,640 We also have let And we have Konst which were introduced in E.S. 2015 also called E6 which was an update 5 00:00:21,640 --> 00:00:25,450 to the javascript language that included many new features. 6 00:00:25,450 --> 00:00:31,840 Now since this is a modern javascript course Letten Konst are now fully supported in the browser we're 7 00:00:31,840 --> 00:00:35,220 going to stay away from Vire after this video. 8 00:00:35,380 --> 00:00:39,610 OK let and cons have a big advantage when it comes to block level scope. 9 00:00:39,610 --> 00:00:43,900 But I'm not going to go over that in this video we're going to wait till the end of the section because 10 00:00:43,900 --> 00:00:49,050 there's no sense in talking about scoping functions and blocks when I haven't even talked about functions 11 00:00:49,050 --> 00:00:50,170 in blocks yet. 12 00:00:50,350 --> 00:00:55,360 So I'm going to give you some examples of all three and kind of explain the differences between them 13 00:00:55,630 --> 00:01:01,420 and then like I said later on in another video we'll talk about block level scope and how that works. 14 00:01:01,420 --> 00:01:06,570 All right so let's quickly go over how to actually create a variable which is very simple for this example 15 00:01:06,600 --> 00:01:10,030 I'm going to use var But like I said we'll use Konst and let. 16 00:01:10,030 --> 00:01:11,460 After this. 17 00:01:11,470 --> 00:01:17,740 All right so let's go ahead and declare a variable with vars so will say var name Dijk rules are going 18 00:01:17,740 --> 00:01:20,180 to set it to a string called Jondo. 19 00:01:20,440 --> 00:01:24,430 And I'm going to go over data types in Javascript in the next video. 20 00:01:24,430 --> 00:01:24,750 All right. 21 00:01:24,760 --> 00:01:27,790 And strings can be double quotes or single quotes. 22 00:01:27,790 --> 00:01:32,980 So that's all there is to actually declaring a variable so we can do what we want with this we can go 23 00:01:32,980 --> 00:01:35,040 ahead and console log it. 24 00:01:35,050 --> 00:01:41,830 So it's a console log name and save it runs and you can see we get John Doe down here in the console. 25 00:01:41,830 --> 00:01:45,460 Now we can take this variable and we can reassign it. 26 00:01:45,520 --> 00:01:50,650 OK we can do that with Vire and with let Konst is a different story and I'll talk about that in a few 27 00:01:50,650 --> 00:01:51,220 minutes. 28 00:01:51,340 --> 00:01:59,230 But if we wanted to we could say name equals and let's say Steve Smith and then if we were to console 29 00:01:59,500 --> 00:02:04,510 log name here you'll see we get Jondo for this log. 30 00:02:04,510 --> 00:02:11,040 And then we change it and then we get Steve Smith So you can reassign variables if you use Vire or let. 31 00:02:11,100 --> 00:02:11,700 OK. 32 00:02:13,140 --> 00:02:20,820 Now you can also assign there are create variables and not assign them to a value so I could say let's 33 00:02:20,820 --> 00:02:22,790 say a net a variable. 34 00:02:22,890 --> 00:02:24,720 So this is called initialising. 35 00:02:24,720 --> 00:02:30,410 So we'll save Vire greeting and not set it equal to anything. 36 00:02:30,440 --> 00:02:30,840 All right. 37 00:02:30,840 --> 00:02:33,740 Now this is actually setting it to undefined. 38 00:02:33,780 --> 00:02:44,340 So if I were to console Daut log greeting and save we're gonna get undefined OK but we can take this 39 00:02:44,340 --> 00:02:53,590 variable and we can assign it to something now by just saying greeting and we'll just set it to Hello. 40 00:02:53,790 --> 00:02:56,480 All right so if I go ahead and console dot logged here 41 00:03:01,010 --> 00:03:02,330 we get hello. 42 00:03:02,900 --> 00:03:08,520 Now a lot of times you'll do this you'll initialize it without a value if you need to. 43 00:03:08,540 --> 00:03:13,120 If you have a conditional So let's say we have an if statement which we'll talk about in a little bit. 44 00:03:13,220 --> 00:03:20,110 And we want to say if something is true greeting equals this if something or else greeting equals this. 45 00:03:20,120 --> 00:03:24,520 So that's one of the reasons we initialize variables. 46 00:03:24,640 --> 00:03:24,880 All right. 47 00:03:24,880 --> 00:03:30,670 Now before we get into letting conter just want to talk about rules and conventions of variables in 48 00:03:30,670 --> 00:03:37,480 javascript now there's only a couple of different things that a variable can include that can include 49 00:03:37,480 --> 00:03:44,790 letters numbers and underscore and a money sign. 50 00:03:44,890 --> 00:03:49,020 OK so these are the only characters that can be inside of a variable. 51 00:03:49,030 --> 00:03:54,120 They also cannot start with a number. 52 00:03:54,550 --> 00:04:03,790 OK so if we were to try and create a variable called one name you see that it's always already throwing 53 00:04:03,790 --> 00:04:05,900 an error inside the editor here. 54 00:04:05,950 --> 00:04:12,040 And if I were to save that we'll get an error in the console saying invalid unexpected tokens will get 55 00:04:12,040 --> 00:04:14,970 a syntax error OK is not allowed. 56 00:04:15,010 --> 00:04:22,860 You can use a money sign at the beginning or anywhere but that's not really recommended. 57 00:04:22,860 --> 00:04:28,720 The only time that I would suggest using this is if you are using a query and you were selecting things 58 00:04:28,720 --> 00:04:33,810 from the DOM with Jay query which globally uses an under. 59 00:04:33,910 --> 00:04:34,490 I'm sorry. 60 00:04:34,510 --> 00:04:36,040 A money sign itself. 61 00:04:36,040 --> 00:04:41,710 So if you're sending a variable to a J.A.G. object then you might want to use that. 62 00:04:41,740 --> 00:04:43,540 You could also do an underscore. 63 00:04:43,550 --> 00:04:46,540 That's that's OK that's not going to throw an error. 64 00:04:46,600 --> 00:04:48,280 But again I wouldn't suggest it. 65 00:04:48,430 --> 00:04:53,710 When you start getting into more advanced javascript patterns and you can have private variables that's 66 00:04:53,710 --> 00:04:55,650 where you might see this. 67 00:04:55,720 --> 00:05:02,140 This is kind of a global for private variables and that goes for like frameworks and stuff like that 68 00:05:02,140 --> 00:05:02,780 as well. 69 00:05:02,950 --> 00:05:05,750 But usually you just want to start it with a letter. 70 00:05:05,800 --> 00:05:06,800 All right. 71 00:05:06,940 --> 00:05:12,810 Now let's talk about conventions for more than one word. 72 00:05:13,120 --> 00:05:19,840 So multi-word variables let's say we want a variable called first name. 73 00:05:19,840 --> 00:05:29,320 So what I would suggest is using this method and this is called camel case and this isn't just this 74 00:05:29,330 --> 00:05:33,800 doesn't just pertain to javascript This is programming in general. 75 00:05:33,850 --> 00:05:36,360 This I think is the most readable. 76 00:05:36,370 --> 00:05:40,260 You might also see something like this. 77 00:05:40,330 --> 00:05:44,360 You see this Morand language is language is like p p. 78 00:05:44,440 --> 00:05:45,770 Set this to Sarah. 79 00:05:45,910 --> 00:05:50,970 So this is just under the underscore method or underscore convention. 80 00:05:51,040 --> 00:05:54,700 He might also see this. 81 00:05:55,770 --> 00:05:58,990 OK so this is Pascal case. 82 00:06:01,640 --> 00:06:06,720 Which is the same as camel case except it starts with an upper case as well. 83 00:06:06,770 --> 00:06:13,170 And then sometimes you may see double multi-word is all lowercase which I wouldn't I wouldn't recommend. 84 00:06:13,550 --> 00:06:18,190 This is what I would suggest this is the convention we're going to use throughout the course. 85 00:06:18,200 --> 00:06:18,530 All right. 86 00:06:18,530 --> 00:06:22,100 Now this here starting with an upper case. 87 00:06:22,100 --> 00:06:28,280 This is recommended in some situations for instance when we get into object oriented programming when 88 00:06:28,280 --> 00:06:34,310 you create a constructor function that Shabd should start with an upper case when you create a class 89 00:06:34,460 --> 00:06:37,750 with six classes that should be uppercase. 90 00:06:37,790 --> 00:06:44,990 OK so there are certain times when this convention is recommended but just for regular variables then 91 00:06:44,990 --> 00:06:46,010 I would suggest this. 92 00:06:46,010 --> 00:06:47,720 And that's what we're going to use. 93 00:06:47,720 --> 00:06:53,010 All right so now that we've talked about the basics of variables Let's now talk about letting Konst. 94 00:06:53,240 --> 00:06:57,230 So let works very similar to var. 95 00:06:57,230 --> 00:07:03,860 In fact it seems identical on the goal and it is identical on the global scope but you have advantages 96 00:07:03,860 --> 00:07:07,510 when it comes to block level scoping which again we'll talk about later. 97 00:07:07,820 --> 00:07:15,020 But if I were to take let's say this block of code right here that we wrote and do the same thing with 98 00:07:15,030 --> 00:07:19,350 LET so going pace set in and when to comment everything up here out. 99 00:07:19,370 --> 00:07:25,400 Now vs code we can just do we can highlight everything and do control forwards slash and that will comment 100 00:07:25,400 --> 00:07:26,580 out everything. 101 00:07:26,870 --> 00:07:31,550 So what we do is just change this to let and save. 102 00:07:31,550 --> 00:07:34,580 And you see it works the same exact way we can initially. 103 00:07:34,610 --> 00:07:37,690 We can create a variable and then we can change it. 104 00:07:37,700 --> 00:07:39,320 We can reassign it. 105 00:07:39,440 --> 00:07:48,020 We can also initialize it as undefined so we can go let name just like that and that will still work 106 00:07:48,020 --> 00:07:49,120 as well. 107 00:07:49,130 --> 00:07:54,950 Now Konst works differently so I'm going to just go ahead and comment that. 108 00:07:56,510 --> 00:08:04,100 So conc actually stands for constant and what that means is that it can't change OK or can't be reassigned. 109 00:08:04,100 --> 00:08:14,200 So if I say conc name equals John console log name that's fine. 110 00:08:14,260 --> 00:08:16,410 Ok we get John everything's OK. 111 00:08:16,720 --> 00:08:18,280 But what we can't do 112 00:08:22,270 --> 00:08:23,410 is re-assigning. 113 00:08:23,470 --> 00:08:23,850 OK. 114 00:08:23,860 --> 00:08:32,080 So if I say name equals Sarah and say we cannot do that you see we get an error it says assignment 2 115 00:08:32,110 --> 00:08:33,600 constant variable. 116 00:08:33,910 --> 00:08:35,510 So that does not work. 117 00:08:35,560 --> 00:08:36,660 We're going to comment that out. 118 00:08:36,670 --> 00:08:45,280 Another thing we can't do are we have to do is when we have to assign a value so we have to sign a value 119 00:08:45,280 --> 00:08:51,090 we can't do Konst greeting and not assign it to anything. 120 00:08:51,090 --> 00:08:56,080 If I say that we're going to get in there that says missing initialiser and Khan's declaration and has 121 00:08:56,080 --> 00:08:59,480 to be declared as some kind of value. 122 00:09:00,070 --> 00:09:07,760 Now where some people get confused that are just starting out is where when we use concert with arrays 123 00:09:07,800 --> 00:09:14,320 and objects and other types of data that aren't primitive like strings and numbers things that can change 124 00:09:14,350 --> 00:09:16,000 but not be reassigned. 125 00:09:16,000 --> 00:09:21,670 So for instance if I were to say Conte's person and I know we haven't talked about objects yet but this 126 00:09:21,670 --> 00:09:26,080 is actually really important so I'm still going to mention it. 127 00:09:26,080 --> 00:09:34,600 So if we were to set name to John here and we go down and console da log object OK that's called an 128 00:09:34,600 --> 00:09:36,170 object literal. 129 00:09:36,340 --> 00:09:37,590 You'll see we get. 130 00:09:37,660 --> 00:09:38,680 Let me just comment this. 131 00:09:38,690 --> 00:09:42,580 Partow we get our object with name John. 132 00:09:42,640 --> 00:09:43,600 OK. 133 00:09:43,870 --> 00:09:50,500 And objects can have more than one key value pair so we could say like age 30 and we can put whatever 134 00:09:50,500 --> 00:09:58,210 we want here now where people get confused is that we can take that person variable that person object 135 00:09:58,270 --> 00:10:00,200 and we can mutate it. 136 00:10:00,340 --> 00:10:07,090 We can change the name for example and save and you can see that now name is Sarah. 137 00:10:07,270 --> 00:10:12,570 So we can change the stuff that's in here we just can't reassign person. 138 00:10:12,700 --> 00:10:13,120 OK. 139 00:10:13,120 --> 00:10:18,460 Hopefully that makes sense even though we changed the data inside the object. 140 00:10:18,460 --> 00:10:21,220 It's still set to that object. 141 00:10:21,220 --> 00:10:21,520 All right. 142 00:10:21,520 --> 00:10:28,720 And that could change the age if I wanted to by saying person age equals and we'll say 32 and save and 143 00:10:28,720 --> 00:10:31,330 you can see now age 32. 144 00:10:31,720 --> 00:10:32,090 All right. 145 00:10:32,110 --> 00:10:41,320 So same thing same thing with arrays if I were to create an array called numbers and just put some numbers 146 00:10:41,320 --> 00:10:50,890 in here and then go down here and log it you'll see it a log and the array. 147 00:10:50,890 --> 00:10:57,930 Now I can add onto this by saying numbers Daut push which is a method we can use to add on to an array. 148 00:10:57,930 --> 00:11:03,340 So I'm going to add on 6 and save and now you can see that array has 6 in it. 149 00:11:03,340 --> 00:11:09,200 All right so we can change arrays and objects that are assigned to variables using conc. 150 00:11:09,220 --> 00:11:19,930 We just can't redeclare and say numbers equals and then set it to a brand new array with 6 in it like 151 00:11:19,930 --> 00:11:20,250 that. 152 00:11:20,260 --> 00:11:24,270 If I do that we're going to get an error because this is a whole new array. 153 00:11:24,310 --> 00:11:26,050 OK and it's a whole new entity. 154 00:11:26,050 --> 00:11:28,770 We're not just mutating it like we are here. 155 00:11:29,080 --> 00:11:29,320 All right. 156 00:11:29,320 --> 00:11:35,050 So that's where some people get confused with contes they think that whatever you assign it to it has 157 00:11:35,050 --> 00:11:36,960 to say this but it doesn't. 158 00:11:36,980 --> 00:11:40,920 If it's an array an object or another reference type. 159 00:11:41,020 --> 00:11:47,490 Now this is where you make a decision as developer on how how you want it declare your variables. 160 00:11:47,540 --> 00:11:52,540 Now it's all preference but what I would recommend and what I do when what I am going to do in this 161 00:11:52,540 --> 00:11:59,830 course is I'm going to use Konst unless I plan on the value changing unless I need to initialize it 162 00:12:00,130 --> 00:12:03,440 or unless I'm using it in an iterator or a loop. 163 00:12:03,580 --> 00:12:09,340 Other than that using Conte's lets your program and anyone looking at your code know that this value 164 00:12:09,340 --> 00:12:11,220 should not be reassigned. 165 00:12:11,220 --> 00:12:11,620 All right. 166 00:12:11,620 --> 00:12:17,230 It can mutate if it's an array or an object but it can't be reassigned as a new primitive value. 167 00:12:17,380 --> 00:12:22,760 And I think that that makes your code more robust more secure and it makes it more readable. 168 00:12:22,760 --> 00:12:26,550 OK it lets you know that this value needs to stay this value. 169 00:12:26,710 --> 00:12:31,630 All right so I know that this may have been a little confusing for people that have never worked with 170 00:12:31,630 --> 00:12:37,100 a raise in objects but I did want to just mention that because I think it's important to know. 171 00:12:37,480 --> 00:12:43,060 But in the next video we're going to start to talk about data types in javascript both primitive types 172 00:12:43,120 --> 00:12:44,540 and reference types.