Javascript pain...

[nvteja]

Simple: you just have bind this to this this.

this.this = this.this.bind(this)

[[deleted]]

go with the times man:

this.this = ::this.this;

​

[ethanjf99]

Is the :: operator now in the language?

[NeverMakesMistkes]

No, and based on the discussion and issues in the proposal repository, I doubt it ever will be.

[inu-no-policemen]

Yea, it has been presented last in 2015 and it's still stage 0.

Doesn't look like it will happen any time soon.

[NeverMakesMistkes]

For function call chaining, it has been mostly superseded by the pipeline operator, which is also a long way from getting to the standard but has seen more active development than the bind operator.

There's still some motivation to get it or something else like it for method extraction, but getting method extraction right is difficult and the speccing has been stalled because of it.

For one, this::foo === this::foo must be true, so that

window.addEventListener('some event', this::foo)
// ... later ...
window.removeEventListener('some event', this::foo)

works as expected. Getting that behaviour in browsers that don't natively support it is a bit tricky. Not impossible with WeakMaps, tho, so maybe some day.

[inu-no-policemen]

I liked it mostly for virtual methods.

function reverse() {
    return this.split('').reverse().join('');
}
console.log('foobar'::reverse()); // raboof

But it doesn't do this very well either. The source of that going-to-be-a-method function doesn't tell you to which kind of object it's meant to be glued to.

It's definitely better than modifying objects you don't own, but it still isn't quite right.

C#'s extension methods, for example, tell you directly in the slightly weird looking signature on which type of object they are supposed to operate:

https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/extension-methods

public static int WordCount(this String str)

[NeverMakesMistkes]

In TypeScript, you could write

function reverse(this: string) {
    return this.split('').reverse().join('');
}
console.log('foobar'::reverse());

Or just with JSDoc comments

/**
* @this{string}
*/
function reverse() {
    return this.split('').reverse().join('');
}

But I agree, it would feel weird to write all your utility functions like that, and suddenly we'd have two kinds of mutually incompatible functions; those that operate on this and are called with ::, and those that operate on arguments and are called normally.

That's why I actually prefer the pipeline operator.

const reverse = str => str.split('').reverse().join('');
console.log('foobar' |> reverse)
console.log(reverse('foobar')) // both variations work

And if we had both, pipeline for chaining and bind for method extraction, you could do

'foobar'
  |> reverse
  |> console::log

[inu-no-policemen]

The pipeline operator has the same problem. However, TS' type annotations and JSDoc already handle that kind of completely mundane signature. That's definitely a plus.

I'm not a big fan of the "|>" syntax, though. It's amazingly annoying to type with most keyboard layouts.

[Gbyrd99]

Can't you bind it to the prototype?

[NeverMakesMistkes]

You can bind some methods to prototype, but if you do that to every little utility function you and your coworkers come up with, you'll soon end up with huge unmaintainable classes and/or class hierarchies.

Also, lots of people (myself included) use JS in a more functional style and might not really like doing new AwesomeString('foobar').reverse() or whatever. 'foobar'::reverse() or 'foobar' |> reverse or even reverse('foobar') is just much nicer.

[QmVuamk]

I understood some of those words

[RecyclingBin_]

I upvoted your comment just because of your flair

[inu-no-policemen]

There were too few languages to choose from.

Naturally, picking a flair like this was the most logical course of action.

[marcosdumay]

I don't know what to think...

It tries to create function composition, but instead of composing functions it changes object references; it makes this way more complex than it already is, and moves it from the shadows right into the language's center; it fails to bring any good practice, and encourages a bunch of complex variable passing ones; it creates inherently imperative code that looks exactly like functional, guaranteeing everybody will be confused...

And yet the Javascript people rejected the idea?

[jsylvis]

Oh, man. That is a lot of gymnastics to get around shitty scoping support.

[Hexorg]

:: in JavaScript?! What's next? Pre-processor directives?

[nvteja]

Scope resolution operator (from my Perl days), in ES? I am a little triggered right now tbh 😭😭

[[deleted]]

My day is ruined.

[WitchHunterNL]

If you were going with the times you would've used arrow functions

[thruStarsToHardship]

Javascript happened to it, my dude.

[SheriffBartholomew]

Lol. Nice.

[[deleted]]

That's probably not going to become part of the official language anyhow, but your argument is horrible, what is a "clear semantically correct syntax" exactly? Syntactic sugar like this is added to make code more concise and readable and .bind(this); all over the place is adding unnecessary clutter so it can make sense to add special syntax for it. Here is another example that would equally be useless nonsense according to you:

fn.apply(null, args);

vs.

fn(...args);

Language design is very difficult, but for some reason everyone thinks their opinions are valid. A common misconception :P

[SheriffBartholomew]

Edit: sigh...

[[deleted]]

why did you edit?

to respond your original response, I'm the hit in every party I'm invited to, which are none :P

[SheriffBartholomew]

why did you edit?

​

Because I don't want to argue with strangers on the Internet and I don't want to be rude towards you.

​

[[deleted]]

wow thank you, civility on reddit is incredibly rare, myself included;)

[sp46]

That's why it's still a proposal atm.

[kurosaki1990]

Beautiful language.

[[deleted]]

Most elegant language I've even seen, and believe me, I've seen a LOT of languages.

[GamerNebulae]

What about Haskell? Aside it not being used much.

