Functions as Parameters

To understand how JavaScript can respond to user events 0:00 we first need to understand a little bit more about functions. 0:03 It's often said that functions are first class citizens in JavaScript. 0:06 This means that functions can be treated like any other data type such as a number, 0:10 a string or an object. 0:14 For example you can pass a function as an argument into another function. 0:16 The same way you might pass in a number or string. 0:20 This might sound a bit strange but once you've tried it a few times you'll 0:22 get the hang of it and you also unlock one of JavaScript most powerful features. 0:26 Passing a function around in this way is how we'll get control over when and 0:32 how it runs. 0:35 So right now, let's get comfortable with a simple example. 0:37 Then in future videos we'll see how this applies to the real world. 0:40 Open up the workspace or project files for this video and 0:43 let's have a look at some code to get a better understanding of this idea. 0:46 The first thing I want to do is create a temporary JavaScript file to work in. 0:50 So let's open up index.html and 0:54 connect our page to the temporary file will create in a moment. 0:56 So at the bottom of the file, I'll add a new script tag that links to 0:59 a JavaScript file named temp.js. 1:04 Now let's create a new file and save it as temp.js. 1:09 And let's play with functions a little bit in this file to get an idea of 1:15 how they work. 1:18 Now, you're probably familiar with this style of writing a function called 1:19 a function declaration. 1:23 And we can call this save function by using parentheses like so and 1:33 passing the string Hello as an argument. 1:38 Saving the file and switching over to the browser we see hello in the console. 1:43 Nothing really new here. 1:48 So let's go back and erase this last line and 1:50 write another function called exec short for execute. 1:53 Notice the new exec function accepts two parameters: func and arg. 2:07 So it's expecting func to be a function and 2:12 arg to be an acceptable argument to pass to func. 2:15 Now, inside exec calls func passing in arg. In 2:19 other words we can pass a function into exec and exec will run it for us. 2:23 Now, passing a function into a function may seem a bit strange at first but 2:29 this idea turns out to be a very powerful one in JavaScript and 2:33 you'll see this happen all over the place. 2:36 Now, let's call our new exec function passing in say as the first argument. 2:39 Now, we'll want say to be passed the string "hi there" when it's called, so 2:45 will pass that in as the second argument to exec. 2:51 Now, I just wanna point out again that these two parameters 2:55 are very different data types. 2:59 One is a function and the other is a string but they're both 3:01 first class citizens and that they can be passed as arguments in the same way. 3:06 So saving our file refreshing the page and 3:10 checking the console, we see that it works. 3:14 So let's take this one step further. 3:18 We can actually pass a function directly into another function. 3:20 So I'll go ahead and select and cut the say function and 3:25 paste it right here as a direct argument to exec. 3:30 So here we've actually done a little more than just passing a function 3:36 as an argument. 3:39 We've now transformed it from a statement into an expression. 3:40 Now, that distinction isn't super important right now but 3:44 check the teacher's notes if you'd like to learn more about that. 3:46 Now ,you can leave the name say here. 3:49 But often times you'll see function expressions written without any names, 3:52 like this. 3:57 This is what's called an anonymous function. 4:01 So now I'll change the greeting here to say something like, Greetings everyone. 4:04 I'll save my file and let's go back to the browser and 4:11 verify that we still get the same results. 4:14 So once I refresh it looks good. 4:16 Now why would we ever want to pass a function into another function? 4:20 That's a great question. 4:24 And we'll look at that in the next video. 4:25