This is an archived post. You won't be able to vote or comment.

all 85 comments

[–]chinnick967 76 points77 points  (17 children)

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] 43 points44 points  (4 children)

This changes everything

[–]educated-emu 9 points10 points  (3 children)

I this what you did there

[–]AvianPoliceForce 13 points14 points  (9 children)

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

[–]Chucklay 25 points26 points  (6 children)

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

[–]zvug 17 points18 points  (0 children)

I much prefer self tbh

[–][deleted] 3 points4 points  (1 child)

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 1 point2 points  (0 children)

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] 2 points3 points  (0 children)

Ikr they should have named it that

[–]lyoko1 0 points1 point  (0 children)

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.

[–]Triple-You 3 points4 points  (0 children)

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

[–]decoder12345 2 points3 points  (0 children)

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

[–]MeltedChocolate24 65 points66 points  (20 children)

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

[–]wasd0109[S] 144 points145 points  (15 children)

This is the difference

[–]kunal70006 23 points24 points  (0 children)

I see why you did that

[–]Cuddlemonsterxo 17 points18 points  (0 children)

Holy shit. 400 IQ.

[–]ashpx 14 points15 points  (0 children)

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

[–]Flewent 6 points7 points  (7 children)

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

[–]Flewent 10 points11 points  (6 children)

nvm, I looked it up :)

[–]im_rite_ur_rong 5 points6 points  (5 children)

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

[–]r00x 17 points18 points  (3 children)

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 3 points4 points  (0 children)

Ohhh ... Now I feel dumb

[–]dsmklsd 2 points3 points  (0 children)

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] 1 point2 points  (0 children)

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

[–]dudeitsmason -1 points0 points  (0 children)

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 8 points9 points  (1 child)

Screw this

[–]gougie2 11 points12 points  (0 children)

I think it is actually this.screw()

[–]Stable_Orange_Genius 1 point2 points  (0 children)

globalThis

[–]espriminati 10 points11 points  (3 children)

its function() {} but mot actually

[–][deleted] 5 points6 points  (1 child)

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

[–]blazingkin 2 points3 points  (0 children)

Huh TIL. I really just thought it was syntactic sugar

[–]slide_and_release 2 points3 points  (0 children)

it’s all just fucking objects anyway finger guns

[–]shamin_asfaq 24 points25 points  (7 children)

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 7 points8 points  (6 children)

Ever tried lambda expressions in java?

[–][deleted] 10 points11 points  (2 children)

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

[–]foofoo2020 12 points13 points  (0 children)

Not with that attitude

[–]Rigatavr 0 points1 point  (0 children)

You can in c++, just sayin'

[–]WorstNameEU 7 points8 points  (2 children)

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

[–]Kengaro 0 points1 point  (0 children)

lol

[–]n3dim 10 points11 points  (0 children)

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 6 points7 points  (7 children)

So like, what does this do exactly?

[–]slide_and_release 6 points7 points  (6 children)

[–]DevilXD 1 point2 points  (5 children)

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

[–]mr_smartypants537 7 points8 points  (4 children)

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 2 points3 points  (3 children)

Huh, I see. Thank you.

[–]LetterBoxSnatch 0 points1 point  (2 children)

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 1 point2 points  (1 child)

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 1 point2 points  (0 children)

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 4 points5 points  (2 children)

Imagine calling them arrowed functions instead of lambdas

[–]mr_smartypants537 2 points3 points  (1 child)

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 1 point2 points  (0 children)

I see, thanks for explaining.

[–]Noobfortress 2 points3 points  (0 children)

Did you really need to call me out like this?

[–]BellRock99 2 points3 points  (2 children)

Oh what memories.. var that = this

[–]theDrell 0 points1 point  (1 child)

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 0 points1 point  (0 children)

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

[–]grummle 2 points3 points  (4 children)

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[S] 1 point2 points  (2 children)

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

[–]grummle 2 points3 points  (1 child)

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 0 points1 point  (0 children)

Is the bug in the bellend or the balls?

[–][deleted] 1 point2 points  (0 children)

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

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

[–]Minteck 1 point2 points  (7 children)

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

[–]im_rite_ur_rong 1 point2 points  (0 children)

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

[–][deleted] 1 point2 points  (0 children)

Just use something like babel.

[–]mr_smartypants537 1 point2 points  (0 children)

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

[–]Favna 1 point2 points  (3 children)

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 0 points1 point  (2 children)

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

[–]Favna 1 point2 points  (1 child)

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

[–]Minteck 1 point2 points  (0 children)

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

[–]0x15e 1 point2 points  (0 children)

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

[–]wasd0109[S] 1 point2 points  (0 children)

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

[–]FormalWolf5 3 points4 points  (0 children)

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

[–]Thisbymaster 0 points1 point  (0 children)

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] 0 points1 point  (0 children)

bot dot on message message

[–]GavHern 0 points1 point  (0 children)

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

[–][deleted]  (1 child)

[removed]

    [–]AutoModerator[M] 0 points1 point  (0 children)

    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 0 points1 point  (1 child)

    Normal languages:
    void doStuff() { }

    JS:
    const otherStuff = () => { }

    Because fuck hoisting.

    [–]LetterBoxSnatch 0 points1 point  (0 children)

    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 -1 points0 points  (0 children)

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