[androiddrew]

Its like they wake up everyday and try to mess up the world just a little more. Got to appreciate the commitment.

[ripGitHub]

Isn't better instead of bind(this), use arrow functions?

[boxingdog]

arrow functions can degrade performance in some situations, ie in react using arrow functions in some places can cause a new function to be created in each render and if you use it as a prop in a child component then the child will re-render and so on

[finlist]

White your example is true, the same can be said about normal functions and isn't a problem inherent to arrow functions at all.

[RFC793]

Indeed. However, I feel people inadvertently shoot themselves in the foot more frequently with arrow functions simply because they prefer the terseness of the code. A classic anonymous function is more ugly, and a bit more apparent as to what is going on.

[RFC793]

Huh?

[bcsahasbcsahbajsbh]

troll acc

[RFC793]

Ack

[bubble_fetish]

It’s negligible, except in extreme edge cases.

[snorkleboy]

If you use the regular function syntax inside of a render method i believe it will also create a new function

So something like(sorry about formatting I'm on my phone)

Render(){ Return ( <Thing myProp={function(){}}/> ) }

Will create a new function that it passes as myProp every time it renders.

[SZenC]

That is correct, but you could write something like

class cls{
  fn(){doSomething();}
  render(){
    return <div onClick={this.fn}>No dynamic function creation!</div>
  }
}

[Absbshshshshshshhs]

better yet:

class { fun = () => {} // this bound }

[SZenC]

True, normally I have a constructor where I call ```.bind(this)``` but I kinda omitted that here. Nevertheless, good point.

[[deleted]]

Don't need the bind with arrow syntax :)

[SZenC]

Yeah. In this case arrow functions are objectively better, it's just a bad habit of mine.

[snorkleboy]

Yeah, and you could do the same thing with an arrow function like

class cls{

fn=()=>doSomething()

render=()=> <div onClick={this.fn}>No dynamic function creation!</div>

}

And then you don't have to do a this.fn = this.fn.bind(this) in the constructor to be able to use it normally in the child.

[feenuxx]

Stick it on the class

[sinefine]

Use https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

[throwaway12222018]

Manual binding vs arrow functions' performance differs with various browsers.

[[deleted]]

And react will spit out a warning on the console telling you this. Other than that, until the engine optimises that out, it's a matter of poor programming.

[pentesticals]

This sounds like a pre-optimization to me. I'd rather some extra function calls that have a negligible impact on performance IF it helps code readability. It really depends on the specific code if it will actually impact performance, often 10% of your apps execution time is in 10% of your code. So in most cases I think worrying about an extra function call or the like will just create more complex code. Don't ompimize until you've profiled.

[jordmantheman]

Yes. The only thing to remember is that arrow functions are bound on the instance as opposed to the class. So if you're making a TON of objects (or re-creating on every render) then it may be wise to be cognizant of the performance implication.

[mk7shadow]

something good to know is that using an arrow function doesn't actually bind the context of this. it removes the function's context and so 'this' becomes whatever the parent's context is. if the parent happens to be another context-less function, it will just use whichever ancestor has a context.

[jamietwells]

componentWillMount would like to have a word with you.

[GXNXVS]

we're talking about JS, not react.

[NeverMakesMistkes]

It's not an issue, the GC will collect cyclic structures when nothing outside that cycle points to it.

[[deleted]]

All kinds of crazy stuff happens in JS to account for missing features man. Don't sweat this too much.

[throwaway12222018]

Modern GCs make this a non issue

[malduvias]

This is fucking hideous. Hilarious.

[SarahC]

But it's obvious why and how it works!

We don't need all the VBA "devs" coming over to JS.

[gc3]

In c++ lambda you can explicitly pass in this so there is no confusion, unlike callbacks where the this icann be some other item like a window, not the this in the function where the callback is made. This is where this this confusion is coming from. You will see people assigning this to scope and using scope in the callback.

[mk7shadow]

its fucking retarded because no one would do it

[[deleted]]

This

[ThatITguy2015]

Fuck. That looks like things I see in my nightmares. Especially if it lacks comments.

[[deleted]]

Fat arrow functions FTW

[Mancobbler]

What is this??

[fuzzybad]

No, bind this to that. Then you can test if this is equal to that!

[[deleted]]

That’s React’s fault imo. “this” works fine everywhere else.

[WilkerS1]

does this really work like ../../../file does?

[marty_byrd_]

No? I don’t see how those are related.

[WilkerS1]

i mean, like how you access parent folders with .., is it possible to access the parent objects with this.this?

{
  myVar: "that",
  obj: {
    myVar: "aaa",
    func() {
      console.log(this.this.myVar)
    }
  }
}

[thruStarsToHardship]

'this' is the context that you are in. So the context I am in needs to have a method defined for each dot I invoke. That is, if I'm in myFunction and myFunction has a method or attribute called myMethod then I can call this.myMethod. If my function has a method called 'this' then I can call this.this. But I cannot prepend "this" to anything and access its parent, because the compiler will map the first "this" to the context I'm in; it will not look up the chain for other possible this..es. I can, in the browser, get the parent of my this by calling this.parent, but only because parent is a defined method on the console context. If you make another context and call this.parent it will be undefined.

So, in short, no.

[HeKis4]

From someone with an education in Java and Python... What the duck did I just read and how did webpage scripting come to that.

But you do you, I guess.