After a brief explanation of the setup, Doug gives the audience a quiz. Then he begins the Fun with Functions exercises.
(Intro music) - I'm going to give you a series of problems. A problem might look like this. Write an identity function that takes an argument and returns that argument. And I'll show an example of how you would call it and what the result of that call would be. I will then give you some time to work on it; Probably about ten minutes or so. Some of you are going to work faster than others, so, for those of you who finish quickly, you're going to get frustrated because you're going to have to wait for the time before we go on.
And for some of you going to be working slower and you're going to get frustrated cause you might not have enough time to finish every problem. So, my goal today is to frustrate everybody equally. Okay? That's where we're going to be going with this. So, you'll take some time, you'll work on the problem, you'll come up with the solution, I will then show you my solution, and, in some cases, I may show you multiple solutions, and you can compare yours with mine. If you like mine better than yours, you'll want to record it because each of these- later problems will refer to earlier problems, either in pattern or will actually be calling the earlier functions.
So, make sure that you get at least one version of everything that works. Also, I highly recommend that you use exactly the same function names that I do, because, later, we're going to write functions which call these functions, and if you're giving them different names, it'll be really easy to get confused. Okay? Then, you'll probably want to test it. If you have a Java script engine on your machine, and you know how to use it, for example, if you have Node installed and you know how to use the REPL, that's great.
You can just plug it in there and it'll work. If you don't have at least one web browser, and all the web browsers now come with very nice debuggers, so you can do that as well. This is one way to use a web browser. It could simply have a form like this, or a page, containing a script tag. For my convenience, I created a log function, so I could log results; it'll just write them to the screen. Then, in the box, I've got the function that I wrote, and then I called the function Sending The Result To The Log.
If you want to do something more sophisticated, you're certainly welcome to do that. This is sort of the minimum that you need to get started. You don't have to test your functions, but you'll probably want to, right? Because, otherwise, you can't have confidence that they're working correctly. While everybody is still getting setup, we're going to do a quiz. Pop quiz. So, here we go. Ready? Question number 1: We have a function called Funky. It takes an argument O, sets O to null. We create a global variable, X, which is an empty array.
We pass X to Funky. What is now the value of X? So, who thinks X is null? And who thinks X is the empty array? And who thinks it's undefined? And who thinks it'll throw an exception? Okay. The answer is B, the empty array. So, let's look at what's happening here. So, we start off, we have the global variable X that points at the array.
We pass the contents of X, which is that reference to Funky, which has a bound to O. We replace O with null, and there you are. So, Funky, as written, is a completely useless function. And this thing about the way variables work is not peculiar to Java script; almost all modern languages work this way. Most languages do not allow you to pass a reference to a variable. What they allow you to do is to pass a reference to the contents of the variable. Okay? ALGOL 60, which was a brilliant language, had something in it called Call By Name, where you actually could pass a reference to a variable.
That was one of the very few, very bad ideas in ALGOL 60. Ready for another one? Okay. Here's the function Swap, takes two arguments: A and B, and it swaps them using a temp variable. We have two global variables: X and Y, whose values are one and two. We pass X and Y to swap, what is now the value of X? So, who thinks X is one? Who thinks X is two? Okay, I'm not going to fool you this time. The answer is one.
And it's similar to what we did before. So, here, we've got our two global variables, X and Y, that point to one and two. We pass X and Y to Swap. Then, we fiddle them around with Swap, but that did not change what X and Y are doing. I'm hoping that, some day, in the future, Java script gets macros. So, instead of saying Function Swap, I'd say Macro Swap. And, in that case, macros do get called or do get passed with variable names. And macro swap would be a useful thing.
But, as written, function swap is pretty useless. Okay, any questions about the quiz? Okay. Quiz is done. It's time to do some real work. Are you ready? So, the first one is going to be totally trivial. No tricks. It's just something to allow you to test your environment. So, write three binary functions. A binary function is a function that takes two arguments. Add, sub, and mul, that take two numbers and return their sum, difference, and product.
This is as trivial as it sounds, there are no tricks. We're doing this so that you can practice, and, also, so that we'll have functions that we write later we'll be able to call. So, here we have add(first) and mul. I assume that everybody got this right. Yes? Who got this? Yeah. If you didn't, write it down, cause you're going to need these for later. Okay, ready for the first interesting problem of the day? Here we go.
Write a function identity F that takes an argument and returns a function that returns that argument. So, we're going to call Identity F, we're going to pass it to three, that would return a function. When we call that function, it will return three. So, here's Identity F. Identity F takes an argument and returns a function that returns that function. So, who got Identity F? Very good. If you didn't get it, write it down, cause you're going to definitely need it later, and don't be discouraged.
I'm not expecting everybody to get every problem. What I'm expecting is that everybody gets the last problem. Okay? So, if you don't see what's going on immediately, just stay with it. Eventually, the patterns should start to become clearer, and you'll get a sense of where we're going. Okay? Any questions so far? Okay. Are we ready for the next one? Okay. Write a Function Addf that adds from two invocations.
So, if we pass a three to Addf, it will return a function. If we pass a four to that function, it will return seven. So, here is Addf. Addf takes a first argument, returns a function that takes a second argument, and it returns result of calling the first and second argument. So, who got Addf? Okay. Very good. If you didn't get it, write it down. You're going to want to need it for the next one. So, this problem was suggested to me by Dmitry Baranovskiy, who is a brilliant, Ukrainian programmer living in Sydney, Australia.
He's the author of Raphaeël JS: a very nice graphics package for the browser. He suggested that this should be a hiring question. If you got this right, maybe you think so too. So, we're ready for the next one? Okay. Here we go. Write a function LiftF that takes a binary function, and makes it callable with two invocations. So, if we pass the Add function, that we wrote the first thing this morning, to LiftF, it returns the function that works exactly like the Add F function that we just wrote.
To make it even more interesting, we can pass other binary functions, like the multiply function, and get a similar kind of capability. Let's look at LiftF. LiftF takes a binary function, returns the function that takes the first argument that returns a function that takes the second argument that returns the result of passing to the first and second argument's to the binary function. So, who got LiftF? Very good. If you didn't get it, write it down. You're going to want to need it for a later one.
This is an example of a higher-order function. Higher-order functions are functions that receive other functions as parameters, and return other functions as results. So, we're starting to get moving down the rabbit hole into a very interesting way of constructing it.
This course was created by Frontend Masters. It was originally released on 6/20/2016. We're pleased to host this training in our library.
- Writing code for performance
- Script tags
- Nodes and events
- ES5 and ES6
- Principles of security
- Object capabilities
- Synchronous functions
- Asynchronous functions