Interviewing for Front-End Engineers

JavaScript Scope: bind Solution

Jem Young

Jem Young

Interviewing for Front-End Engineers

Check out a free preview of the full Interviewing for Front-End Engineers course

The "JavaScript Scope: bind Solution" Lesson is part of the full, Interviewing for Front-End Engineers course featured in this preview video. Here's what you'd learn in this lesson:

Jem live codes the solution to the bind exercise while highlighting the understanding needed to solve this type of problem.


Transcript from the "JavaScript Scope: bind Solution" Lesson

>> Implementing bind, this one is tricky. It's a little tricky, you have to know about scope, and context, call, and apply. And if you failed on this one or you couldn't get anything down, don't feel bad. We're gonna learn the solution now. The best part of learning is sometimes its failure.

You have to fail because you'll remember. You'll remember this now because you're like, I spent so long on this and then it clicks in place, you're like this makes sense. This is how JavaScript works. Now I know a little bit more. And being honest, I wanna work with people who failed.

I don't wanna work with people who only succeed in life. That means they didn't learn as much. Not saying if you're super successful, you didn't learn a lot. But people that have failed, they know what it's like to fall down and get back up. And that's what it's like.

Because remember, half the interviews you're gonna fail. Like almost probably, you're gonna fail over half the interviews you take. That's okay. I failed many, I failed on this question before. But now I know how to solve it, and that's just part of learning. All right, so let's do the standard way we always approach a problem, which is, I need to implement function.prototype.bind.

Since it's a prototype, I'm gonna start off there. So function.prototype.bind. And we know because it's a function that we're gonna eventually invoke, it's gonna be a function. So I'm gonna say function. And I'm gonna make an anonymous function for now. And this function is gonna take an argument which will be the new context that we're trying to pass in.

So I'm gonna call you context for now. And we know eventually the way we invoke bind is we're setting the new context and we're gonna invoke it later. And if you ever see a pattern like this or someone says, you're returning a function that's gonna eventually be invoked later, you know it's gonna return a new function.

So let's say, return another anonymous function. And I'm not gonna take any arguments on this one. Okay, but ultimately, what do we wanna accomplish with bind? We're trying to return a function that has a different context. And how do we do that? We do it with our old friends either call or apply.

So I wanna say the function, I could say some function and then I wanna call or apply it. But because this one is a little trickier and I could have asked a slightly different question. But I could have said, how do you implement just bind? Which would take a function and a context.

I could have asked that. But I'm saying, this is the prototype now. So in this case, so I'm gonna say this, Is the function itself. So we don't need to pass in the function because it's implied in this because we're on the prototype of that function. Okay, so we have the function.

Actually, I'm gonna make it easier to grock. I'm gonna call you the function is this. And I need to invoke this function so I can say call. And I'm going to pass in the context. That's it. People are nodding, you're nodding along at home, it makes sense now.

The solution's pretty short. So if I wanted to say, if I don't want to just implement bind, because we all learn differently and this is a different way of doing it. Exit bind, it's gonna take a function and the context. I can just take that out, and it's the same solution.

All right, any questions on this, yes?
>> I almost got it except I used apply what does apply mean.
>> Yes, apply works just as well.
>> All right, okay.
>> It will just change the way, and I didn't get more advanced. This to me is a perfect solution or not a perfect solution, it works for white board.

I'm not trying to trick you. If I wanted to make it more difficult or someone's being a wise person, they're trying to be like, I got this. I'd be like, okay, so how do you deal with arguments? So you'd have to know that you can pass or with call, it would be the arguments actually for this one, for call, I'd use apply.

And then I take the arguments and I spread them out. Args, arguments, and I'd spread them out if I want to pass arguments. But, again, I didn't wanna get that deep. I just wanna know conceptually, do people understand scope and how to change it if you really had to, much bigger than just calling call or reply.

All right, questions?
>> A more, I guess, technical question, but in the implementation of the prototype you created a constant. And then you referenced that constant in the new anonymous function that you're returning. Is that because if you actually just used this, it would be bound to the anonymous function that you're returning?

>> Mm-hm, that's exactly right. It would be bound to the complex that you apply it in.
>> Yeah, okay.
>> But in this case we wanna make sure that when this function is invoked, we wanna make sure this is accessible, so we state it within the scope. Good question, though.

This is why this one's a bit more advanced, more for on the senior side, is you have to understand scoping and things like that. All right, all right, now if you ever see this question again, you'll know the general structure. And I think if you get the general structure, and you realize that you'll have to call or apply at some point, that's helpful.

But again, if you didn't get it it's okay. We all start somewhere. I have failed all these question before.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now