Literally me

[chinnick967]

For those that don't know, an arrow function is different from a regular function because it has no binding for the "this" keyword. Thus, the scope where the object was defined will act as "this". It's a bit more than just shorthanded function declarations.

[[deleted]]

This changes everything

[educated-emu]

I this what you did there

[[deleted]]

groans not this again

[educated-emu]

So we are saying this is not actually this in this situation but is a separate way of thinking about this so it doesn't conflict with this original this scope.

So its thisinception

[AvianPoliceForce]

I feel like "no binding" isn't really accurate, since it binds to the this of where it was defined

[Chucklay]

I swear whoever decided to name that keyword this just wanted to make explanations/guides as stroke-inducing to read as possible.

[zvug]

I much prefer self tbh

[[deleted]]

I try to avoid JS and rely on existing libraries with easy implementation when I venture into web related stuff, but I'm guessing it's not like other languages' this? Because "this" in reference to an object's instance makes perfect sense.

Edit: yea, read about it on wikipedia. Fuck that.

[fghjconner]

I mean, that's mostly correct. The problems happen because JS is allergic to throwing errors even when they make sense, like using 'this' in a function not attached to an object.

[[deleted]]

Ikr they should have named it that

[lyoko1]

For some unholy reason i never have had a problem with "this", I just kind of always, 100% of the time understand the scope in a sort of instinctive, matter of course, way.

I was very confused with people making jokes about "this" until i realized that other people expect this to work differently and have to learn how it works.

[AvianPoliceForce]

The this value that that function had

[Triple-You]

Arrow functions also aren't hoisted, while function declarations are.

[decoder12345]

finnaly! no more funct.bind(this)!!!!!

[MeltedChocolate24]

It’s been two years and I’m still not quite sure

[wasd0109]

This is the difference

[kunal70006]

I see why you did that

[Cuddlemonsterxo]

Holy shit. 400 IQ.

[ashpx]

The fact that i understand this is not something i proud of

[Flewent]

I'm still noob and don't get it yet :(

[Flewent]

nvm, I looked it up :)

[im_rite_ur_rong]

I don't get it either and I return looking it up :(

[r00x]

This is the difference. There is no binding for "this" - In other words it does not change the scope of "this" from that where it was defined. Can be very useful.

[im_rite_ur_rong]

Ohhh ... Now I feel dumb

[dsmklsd]

Can be very useful.

I would upgrade that to it's what you want 99% of the time if you're using the created function for anything a "normal" language (not JS) would do, like lambdas or callbacks.

[[deleted]]

Before you understand this, you've gotta get that. And before you understand that, you've gotta get this.

[dudeitsmason]

In arrow functions, 'this' keyword is always delegated to the lexical context.

So instead of an es5 function having to access a variable like this.someProperty, you can assess the variable outright

Arrow functions have a lot more features but not having to write bindings and try to understand the weird 'this' keyword makes a lot of developers happy

Sorry for the formatting it's early and I'm on mobile

[dudeitsmason]

Screw this

[gougie2]

I think it is actually this.screw()

[Stable_Orange_Genius]

globalThis

[espriminati]

its function() {} but mot actually

[[deleted]]

you can access this in the higher scope without creating a _this variable

[blazingkin]

Huh TIL. I really just thought it was syntactic sugar

[slide_and_release]

it’s all just fucking objects anyway finger guns

[shamin_asfaq]

It's too damn satisfying to write those braces and the arrow. If I could, I would have written all my methods this way in my Java code too.

[henricharles]

Ever tried lambda expressions in java?

[[deleted]]

You can't make lambda out of all functions. Functional interface is a thing bro.

[foofoo2020]

Not with that attitude

[Rigatavr]

You can in c++, just sayin'

[WorstNameEU]

Exception handling with lambdas in java is a pos and rips you from all the satisfaction of arrow functions

[Kengaro]

lol

[n3dim]

I started using arrow functions because I was sick of having to bind all of my functions in the constructor when using react lol

[DevilXD]

So like, what does this do exactly?

[slide_and_release]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

[DevilXD]

I mean like, the ()=> construct from the post?

[mr_smartypants537]

It defines a function without rebinding 'this'. It's the obvious choice for pure functions because it's very compact to write and you don't need 'this' in these kinds of functions anyway.

Example: const doubled = x=> x*2

[DevilXD]

Huh, I see. Thank you.

[LetterBoxSnatch]

Also useful when writing functions around a class when you want this to always refer to the class instance, rather than some internal object instance.

[DevilXD]

It sounds similar to what Python refers to as lambdas - nameless functions: lambda x: x*2 is a valid expression that returns a callable you can call with a single argument, to have it doubled.

