 So, yeah, I posted this about two weeks ago in the Giver, a single JS Giver. It came out because I was working on something. I was like, I don't need a text frame. I'm just going to have an array of functions and execute them. That's going to be my tests. And then I got to it. I was like, oh, that's actually not as easy as I thought it would be. And then I was like, this would make a good quiz. And then I was like, I'll post this on Twitter. I'll experiment on single JS attendees. So I posted it in the Giver. A few people had to go and then I posted it on Twitter. And there's been a few responses, which has been good. It's been nice. Who's actually tried this? Who has a solution to it? OK. That's small. That's good. So for those who don't know what we're about to do, you should probably get your computers out because you are actually going to have a shot of this. So yeah, grab your computers. We're going to do some coding. Just 10 minutes. You can see, just have a shot at solving this problem. I'll make it a bit bigger in a moment. Basically, what you have to do is you've got an array of functions and you need to pass something to functions. So this is the array. So we've got some array functions. It doesn't matter what the functions do. And then we'll go, we're going to pass something to for each something and make all those functions execute. But there's a few conditions that make it more difficult. You're going to try to do it without using the function keyword. So if you go ahead, I know how to use for each and you will like functions stuff for each. You're going to use function keyword or you're going to use array functions to do this. No, that's not allowed. So you're going to execute all the functions without using arrays, without using the function keyword, without using the function instructor and without using method functions. Don't create any named functions, basically. Go for it. You've got ten notes. Care about if you want. Seriously. That's fine. Who's actually trying this? Really often. Who's not trying this? There you go. That's my machine. So you have to explain it to me. There's no way you can explain it. Okay, well that three minutes felt like ten minutes. So we'll go, we'll do it once more time. Okay, alright. So who thinks they have an answer to this? That I didn't try before. Okay? What's your answer? See, I use function-based wide bits. Wide bits? Okay. You tried that in no end, right? Yes. Why not in the browser? Okay. Because this is different in the browser. So that's a solution, but it's actually, it's kind of like a dodgy solution. Who else thinks they do a solution? I'm wondering if you use probably no bind. Yeah, you can. That's a good start. How would you do it? Well, I would have to get it from somewhere. I would get it from harry.mat.bind. Okay. And then I would try to find it by the time. Sorry, I would bind it to this. I would bind it to this. Yeah, so there's a huge... The reason why this problem is interesting is because, I mean, at least for me, the things that I tried out in front didn't work just straight away. And I had to actually think about it. And it requires really understanding how function invocation and this works in JavaScript. And that's why this is interesting. I think it's... If you can understand this, you've got pretty much all of the habits in JavaScript under control. This is it. So let's go through me trying to explain how this works. So... So we've got array prototype for each. So we've got some object or something. It's an array. We're calling for each one. For each, it takes function. We're not aware. It takes a function as an argument. And for each item in the array, it'll execute that function. How do we execute functions? So in this previous example, we're not actually... We don't call this function in. We're not calling that for each call. For each call at some point... Well, for each call internally. But we're not actually executing that function. We're passing it as an argument. And this is something which we can do because JavaScript has first-class functions. A common mistake that beginners make is they think that this is somehow part of the syntax for doing a for-each. This is not true. We're just creating a non-function call for the non-function. So creating a non-function and passing it is for each. So this is just a normal function call. Imagine there's another paren there. And parameter is function. This is that obvious... Obviously, I agree with what the JavaScript provided. It's a major stumbling point for people who are not particularly familiar with functions as a first-class object as a concept, which is not something which you see in a lot of popular languages. So in order to call functions, there's defining functions. So this is what we did before. We just did it in line inside the function for each. We can reference functions, and then we can invoke a function. We have to reference it, and then use this paren's syntax, which you familiar with. But it's important to understand that there's a difference between... This is something which is different. To some language like, for example, Ruby, that referencing a function is different to invoking a function. So we can reference and pass this around just like the number 2 is a value. To invoke, we do this, and this is actually equivalent, or reasonably equivalent, to taking the function, the reference, and calling all on it, and passing the arguments. So every function is an object in JavaScript, and functions in JavaScript inherit from the function prototype. And the function prototype contains a whole bunch of really nice methods such as apply, find, call. There's some new ones coming in in ES, whatever, something. Who knows. It is generated at a 2 source. It also has 2 strings. So every time you have an instance of a function, you can call these methods on that function. There's a little mistake there because the call takes an argument and it takes an argument from your recipe. So the first argument to call is actually... Well, it's not really a mistake, it's just a calling-hand variable. The first argument to call sets the value of this, but I'll get to that. I didn't run any of this code, so there's probably more of those, and extra points can be final mistakes in my code. Ensures that you're actually reading it, which is nice. So where did the call come from? Every object is... Every function is an instance of function, and they... I already said that. So my first instinct to solve this was to pass in the call method because we've got a array of functions and while I want to extend the call on all those functions, and that seems like it would be a sensible thing to do. It doesn't work. It complains, it gives you different errors depending on which environment, but, for example, in nodes, it actually gives you a... sinsy down the wrong path, actually. It tells you it's functions for each is not a function. That's not right. That's quickly incorrect because that is definitely a function. This is just some messed up bug in either VA or node. I'm not sure where this comes from, but it's pointing at the wrong thing. So that's one problem. If we go into the browser, and run that, we get something a little bit more sensible. It says undividend is not a function. But what the hell? What's going on? What's a function? This is a function. What's it talking about? Undividend is not a function. So two completely not helpful errors. Weird stuff going on. So let's try to understand this a little bit better. So that answers that question. So the problem is something to do with this. This R. So let's do a quick review of this. This is something which is a problem for a lot of people coming to JavaScript. So we'll do a quick review. Whatever you've got, an object, you can attach functions to objects in JavaScript. Any object can have things on it. And they can be numbers, they can be streams, or they can be functions. If they have to be a function, it means that you can invoke it just like any function. But it does a little bit of magic that when you invoke the functions, whatever's on the left-hand side of the dot becomes the value of this inside the function. So when you call this function, it looks at the value of this, which is whatever's on the left-hand side of the dot. So that becomes this personal object. And then it can access the name parameter, name property on that personal object. So that's the hardest part of understanding this, I think. Did anybody not follow that? Is that some embarrassing thing when you're looking at health when I say that? I was shooting you. So a neat thing about this, to show that before we had it, this is again something which is different about JavaScript than it is in other languages where the value of this is defined at a runtime. When that function is executed, it actually has nothing to do with how it's defined. So we've defined it inside this personal object, and I've also used some fancy new syntax here, but I'll just speak that in. It's just a speech property and a speech property happens to be a function in short hand. So, yeah, a neat thing about it is that that I was saying, doesn't matter, let's move on. So it's looked up at runtime. So this is something which is very confusing for me when they're trying to do things, they define it when they're looking at their person, and they're like all of this, but for example this comes up a lot when you're dealing with something like an on-click handler or a set timeout or something like that. Often this is just something who knows. It's not like you're respectful to these and the reason why is because of this behavior. So, yeah, it gets looked up at runtime. So just to demonstrate that I've created another person here given it a property called speech, which is the same as the one from before. We call it and when it looks up what the value on the left-hand side of the dot is this thing and so when it looks the thing, this then resolves to this new object and then says my name is Jane. So you can think of it like value of this dot some function. So put it on the left-hand side. So another quiz, quiz and quiz. So a.b what's the value of this inside b? Okay, what's the value of this inside c? Yes, correct. And what's the value of this inside a? That's a quick question. Oh no, it depends. So notice that here it actually doesn't care at all about a in this instance. It only looks at what's on the left-hand side of the dot where you call the function. This could be anything. Well as far as c is concerned this is just a reference to some function. So that's something that's truthfully well. So here's a good question. So based on what we just learned what's the value of this inside b? I'm getting no information about that. You can't actually tell because we're not executing all of this. The function is for each execute call. So we've got no idea what the hell's going on. And so we're not in control of this. And it's probably not where it's like undefined or windowed depending on the environment that you're running at it. So call and this. So based on what we just did in ADC then what's the value of this inside call? Yeah, speak. So what does this tell us about call? Oh, the answer there. So call executes whatever function is at its this value when it's in vote. So back here what we call call when call executes it looks like whatever its value of this is which just happens to be speak and then that's the code that it will run. So we can use fancy things in order to tell call given a different value of this and it will execute a different function. So here same trick question we don't know. I just scrolled and I'm controlling this. So this is automatically set to what is on the left hand side of the dot. I'm repeating this because it's just something which is very hard to get through in people. But we do have control over how we set this using some other building methods such as where they were on the bottom of that slide which should come up if that's okay such as call. And this is what I'll mention before that call the first value to call sets the this out in the function not in call it doesn't matter about call because the thing on the left is this function. But we can set the this out of this function by passing it as the first value to call. Does that make sense? So when function executes let's just say this is a speak thing we can set function to be the first person we can set this out to the second person call allows us to do this but we can only do it call invokes the function immediately. So it's not actually what we can really do with call because about to the original problem we're talking about for each and for each needs us to pass the function instance. So a neat thing that we can do another one of the function prototype methods is function prototype.find which is very similar to call in the way that the arguments work but instead of invoking the function immediately it returns a new function a really different function that just happens to have the the this out of set. So this was the example from before so again same problem if you rip off the function from person to speak and then go get it would just be underlined or window or whatever you want to control because there's nothing on the left-hand side of the dot there was but there's not when you call it over here we can use bind to permanently fix the value of this out which allows us to strip it off the original object and then go get one time. So another interesting part about bind is that once a function is bound this out can't be changed at all. You can never change it again in this case we tried to set it to the other person but it was originally bound on the previous slide to the first person and so when it invokes it completely ignores that first open core and so you can't set it again so now we actually have everything that we need to solve the original problem core executes whatever is set to the this value we want to pass the function to for each and that function needs to take the function as an argument and then execute it and bind allows us to fix the value of this to something so based on that I'm not going to give you the solution I'm giving you everything that you need to know to solve it I think so please go away and have a shot at that to stop the problem and in the meantime I'll give you some other solutions so there's an ASX solution which is actually an example of everything that I just described and you can pass in the effect that will apply to functions for each reflector of light and this will actually work but afflicts an ES6 API so it's not available in all environments it's actually I didn't know about this, I didn't think about this when I first posted this thing and then somebody came and showed it off excellent, great so that's cool, food goes in now it works in a browser what's that? it works in a browser it works in a browser but how about back you know I use this little yes this we just can't get this room but it's just any problem okay so honestly Safari now that might work in Safari now i11 is also a problem an old version of that anyway so that's one solution which I thought was the main there's another solution here which uses this isn't even valid JavaScript actually that's a stage 0 proposal for Android which this is a thing called function find operator so that's another solution that you can use if you want to use JavaScript features which don't actually exist yet it might exist but stage 0 so it might not this is a weird solution I actually have to sit down and think about how this works this is really strange it won't work unless you have to pass a truthy value here but the way it actually works is that it uses it gets it has this for each execute the function for you but it's just execute to one it's weird somebody came up with that is that person in this room okay it's weird there's a bunch of people that cheated this one it actually creates a new function and they supply the body of the function here's a string and this one here I said you can't use the function keyword so they use methods the methods syntax to create an object with a key value which happens to be a function and then they extract the key value that's the other solution so that's there's a lot of interesting things with this just a simple problem I thought that was interesting and since I've posted it I've got a bunch of interesting reactions from people I'm not going to be smart this is my start that's what I was telling him he said it's the best worst this guy is an ex he's a Facebook guy super confused like a thousand things wrong even people who are supposed to know what they're doing have gotten tripped up by this, I got tripped up Jake the Grand Boarder he works at New Relic and he caught me in a monster he wrote like JavaScript one of those but he wrote both he used to work with GitHub and he thinks it's his new favorite interview question so that's good just this one good problem and got lots of interesting responses so that's my goal thanks