1 00:00:00,310 --> 00:00:04,050 For most of JavaScript's life there's been only one way to create or 2 00:00:04,050 --> 00:00:06,760 declare a variable, the var keyword. 3 00:00:06,760 --> 00:00:09,840 Although many JavaScript programmers still use the var keyword, 4 00:00:09,840 --> 00:00:13,820 some of the behaviors of using var can be problematic or unexpected. 5 00:00:13,820 --> 00:00:16,970 For instance, a variable might accidentally get changed or 6 00:00:16,970 --> 00:00:19,530 overwritten with a different value further down in your program, 7 00:00:19,530 --> 00:00:22,020 which can be really difficult to catch. 8 00:00:22,020 --> 00:00:25,060 The JavaScript programming language gets updated regularly. 9 00:00:25,060 --> 00:00:27,930 And nowadays you'll see variables written using the keywords let or 10 00:00:27,930 --> 00:00:31,890 const, which let you put a value into them like you do with the var keyword. 11 00:00:31,890 --> 00:00:34,210 But they have different rules about how you use them and 12 00:00:34,210 --> 00:00:35,620 change their values in your program. 13 00:00:36,680 --> 00:00:39,410 So now I'll teach you how const and let work and 14 00:00:39,410 --> 00:00:43,149 demonstrate why you might want to use them instead of var when declaring variables. 15 00:00:44,580 --> 00:00:47,300 >> Let and const work similarly to var. 16 00:00:47,300 --> 00:00:51,320 In each case you use the keyword var, const, or let followed by a name for 17 00:00:51,320 --> 00:00:56,060 the variable, an equal sign, and a value you want to put into the variable. 18 00:00:56,060 --> 00:01:00,240 We started with the var keyword since it's a little easier to remember that var means 19 00:01:00,240 --> 00:01:01,632 that something is a variable. 20 00:01:01,632 --> 00:01:06,170 And you'll still see var keyword used to declare variables, but modern JavaScript 21 00:01:06,170 --> 00:01:10,270 development has shifted over to let and const because of their benefits. 22 00:01:10,270 --> 00:01:13,510 In many cases, they can make your code less error prone. 23 00:01:13,510 --> 00:01:17,430 So what's the difference between var, let, and const? 24 00:01:17,430 --> 00:01:20,124 And when should you use one method over another? 25 00:01:20,124 --> 00:01:23,708 Well we're not far enough into JavaScript to truly understand and 26 00:01:23,708 --> 00:01:26,550 benefit from the usefulness of let and const. 27 00:01:26,550 --> 00:01:29,380 But I'll teach you the basics of each starting with the const keyword. 28 00:01:30,830 --> 00:01:35,409 In the JS folder, open the file named let-const.js. 29 00:01:35,409 --> 00:01:41,018 We'll now work in this file, so let's make sure to update the script tag and 30 00:01:41,018 --> 00:01:45,197 index.html so that it points to the let-const.js. 31 00:01:45,197 --> 00:01:48,432 You don't need to write your variables in separate file like this, 32 00:01:48,432 --> 00:01:53,060 it's just a new file we're using to learn about the let and const keywords. 33 00:01:53,060 --> 00:01:57,360 So const is often considered the best choice for declaring variables. 34 00:01:57,360 --> 00:02:01,610 Const is short for constant, meaning that the value of the variable should not 35 00:02:01,610 --> 00:02:04,010 change, it should remain constant. 36 00:02:04,010 --> 00:02:08,630 Const lets you protect the variable from being overwritten by any accidental or 37 00:02:08,630 --> 00:02:10,600 stray assignments in your code. 38 00:02:10,600 --> 00:02:13,170 In other words, once you create a constant and 39 00:02:13,170 --> 00:02:16,380 assign it a value, you can't assign it another value. 40 00:02:16,380 --> 00:02:17,590 Let me show you what I mean. 41 00:02:17,590 --> 00:02:21,310 Let's again declare a variable, or in this case a constant, 42 00:02:21,310 --> 00:02:25,380 called score, and assign it a value of 5. 43 00:02:25,380 --> 00:02:30,800 Then use console.log to display the value of score in the console. 44 00:02:30,800 --> 00:02:36,440 When I refresh the browser, I see 5 logged to the console, as expected. 45 00:02:36,440 --> 00:02:39,960 Earlier, you learned how to use the addition assignment operator 46 00:02:39,960 --> 00:02:44,630 to manipulate or add to the content stored in a variable, like a score for example. 47 00:02:44,630 --> 00:02:50,990 So let's try to add 5 to the score constant with score += 5. 48 00:02:54,004 --> 00:02:56,350 This time we get different results. 49 00:02:56,350 --> 00:02:59,620 There is an Uncaught TypeError in the console 50 00:02:59,620 --> 00:03:03,320 that says assignment to constant variable. 51 00:03:03,320 --> 00:03:08,210 If there's one detail you should remember about using const is that 52 00:03:08,210 --> 00:03:13,480 you cannot change or manipulate the value of a constant through reassignment. 53 00:03:13,480 --> 00:03:17,169 You're also not able to re-declare a constant. 54 00:03:17,169 --> 00:03:22,742 For example, re-declaring score and setting it to 5 produces 55 00:03:22,742 --> 00:03:29,050 the Uncaught SyntaxError identifier score has already been declared. 56 00:03:30,240 --> 00:03:32,975 The same happens if I re-declare using the var keyword. 57 00:03:40,913 --> 00:03:45,123 You'll use const variables frequently to store values that shouldn't change while 58 00:03:45,123 --> 00:03:49,590 the program runs, like product prices, a password, or username, for example. 59 00:03:49,590 --> 00:03:51,860 You can assign any value to a constant. 60 00:03:51,860 --> 00:03:53,310 In a later course you'll, for instance, 61 00:03:53,310 --> 00:03:56,350 use constants to select elements of a web page. 62 00:03:56,350 --> 00:03:58,840 Imagine an application with hundreds or 63 00:03:58,840 --> 00:04:03,460 even thousands of lines of code that uses many variables that should not change. 64 00:04:03,460 --> 00:04:05,850 If you're declaring those variables with var, 65 00:04:05,850 --> 00:04:08,420 it could cause bugs that can be hard to find. 66 00:04:08,420 --> 00:04:10,530 For example, a score, product price, 67 00:04:10,530 --> 00:04:14,490 or user name might unexpectedly get overwritten entirely. 68 00:04:14,490 --> 00:04:18,140 So the const keyword is one safeguard to prevent that from happening. 69 00:04:18,140 --> 00:04:22,940 For this reason, const should be your first choice when declaring variables. 70 00:04:22,940 --> 00:04:27,470 However, for a variable whose value should change while the program runs, 71 00:04:27,470 --> 00:04:29,330 constants are not the best choice. 72 00:04:29,330 --> 00:04:33,820 For example, you wouldn't const to store the score of a game 73 00:04:33,820 --> 00:04:38,040 since you know that the score needs to change as the player plays the game. 74 00:04:38,040 --> 00:04:42,660 In that case, use the let key word when you want to reassign a variable. 75 00:04:42,660 --> 00:04:45,660 In that respect, let works just like var. 76 00:04:45,660 --> 00:04:50,838 So let's declare let score 77 00:04:50,838 --> 00:04:55,796 = 5 and score += 10. 78 00:04:57,849 --> 00:05:02,117 The console outputs the expected value, 15. 79 00:05:02,117 --> 00:05:06,746 The let keyword is almost the same as var, it lets you define a variable but 80 00:05:06,746 --> 00:05:08,550 limits how you can use it. 81 00:05:08,550 --> 00:05:12,768 For example, let's say that later in your program you 82 00:05:12,768 --> 00:05:16,906 re-declare a let variable, like let score = 20. 83 00:05:19,425 --> 00:05:22,064 This produces an Uncaught SyntaxError that 84 00:05:22,064 --> 00:05:25,132 says identifier score has already been declared, 85 00:05:25,132 --> 00:05:29,970 whereas var would let you overwrite the value in the initial assignment. 86 00:05:29,970 --> 00:05:34,697 For example, if I change each let to var, 87 00:05:37,475 --> 00:05:41,040 Notice how the value of score is now 20. 88 00:05:41,040 --> 00:05:44,620 This behavior could produce bugs in your program 89 00:05:44,620 --> 00:05:48,970 because you might accidentally use the same variable twice. 90 00:05:48,970 --> 00:05:52,390 So let offers more protection and helps prevent you from doing that. 91 00:05:53,570 --> 00:05:56,775 There are other details and differences between let and 92 00:05:56,775 --> 00:06:00,140 const which you're not required to know about yet but 93 00:06:00,140 --> 00:06:03,278 you'll learn more about them in later courses and workshops. 94 00:06:03,278 --> 00:06:06,590 Let and const will come in handy when you start working with functions, for 95 00:06:06,590 --> 00:06:10,145 example, and when you learn something called scope, the area or 96 00:06:10,145 --> 00:06:13,910 context in which variables are accessible inside of your program. 97 00:06:13,910 --> 00:06:17,448 Since let and const are considered safer choices for declaring variables, 98 00:06:17,448 --> 00:06:19,943 I'm going to use them moving forward in place of var.