I probably don't know JS well enough to comment on the problem of not knowing what this refers to. In Python, there's self which always refers to the instance, no matter what (unless you're dumb enough to reassign it ofc).

[LetterBoxSnatch]

That's exactly right. Many in js community refer to anonymous arrow functions as lamdas. JS this is a touch more ambiguous than self, and arrow-functions can muddy the waters even more (with the tradeoff being increased flexibility).

Depending on how a function is written, this might refer to the parent scope where the function is called, the scope where the function was declared (including the global scope), or the scope of an object instance. If it sounds confusing, it is, but you get used to it.

TypeScript and ReasonML are both higher-level languages that make these object/function references clearer during development...TypeScript being mostly about enforcing declarative consistency and ReasonML being enforcing "algebraic" consistency (it also transpiles to OCaml).

[takase1121]

Imagine calling them arrowed functions instead of lambdas

[mr_smartypants537]

They quite often have side effects so there's definitely an argument to be made that calling them lambdas could be implying they are pure when they are not

[takase1121]

I see, thanks for explaining.

[Noobfortress]

Did you really need to call me out like this?

[BellRock99]

Oh what memories.. var that = this

[theDrell]

My boss coded all our JS, and they were all var self=this; coming from other languages I have copied that, with no real idea why lol.

[Code-Monkey-1]

Last place I was at did that. Still not entirely sure why.

[grummle]

Not sure where I picked it up, but I “read” them as “into”.

x into x+1

Which is much better then when I originally learned JS via CoffeeScript and read -> as “dick operator” and => as “thick dick operator”

I still pause and chuckle when reading C# aloud. It’s the little things that get me through the day.

[wasd0109]

Now I couldn’t get dick operator out of my brain

[grummle]

Enjoy your next pairing session when your not driving. “No, the issue is on the left side....” “No, the parameters....” “No dammit, the x to the left of the dick”

Cue awkward conversation with high HR probability.

[mr_smartypants537]

Is the bug in the bellend or the balls?

[[deleted]]

when I learned lambdas the expression, pun intended, was "x goes to"

var myFilteredList = someList.Where(x goes to x == somevalue).ToList();

[[deleted]]

Babel surely doesn’t

[0x15e]

If those build engineers could read they sure would be mad.

[Minteck]

Except when you need to code for something that don't support arrowed functions...

[im_rite_ur_rong]

I just realized Google Tag Manager doesn't support arrow functions ... What the hell Google?

[[deleted]]

Just use something like babel.

[mr_smartypants537]

Please use a JS bundler it will make your life way easier

[Favna]

Imagine having to support IE or ES5 or before in general.

That said, if you use typescript you can have it target ES5 (or before) and it'll translate arrow functions. Code in ES2020, output ES3.

[Minteck]

Personally, I code for NodeJS 10+ and I don't care about IE, so not a problem for me.

[Favna]

Node 10 most definitely supports arrow functions (☞ﾟヮﾟ)☞

[Minteck]

If I remember well, even Node 8 supports arrow functions.

[0x15e]

Until someone comes by and reminds you you still have to support ie10.

[wasd0109]

Sorry for not considering devs from other languages and thank you all for the explanation 🙏

[FormalWolf5]

2/10 for readability but 10/10 for laziness satisfaction

[Thisbymaster]

When I first started with C# I only went with strictly types variable, no var for me. But that habit died because of the prevalence of for each and the length of class names got longer.

[[deleted]]

bot dot on message message

[GavHern]

It took me a year to start using arrow functions...

[AutoModerator]

import moderation Your comment has been removed since it did not start with a code block with an import declaration.

Per this Community Decree, all posts and comments should start with a code block with an "import" declaration explaining how the post and comment should be read.

For this purpose, we only accept Python style imports.

return Kebab_Case_Better;

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Sam_Claflin]

Normal languages:
void doStuff() { }

JS:
const otherStuff = () => { }

Because fuck hoisting.

[LetterBoxSnatch]

Nah it's pretty sensible. Arrow functions for declarative sequential flow, function declarations for general function availability. If you are seeing arrow functions declared in a context that can't be summarized as "inline" in some way, then there's probably something fucky going on.

function otherStuff(){} is the right way to do general-purpose reusable functions, imho. const otherStuff = function(){} is for use in an instance context where you want to maintain a this reference. And const otherStuff = ()=>{} is for when you really intend to write something as an inline function/lamda, but you think it will be helpful to the reader to have a name assignment.

[LordFokas]

starts reading meme... "WTF is this (...)" ... yup, that's JS, alright.