1 00:00:00,880 --> 00:00:04,880 So far, you've written functions that look like this, the function keyword, 2 00:00:04,880 --> 00:00:07,330 followed by the name of the function. 3 00:00:07,330 --> 00:00:10,260 This is what's called a function declaration. 4 00:00:10,260 --> 00:00:11,400 There's another syntax for 5 00:00:11,400 --> 00:00:14,730 creating a function, that's called a function expression. 6 00:00:14,730 --> 00:00:19,160 Open the file, expressions.js, and in index.html, 7 00:00:19,160 --> 00:00:26,900 update the source attribute in the script tag to js/expressions.js. 8 00:00:26,900 --> 00:00:30,350 A function expression lets you assign a function to a variable. 9 00:00:30,350 --> 00:00:31,091 For example, 10 00:00:31,091 --> 00:00:34,619 you could rewrite the getRandomNumber function to look like this. 11 00:00:41,301 --> 00:00:45,140 Notice that there's no name after the function keyword. 12 00:00:45,140 --> 00:00:47,680 A function without a name after the function keyword is called 13 00:00:47,680 --> 00:00:49,410 an anonymous function. 14 00:00:49,410 --> 00:00:51,910 Instead, the name comes from the variable. 15 00:00:51,910 --> 00:00:54,850 In other words, I'm storing a function as a value 16 00:00:54,850 --> 00:00:57,270 in a variable named getRandomNumber. 17 00:00:57,270 --> 00:00:58,060 Also in this case, 18 00:00:58,060 --> 00:01:01,670 you're creating a statement by assigning a value to a variable. 19 00:01:01,670 --> 00:01:05,810 Because of this, you add a semicolon after the closing curly brace. 20 00:01:05,810 --> 00:01:09,050 You call this type of function the same as you would have function with a name or 21 00:01:09,050 --> 00:01:10,900 a function declaration. 22 00:01:10,900 --> 00:01:13,370 Use the name of the variable, followed by parenthesis. 23 00:01:14,440 --> 00:01:18,395 So now any time you come across a function that's assigned to a variable, 24 00:01:18,395 --> 00:01:20,015 you'll know that it's a function expression. 25 00:01:20,015 --> 00:01:22,710 You're also going to explore function expressions 26 00:01:22,710 --> 00:01:25,350 further in the next stage on arrow functions. 27 00:01:25,350 --> 00:01:29,930 Finally, function declarations and function expressions work in much the same way, 28 00:01:29,930 --> 00:01:32,700 except for one subtle but important difference. 29 00:01:32,700 --> 00:01:36,720 You can call a function declaration before it's defined. 30 00:01:36,720 --> 00:01:40,432 For example, I'll convert this function back to a function declaration. 31 00:01:45,980 --> 00:01:49,135 Then call getRandomNumber above the function and 32 00:01:49,135 --> 00:01:52,825 print its return value to the console with console.log. 33 00:01:58,634 --> 00:02:02,850 Notice how the function still works as expected, we get a random number. 34 00:02:02,850 --> 00:02:07,460 That's because function declarations load before any code is executed. 35 00:02:07,460 --> 00:02:11,680 When the JavaScript file loads, the JavaScript engine behind the scenes moves 36 00:02:11,680 --> 00:02:15,195 all function declarations to the top of their current scope, 37 00:02:15,195 --> 00:02:16,880 in this case the global scope. 38 00:02:16,880 --> 00:02:20,820 Since the JavaScript engine immediately knows about any function declarations, 39 00:02:20,820 --> 00:02:24,240 you're able to call a function before it's declared in the file. 40 00:02:24,240 --> 00:02:26,340 This behavior is called hoisting. 41 00:02:26,340 --> 00:02:29,290 Function expressions, on the other hand, are not hoisted or 42 00:02:29,290 --> 00:02:31,220 lifted up to the top of their scope. 43 00:02:31,220 --> 00:02:35,310 A function expression loads only when the JavaScript engine reaches the line of 44 00:02:35,310 --> 00:02:36,340 code it's on. 45 00:02:36,340 --> 00:02:37,120 For instance, 46 00:02:37,120 --> 00:02:41,445 I'll, again, convert the getRandomNumber function into a function expression. 47 00:02:47,614 --> 00:02:50,120 Now the console outputs an error. 48 00:02:50,120 --> 00:02:52,320 It says, uncaught ReferenceError, 49 00:02:52,320 --> 00:02:55,910 cannot access GetRandomNumber before initialization. 50 00:02:55,910 --> 00:03:00,037 So remember, if you call a function expression before it's defined, 51 00:03:00,037 --> 00:03:01,217 you'll get an error 52 00:03:09,358 --> 00:03:12,940 The approach you use to writing functions is a matter of personal preference. 53 00:03:12,940 --> 00:03:16,300 Choose one style and try to stick with it throughout your script. 54 00:03:16,300 --> 00:03:20,611 If your program at some point might need to call a function before it's declared, 55 00:03:20,611 --> 00:03:22,433 then use function declarations. 56 00:03:22,433 --> 00:03:25,922 Now, some developers also prefer the structure that function expressions 57 00:03:25,922 --> 00:03:27,370 provide to their code. 58 00:03:27,370 --> 00:03:31,460 Since you're not able to call a function expression before it's declared, 59 00:03:31,460 --> 00:03:35,800 it requires that you write your functions up top, in a specific order, otherwise, 60 00:03:35,800 --> 00:03:36,910 they won't work. 61 00:03:36,910 --> 00:03:40,910 And any code that calls and runs functions get placed toward the bottom 62 00:03:40,910 --> 00:03:45,390 of the program or file, which can make your code more readable and predictable. 63 00:03:45,390 --> 00:03:48,616 But, again, the style is mostly up to you and your team. 64 00:03:50,217 --> 00:03:53,210 Understanding the basics of functions is a big deal. 65 00:03:53,210 --> 00:03:57,650 Just about every program you'll write will use one or several functions. 66 00:03:57,650 --> 00:04:01,060 As you become more experienced with JavaScript, you'll start to notice that 67 00:04:01,060 --> 00:04:04,910 parts of your code are repetitive, and do the same thing over and over. 68 00:04:04,910 --> 00:04:08,190 So, if you find yourself writing the same exact code more than once, 69 00:04:08,190 --> 00:04:10,536 it's a symptom that something is likely wrong. 70 00:04:10,536 --> 00:04:14,180 That's where a function can help you avoid duplicating code, and provide a way to 71 00:04:14,180 --> 00:04:19,260 group reusable code together to use, or call later at any point in the program. 72 00:04:20,310 --> 00:04:24,130 In the next stage, you'll build on your knowledge of functions by learning about 73 00:04:24,130 --> 00:04:27,860 arrow functions, which offer a more concise syntax for writing functions. 74 00:04:27,860 --> 00:04:28,360 See you soon.