This is the tie that .binds
In one of my more recent blogs posts I discussed the power of objects in Javascript. A javascript objects power is made possible due to the fact that the language is prototypical in structure. This prototypical structure is technically why javascript is not an object oriented language. Javascript still is very powerful and one of my most recent discoveries involves the .bind method. I did not come into contact with this method while at flatiron primarily because they would have opened up the can of worms that is prototype-based-programming and inheritance right after our brains had settled from the OOP Ruby storm that wreaked havoc the weeks before. Instead our javascript instruction was focused on passing props and maintaining state. Both huge topics in themselves and different enough from OOP that I think it was easier to retain.
So when does .bind method come into play? The .bind method is used when a developer wants to bind an object to a function with the “this” keyword. “This” is a very important concept and powerful keyword in javascript. Its power comes from its shape shifting capacity. This at its highest level will reference the window object (your browser).
This can also be defined within a function. So here when I am creating edgyBoy my new Square :) I am able to reference Square attributes via the “this” keyword.
.bind allowing a programmer to redefine “this” adds extra functionality to an object without having to actually add a method to the object itself. Now lets say we are writing some silly chatbot app where you can ask questions. When you have a constructor function you can pass it different objects and the .bind method will allow you to change the “this” keyword to the object being passed.
The constructor function WhatsForDinner does not take any arguments and when console.log(this) we are returning the .window object. However if we use WhatsForDinner.bind() we can pass in an object that will also redefine the “this” keyword.
As you can imagine this setup up can keep a developers code DRY and absent of repeats. Providing methods or attributes in your constructor function and passing object literals will prevent repeated code. You can also even accomplish this functionality with arguably less code by using .call instead of .bind. The .call method actually calls a function with a given this value while the .bind method creates a new function that when called assigns the this keyword to the object passed in. So again .call does not require creating a new function that then needs to be called. 2 less steps! So let’s take a look at this in our what for dinner example.
This approach is a bit on the nose and may not be as efficient when you have to create an object literal every time you use .call. So the smarter work around is to use two constructor methods!
The above code may seem a bit confusing but is a much more effective way to create Meals and use the .call() method for returning a response for WhatsForDinner. The console.log(this) is showing the meal object which is where we are using the .call() method. The response of the meal object is showing up as undefined because both name and ingredients are going to be attributes of a meal and simply passed in.
So that is where I will leave “this” :). Both .bind and .call are very powerful tools and really expand the flexibility of this which in turn opens up a lot of programming doors. Hope you all found this helpful!
