DEV Community

Discussion on: Function.bind.bind does not work in JavaScript

View post

Replies for: This is a HORRIBLE interview question, not once in 20 years have I ever had to address anything like this.

Collapse
 
joelnet profile image
JavaScript Joel •

To play devil's advocate, I will disagree with this statement.

While you will never run across code that looks like this:

printThis.bind(5).bind(7);
Enter fullscreen mode Exit fullscreen mode

It is very possible (#1) you might run across a function that has been previously bound. And when you try to rebind this function, you might not be aware of why you bind statement is not working.

It is also very possible (#2) that you need to return someone a bound function from a library you create. Not knowing that you are preventing someone down the road from rebinding that function.

Being able to bind a context in JavaScript is a very powerful tool.

const list = { 0: 'first', 1: 'second', 2: 'third', length: 3 };
[].map.call(list, o => o.toUpperCase()); //=> [ 'FIRST', 'SECOND', 'THIRD' ]
//       \
//         I can bind []'s `this` to `list`
Enter fullscreen mode Exit fullscreen mode

First let's imagine you have an object that uses this. Because I am unimaginative, I'll create this contrived example:

// Contrived example just to demo `this`
const MyArray = {
  0: 'first', 1: 'second', 2: 'third', length: 3,
  map(func) {
    const value = []
    for (let i = 0; i < this.length; i++) {
      value.push(func(this[i]))
    }
    return value
  }
}
Enter fullscreen mode Exit fullscreen mode

and it works great!

// 👍 This works great!
MyArray.map(o => o.toUpperCase()) //=> [ 'FIRST', 'SECOND', 'THIRD' ]
Enter fullscreen mode Exit fullscreen mode

But we have a different use case (for reasons) that doesn't work.

// 😢 This does not work!
const map = MyArray.map
map(o => o.toUpperCase()) //=> []
Enter fullscreen mode Exit fullscreen mode

This code doesn't work because calling map will use global as your this.

So you add this creative line to keep map always bound to MyArray:

const MyArray = {
  0: 'first', 1: 'second', 2: 'third', length: 3,
  map(func) {
    const value = []
    for (let i = 0; i < this.length; i++) {
      value.push(func(this[i]))
    }
    return value
  }
}
MyArray.map = MyArray.map.bind(MyArray)
Enter fullscreen mode Exit fullscreen mode

Making this code work as expected...

// 👍 This works great!
const map = MyArray.map
map(o => o.toUpperCase()) //=> [ 'FIRST', 'SECOND', 'THIRD' ]
Enter fullscreen mode Exit fullscreen mode

But what you didn't know is you unknowingly created a bug somewhere else in your application:

// 😢 This stopped working!
const map = MyArray.map

map.call([ 'left', 'middle', 'last' ], o => o.toUpperCase())
//=> [ 'FIRST', 'SECOND', 'THIRD' ]
//   ------------------------------
//                                  \
//                                    ?!?! 😵 WHAT 😵 ?!?!
Enter fullscreen mode Exit fullscreen mode

So to summarize:

Knowing why this happens is important. Once a function is bound, all future bindings will be ignored. So you must always bind with care.

Or you can do what I do and that is write JavaScript 100% free of this ;)

Rethinking JavaScript: The complete elimination and eradication of JavaScript's this.

Collapse
 
akashkava profile image
Akash Kava •

Of course, no one would write code in f.bind(x).bind(y) point was that behavior was unpredictable. I was trying to optimize event handlers and I accidentally used bind on bound function and found out that I shouldn't have used bind.

this is powerful, I know lot of people talking about not using this, but it is just unnecessary complicated syntax for no real benefit.

Thread Thread
 
joelnet profile image
JavaScript Joel • • Edited

point was that behavior was unpredictable

I am in complete agreement!

I wasn't in disagreement with your article, but the commenter.

Cheers!

Thread Thread
 
dexygen profile image
George Jempty •

Why even suggest eliminating/eradicating the use of this then? Are there any true Javascript experts recommending this? Douglas Crockford, John Resig, somebody at THAT level? John Resig even uses with as deemed necessary (Javascript templates, anyone?), despite everybody parroting howls of derision. There's no sense throwing a good tool such as this out, like a baby with the bath-water.

Thread Thread
 
joelnet profile image
JavaScript Joel • • Edited

Are there any true Javascript experts recommending this?

Why does someone of influence have to recommend it for you to become a follower?

There's no sense throwing a good tool such as this out, like a baby with the bath-water.

There is no baby/bathwater. this is a cancer that needs to be excised.

this in other languages like C# has no problems. But this in JavaScript much more complex in comparison for people to reason about. People come from other languages expecting Class to behave in a similar way to their language... and it doesn't.

this is fairly complex to understand completely, which is demonstrated (in a small part) by this article and many many other articles.

In JavaScript, this is nothing more than an optional argument. So if you need this argument, why not just supply it as an argument?

You don't have to ever worry about what this is if you never use it ;)

Never type console.log(this) ever again.

Thread Thread
 
dexygen profile image
George Jempty • • Edited

I've heard of eating your own dogfood before, but not drinking your own Kool-Aid. Seriously I've had a look at "nothis". It's verbose, it's implicitly magical, all it does is replace this with ctx, etc. These are not formulas for success in my opinion.

Thread Thread
 
joelnet profile image
JavaScript Joel •

It promotes the context from the side loaded this to a full fledged variable.

This behaves in a way similar to ReasonReact.

It is used as a last resort for when you must use this.

The first and best option is to write your software without this.

 
akashkava profile image
Akash Kava •

If this in JavaScript would be same as in other language, why would someone use JavaScript? Power of JavaScript is due to this, otherwise, all nothis and such things are also possible in other languages as well with some tweaks. There is no fun in not using this.

this is cancer only for you, not for everyone !! And it will not become cancer for everyone by shouting it out loud.

Thread Thread
 
joelnet profile image
JavaScript Joel •

Power of JavaScript is due to this

Disagree. The power it JavaScript is it runs almost everywhere. It's power is also in it's flexibility on how you like to code. this causes more problems than it solves.

this is cancer only for you

False. Read stack overflow. Google. You'll find many thousands of posts with people having problems with this.

Thread Thread
 
dexygen profile image
George Jempty •

Just because thousands of programmers have a hard time reasoning about threads in Java, should they be eliminated?

Thread Thread
 
joelnet profile image
JavaScript Joel •

If there are roads to take and one causes less flat tires, which road would you choose to take?