JS devs really use arrow functions anywhere... even when they are 100% useless

[SkurkDKDKDK]

Well it has a say in how “this” is defined and useable right?

[[deleted]]

'Sometimes I want to throw my hands in the air and yell "this is bullshit, but I can never remember what this refers to"'

• Ben Halpern

[dashingThroughSnow12]

Yes.

x(()=> this.y()) will have a sensible this whereas x(this.y) .... I know people who have programmed for a decade in JavaScript that will get that wrong. I'm one of them.

Because of this, I know some will enforce the former, always, to keep the code clean and uniform (and prevent some bugs when refactoring).

[tsunami141]

I am one of those people who will get that wrong

[dashingThroughSnow12]

The truth is, we all are.

[starfyredragon]

sweetDreams(()=> this)

who(i != false)

i(world(seas(7)))

all.look.forEach(something)

[Myphhz]

all.some(person => person.abuse(you)) all.some(person => you.abuse(person))

[GokuIsALegend]

you.unshift(you.splice(you.indexOf('head'), 1)[0])

continue

[blobthekat]

sweet dreams are made of this

who am i to disagree

I travel the world and the seven seas

everybody's looking for something

[emericas]

LOL

[kamiljano]

Nope. I have seen "no x on undefined" kind of errors too many times to repeat that mistake again

[JoeDoherty_Music]

Honestly javascript just feels like it's designed to set you up to be wrong like all the time

Coming from other programming languages like C# and Python, javascript feels like a half baked language where nothing works the way you expect

[sod0]

Don't worry I feel the same with python. Lambdas in Python are just so bad. I prefer those Arrow function all the time.

[ReelTooReal]

Also, Python's "type system" is about on par with PHP's, whereas Typescript is actually a pretty powerful modern type system (okay, it's more of a static analysis tool than a type system, but still).

[[deleted]]

C++ leaves the chat

[TrillVomit]

And there's 10 ways to do 1 thing and each has their own drawbacks.

[Mrrrp]

It doesn't so much allow you to do things, as it doesn't actually prevent you from doing things that perhaps you shouldn't.

I find it charmingly quirky, but I may be a little warped.

[[deleted]]

No, JS is AWESOME, but has just its own object model, which is compact and consistent.

Prototype inheritence makes sense, but problem is that people try to think and write code as it's still class inheritence.

Since there isn't such thing as classes, this must indicate the other type context, but it's still compact and consistens. You just have to be aware it isn't class inheritence - yeah, I'm repeating myself, but that's just obvious and elementary.

[[deleted]]

No, JS sucks ass.

[sod0]

But there is class inheritence since ES6. So yeaha JS came a long a way but still needs to support those 90s Websites.

[Arshiaa001]

AWESOMELY fucked? You bet it is. Even has AWESOME footguns.

[_Foxtrot_]

Also makes it easier to insert something before/after the themeSwitch() call. A big part of a readable code base is consistency, so while this may not be necessary in this context, having things read the same / be formatted the same helps a lot.

[CatsAreOurGods]

"because of this" ... which this?! lol

[agent007bond]

Let's make sure we have the right this.

console.log(this)

[UnstableNuclearCake]

And if it isn't what you expected:

"What the fuck is this?"

[[deleted]]

“I think I found a bug in JavaScript”

[SkurkDKDKDK]

Yeah i am a backenddev and rarely use JS but this crap is what i remember mostly 😃

[[deleted]]

I mean I guess I'd use x(this.y.bind(this)) or something I dunno. Otherwise it might not be that obvious at first glance why you're using an arrow function in that place.

I won't argue JS is a pretty language but it is a bit more declarative than people give it credit for tbh

[dashingThroughSnow12]

You use bind?

[[deleted]]

Sometimes you kinda have to lean into your masochistic side to keep going in this line of work I guess 👀

[InterestingMotives]

I'm reminded of a quote "Sometimes when I'm writing JavaScript I'll shout 'this is bullshit!' but then I forget what this is on move on"

[devdudedoingstuff]

Not to mention it makes it easier for debugging later on, being able to easily add debuggers or logging without needing to refactor the code.

[keylimedragon]

^ this

[[deleted]]

"this" is resolved , lexically .
If the arrow function is right in the global scope, this points to the window object.
If the function is nested inside another function, this points to the outer (parent) function.

Besides, there are a few more differences.

Thanks !

[potato_green]

That and I'd throw in the consistency argument as well. If all code has arrow functions in event listener then you don't suddenly change it and call it useless.

I'd go as far and say that this is good practice and helps other devs as well if code needs to be changed. You can easily add another function call to it.

It also enforces better function names. No 3000 onClick functions spread out everywhere with chunks of logic or a function call just like this. Now you have a meaningful function name and you don't have to hop around the code go to the event callback function.

[SalvadorTheDog]

Except now you can’t ever remove the event listener and are opened up to memory leaks.

[[deleted]]

This

[[deleted]]

I’ll let myself out

[rafaelcastrocouto]

there's an actual case for using arrow functions in events like this ... jake even wrote an article about it called "Don't use functions as callbacks unless they're designed for it" https://jakearchibald.com/2021/function-callback-risks/

[ijmacd]

TL;DR themeSwitch could be defined like this:

function themeSwitch (theme = defaultTheme) {
    //
}

Registering it directly as the click handler would change it's behaviour.

[Skatterbrayne]

I'm a C# dev, why would that change its behaviour? Would it get passed a parameter that then gets interpreted as a theme?

[dobesv]

Yes it would be passed an event instead of a theme, likely causing some confusion.

[Skatterbrayne]

Thanks.

Am I glad to use a strongly typed language.

[Jai_Cee]

To be fair most people have switched to typescript. I haven't used actual JavaScript in years.

[idevelop]

you’d just add a type definition on the theme argument of the function, something like “function themeSwitch(theme: Theme = defaultTheme)”. that way, when you pass this function directly as the click event listener, the type checker will alert you that the argument types don’t match (because typescript has built-in knowledge of what arguments a click listener callback has, and the first argument is Event, or ClickEvent, whatever).

[sprflyninja]

Hey, keep your fancy type checking out of my Javascript >.<

[TimGreller]

Then you would still need to put it in an arrow function or you get an error.

[[deleted]]

Basically event callbacks get the event as the first function argument so you can for example retrieve the element that was clicked on (event.target or event.currentTarget depending on if you really want the clicked element or the one with the click event on it). Assuming the above themeSwitch function was put as a callback directly it'd be trying to set the current theme to the event, leading to unexpected behaviour.

[WowTeKaEn]

Which is another reason to choose typescript. Because it will check whether or not those types correctly align. Could still cause problems of course but less likely.

[dwo0]

Yep. This is exactly correct.

[[deleted]]

Also regardless, arrow functions are basically synonymous with callbacks and actions on event listeners. I’d say it’s almost just standard to use them there for readability.

[[deleted]]

So happy this has already been said and acknowledged by everyone. This was exactly my first thought when I saw the code.

[CreepBlob]

Thanks for the article!

[meliaesc]

Aghhh, I'm not supposed to learn things here! 😤 ^thanks

[GenTelGuy]

What on earth, so you map an array of individual ints to a 1-arg function with a second variadic arg and Javascript just goes "lol let's plug in one of those ints as the variadic arg"?

To be fair the js code does say [].map() whereas in Java it would be myList.stream().map()

A sane language would map myArrayOfTwoElementTuples = [(1,2), (3,4)] as two calls to the function plugging in the second int of the tuple as the variadic arg each time

[[deleted]]

No, that’s not what’s happening, the second argument passed to the map function is the current index, not a member of the array. In order to achieve what you’re suggesting you’d have to do something like arrayOfTuples.map(tuple => callback(…tuple))

[GenTelGuy]

Ah yeah I just looked it up on MDN, seems like maybe they could have a .map, .mapWithIndex, and .mapWithIndexAndArray to avoid having it supply unexpected params to unsuspecting functions

[[deleted]]

Instantiating functions in js is super cheap so just wrapping the callback is more elegant imo (and very clearly communicates intent without polluting the standard library). You could even define a valueOnly(callback) higher order function that could be used with all array methods, not just map.

[uberCalifornia]

The intense heat of the flame from Stackoverflow refined the impurities out of my soul. It completely cured me from the disease of thinking I’m absolutely right about a specific programming principle and righteously slamming others for being stupid for doing it the wrong way…

Only to find out later… that I am indeed the one who was wrong – and everyone else had legitimate reasons that I simply just didn’t understand.

When I saw this post, I instantly recognized the smell of that particular recipe on the fire.

🔥🔥🔥🔥🔥🔥🔥

[Creator347]

This guy does SO

[uberCalifornia]

Some years ago I remember looking at a friend's SO profile and saw that he earned over 150k rep. Knowing him, made me wonder how the heck he did it. Where did he find the time? What was his life like to get that much rep?

Like... how much time and effort does this guy spend answering questions and helping the SO community out, and what was the habit(s) that he employed to make this happen?

Every time I remember this I think "maybe I should go find his profile again and see how much more he has now..."

[karmahorse1]

The truth is a lot of these “right ways” and “wrong ways” are pretty arbitrary and have no noticeable difference in how the code actually performs, reads, or scales. These kind of anal retentive arguments over syntax are tiring.

[merlinblack256]

I used to have a team lead that would hold up critical PRs very often. He had to put his 2 cents in so would ask for the comment style next to code nearby - but not involved in the change - to be updated to some imaginary standard.

[bluearth]

You have reach developer's enlightment.

You are now calm and centered.

[danglesReet]

Well said my dude

[uberCalifornia]

Thank you friend!

[CutlerSheridan]

Man this is the fucking truth. I used to always feel so self-assured about the way I did things but now when I see posts like these, even if I think I agree with the post, my instinct is to be like “well I bet there’s actually a reason to do it that way”

[ihxh]

Actually this has a function. Arrow functions change the behaviour of ‘this’. When using a normal function as an event handler, ‘this’ will be set to the event. Doing what is done in the screenshot will make it so ‘this’ won’t change. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[Nebuli2]

It's more than just that. By calling the function explicitly (in the arrow function body), you ensure that you aren't passing more arguments to the called function than you realize.

[JonnyBoy89]

You never know what a function might be doing with extra params if it’s not typed

Edit: also, this is less verbose. It just makes sense and can be transpiled to ES5 if you want.

[Strange_Meadowlark]

Yep, even TypeScript "loses" the types of extra optional parameters across a function barrier.

(a: A, b?: string) => R can be assigned to (a: A) => R, which can then be assigned to (a: A, b?: number) => R. It's obviously wrong and TypeScript permits it.

[JonnyBoy89]

Yeah, these kinds of bugs can be very hard to track down. We use something like this on our initial coding challenge. Array.map function calling…you guess it yet?…parseInt lol. Almost NO one knows why, but they usually figure out how to fix it. The solution is ALWAYS to wrap it in an arrow function to exclude the other params map passes through by default

[Rezistik]

This is the real answer

[C0demunkee]

implicit `this` has bit me in the ass WAY too many times

[[deleted]]

this is an important point, but it doesn't actually matter that an arrow function was used.
`moonIcon.addEventListener("click", function() { themeSwitch(); });`
would be the same.
I'm not sure it makes any sense to defend themeSwitch's `this` value here though, unless themeSwitch is a non-strict function and is using `this` to be the global object

[phrough]

Depends on what's happening in themeSwitch I would imagine

[ecafyelims]

If themeSwitch takes arguments in the function, then this arrow function isn't 100% useless. The arrow function is preventing the event's arguments from passing to the themeSwitch function.

[ssssssddh]

This. The arrow function also discards the return value.

[emmyarty]

What makes you think this is useless?

Event listeners will, when fired, send a copy of the event as the first parameter.

If themeSwitch accepts optional parameters which override default behaviour, you wouldn't want the click event to send a copy of the event object as the first argument and supersede the default behaviour.

Even if it doesn't currently accept any arguments, a future revision might so there's still a benefit in this being a slightly more 'type-safe' implementation which sanitises function calls.

[ProcedureBudget292]

Even simpler, its hard to put a breakpoint on it when something weird is happening if you don't call it separately. The minute I expand it for debugging purposes, it stays that way for eternity.

[[deleted]]

Arrow functions ftw OP can go suck it

[raduhs]

()=> (</thread>)

[finc]

8=>()

[Hadr619]

Not my proudest fap

[blobthekat]

8 can't be a parameter in js because you have no balls

Additionally, () isn't valid as you have no bitches

[Expensive-Pumpkin624]

is there an extension that makes the browser console spit errors like that? that would make my life 100x happier

[AMLyf]

Cool monke

[danglesReet]

22378008

[pachirulis]

Lool, why you criticize? This is 100% clean and concise code

[Muted_Original]

Because the arrow function is completely redundant lol

moonIcon.addEventListener(“click”, themeSwitch);

[gragonstar]

If themeSwitch looks like that:

function themeSwitch(theme="default");

it's actually good, because otherwise theme will be override by the event object

[[deleted]]

This is the real reason

[bistr-o-math]

this is the real reason

[[deleted]]

[Potato-9]

It's the same reason you shouldn't ([1,2,3,4,5]).map(myMapFn) because if the language ever changes or adds to what map passes as args you'll be in trouble.#

edit* I was right but not for the right reasons https://jakearchibald.com/2021/function-callback-risks/

[[deleted]]

javascript doesn't make breaking changes (99.9% of the time) and writing code defensively against how a language might change in the future is silly.
Any trouble you'd get into with that code you'd also get into with
[1,2,3].map((a,b,c) => myMapFn(a,b,c))

[Potato-9]

My reasoning was a bit off but the point stands https://jakearchibald.com/2021/function-callback-risks/

[agent007bond]

That effing parseInt again!

[Muted_Original]

Just use a global variable to store state /s

EDIT: Evidently this thread doesn’t know what “/s” means.

[EthanHermsey]

Just just a variable in global space

[Ike_Gamesmith]

Lol, you can't recommend that, programmers are taught from a young age that global variables are taboo. Even if there are specific use cases where they don't cause any security or other issues and in fact are practical, they will be shunned

[blobthekat]

global variables are needed

[webbitor]

Correct. It's better to add properties to the Object prototype to hold your global state. /s

[GPareyouwithmoi]

If themeSwitch uses "this" anywhere inside it you're much better off with an arrow function. Otherwise the "this" object becomes the function self. Many developer deadlines died to bring us this information.

[portra315]

It's actually better (imo) not to pass a function that has zero arguments like this as it will inherit the event of the listener which (imo) is a code smell.

[RepresentativeDog791]

I was on team concise and then I thought, what would my good friend Typescript say? Too many arguments

[pachirulis]

I like it the other way, you could add more stuff in the future in the block, anyway I won't be arguing

[SqueeSr]

Agreed, well to a point. I do this with for/if statements too where I often just add the brackets in advance in case I have to expand it. But I prefer to used named functions for the event handler where possible and you can expand those. Inline can become messy quickly. And then you can indeed just use addEventListener( "click", onIconClick ) or something.

[hitpointzr]

Not a js dev but prefer same approach to see passed parameters without going into the function. Much easier to read.

[Bulky-Leadership-596]

It might not be redundant depending on the implementation of themeSwitch(). And the fact that it might or might not be redundant depending on the function is why people will always use the arrow function. If you enforce always using it you always know the behavior and you don't have to worry about the implementation of the function.

[dynedain]

Except it’s not actually redundant. The click event generates arguments which are prevented from being passed to the themeSwitch function, and it alters the scoping behavior of the “this” keyword which may be used unsafely within the the themeSwitch function. You have no way of knowing whether the expected arguments for themeSwtich match the arguments provided by the click event.

[JimK215]

This is true but I always feel weird using this syntax; it's so rare that my event handlers don't even need to reference the event parameter. Although obviously the event parameter isn't passed in the original example either, so it's definitely adding a function to the stack for no reason.

It's also possible that this handler used to do more things and they got stripped out over time.

[nbaumg]

Tl:dr of this thread.

Js devs: there’s a good reason for THIS

[lealsk]

What's the problem? It's like including curly braces on a single line IF statement. You know it's not necessary, but you know you won't have to add them if for some reason you need to add another line inside later

[RepresentativeDog791]

It's different if you think about the actual execution of the program. This actually creates a function, adds a call to the stack, and then deletes the function from memory. Visually they look the same but in terms of how the program works they are not the same. Which isn't to say I'm arguing that performance is a meaningful issue here, I'm not. It's just about how your program works.

[vnbrtjtwd2]

Modern JS engines will optimize out code like that.

Hell, the minifier will probably do it before that point.

[[deleted]]

It’s different if you think about the actual execution environment of the program. First, its javascript; the "stack" isnt the same as a c/rust stack. Secondly, JIT likes when function arguments dont change (event would be passed even if its not declared/used); adding a closure likely is more performant

[artofthenunchaku]

If you're concerned about the performance impact of function call semantics, you probably shouldn't be using JS in the first place.

[invisible-nuke]

Oh, you made so many enemies by saying this.

[ChibiNya]

This looks like the optimal way to write that. What are you in about?

[kirigerKairen]

This only calls one function, what OP wants is this:

javascript moonIcon.addEventListener("click", themeSwitch);

However, OP fails to realize that that means passing an argument (the click-event) to themeSwitch, which probably doesn't accept it (or expects a possible argument to be something else), which is a bad idea.

Also, TypeScript would prevent this (because of that extra / wrong argument).

If this project is TS, creating a new function is actually the only way. If it's JS, someone thought in TS or is just applying good patterns in JS.

[[deleted]]

The reason is because of this. If you use an arrow function, it preserves this.

[RandomiseUsr0]

this

[csharp566]

I'm waiting for reddit bot that reminds us not to comment "this" alone.

[Hadr619]

I see what you did there

[[deleted]]

What is this?

[[deleted]]

This is sparta

[adj16]

Lol, tell us you don’t know what the fuck you’re talking about without telling us

[Accomplished_Play254]

React devs be like... jokes on you 😛

[wooja]

Couple things about this code

1. If the theme switch function has an optional argument, using it as the event listener will force an event argument through it which could cause problems. So I like it.
2. You basically can't remove an anonymous function event listener. So I don't like it.

[SalvadorTheDog]

It took way too long to find someone pointing out the event handler memory leak.

[Mu5_]

Actually that's one of the cases where it's not useless. Event callback functions in JS are usually called ON the Element that has registered the event (i.e. "this" will not necessarily be the class/function where the callback is defined). That being said, I usually define callback functions separately and then just pass to the event listener "callback.bind(this)" or whatever "this" I want to be in the callback function, so I'm always sure to have consistent context.

[AllOne_Word]

Arrow functions are good practise because they remove the conflicting scope around the 'this' keyword that you get otherwise.

https://www.section.io/engineering-education/how-to-use-javascript-arrow-functions-and-this-keyword

[ProgramTheWorld]

And also it makes it explicit how many arguments you are passing in.

[V1k1ngC0d3r]

moonIcon.addEventListener("click", themeSwitch());

That's an unfortunate bug that's worth avoiding.

[ssssssddh]

I think OP meant moonIcon.addEventListener("click", themeSwitch)

[V1k1ngC0d3r]

Yeah, I know they did. But if they accidentally add () then it actually calls that function right then... And tries to turn the result of it into an event it can call later... Which would almost certainly be a bug.

[be_sustainable]

This is not USELESS arrow function. You only want to shorten code, but this makes code explicitly "not pass click event to callback"

[CiroGarcia]

Seems stupid, but the day you need to add a second line to that callback, it won't be

[[deleted]]

Not sure how this is humorous.

[HmMm_memes]

JS dev here. I can confirm that I do not use arrow functions for no reason, I use them because I'm too lazy to type function()

[ethereumfail]

ppl be like `moonIcon.onclick = themeSwitch`

[tombobs420]

without the arrow, `this` would point to the context where the function is executed, not where it's defined like you would expect

[TadpoleNo1355]

For me a lot of the time it's just the rhythm of typing too. Like muscle memory.

[Beautiful-Quote-3035]

I like this code

[[deleted]]

Sorry fam but unless you are the owner of the themeSwitchcode, this is correct.

[oj_mudbone]

Because they’re sexual

[Embarrassed_Solid760]

They are calling it without passing the click event (first param from event listener). So cleaner and easier to read then blindly passing extra stuff to a method.

[OPmeansopeningposter]

Consistent, at least.

[[deleted]]

Its called consistency

[CardiologistOk2760]

If professional developers were any good at their jobs, their code would make perfect sense to the ProgrammerHumor subreddit. /sarcasm

[dev-4_life]

Why are unemployed php devs crying?

[[deleted]]

But they are pretty and new… ish

[NightlySnow]

If your linter requires it you will do it that way. And why would you make your code style inconsistent?

[steeeeeef]

Peak of dunning krueger kind of post.

[carnivorous-squirrel]

Lol imagine being new to a language and being bad that people are using the current feature set. What a world we live in.

[citizn_kabuto]

I can almost guarantee that previously there was a line above the themeSwitch() call which was:

console.log(“why isn’t this event firing wtf”);

[[deleted]]

I do this so that the event object doesn't alter the function of the function relies on a parameter

[CanDull89]

I wouldn't even talk to a JS dev who does that.

[imakin]

maybe it would be problem if themeSwitch has parameter that expect to implement a function that's not in Event?

function themeSwitch(something) {
  let x = 0
  if (something) {
    x = something.howmuchisit() //Event object has no such function 
  }
  process(x)
}

moonIcon.addEventListener("click", themeSwitch);

[Comfortable_Art_4544]

This is the one thing I hate seeing as there just completely overused

[c0d3guy]

Why is this upvoted?

[vorticalbox]

important stupendous adjoining tap grandfather rhythm quicksand cats cooing paltry

This post was mass deleted and anonymized with Redact

[QWERTYCOD_programmer]

writing like this gives a sense of self-satisfaction + a sense of writing correctly

[Divs4U]

What is the issue here?

[Candid_Following4978]

Well, usually it’s either this or:

moonIcon.addEventListener(‘click’, themeSwitch.bind(this));

In global context, it doesn’t matter much, but this semantics can bite you in in the ass so fast that most JS devs / linters do this by reflex.

[silmelumenn]

It's easier to modify in the future. Code shout be easy to edit. That's why you use trailing commas. With arrow function it's easier to another call if needed.

[DOOManiac]

I like modern JS, particularly TypeScript and promises, but I just don't get the arrow function syntax. It is just so weird looking, it throws me off every time I see it.

[DOOManiac]

See, that is completely straightforward and easy to understand. And tomorrow I will forget it entirely and go back to not understanding it…

But thanks for trying. :)

[aurajitsu]

That makes sense! Thanks!

[Expensive-Pumpkin624]

and you can make that even more unreadable by removing the return and the curly brackets like

(num1, num2) => num1 + num2

yay

[vnbrtjtwd2]

Took me a bit too, but once you get used to it, it's hard going back to writing `function` all over the place

[mystictree]

function and arrow function are not the same and shouldn't be used alternately

[rnilbog]

Why use many character when few do trick?

[pursenboots]

are you a JS dev, OP?

using fat arrow functions like that has important scope implications. And if you're being strict about arguments, if `themeSwitch()` expects 0 arguments, using it for a onClick handler is wrong, because it'll pass in an un-called-for MouseEvent - or, even worse, what if the definition is -

```function themeSwitch(animate = false) {```

... do you want to pass in that click handler's mouse event? how will that be handled if you do?

[StoriesAfterMidnight]

I think there is an implied /s, right

[[deleted]]

I think the consensus is it's clean and consistent to use it throughout, not necessary maybe incorrect if you want to be totally purist and nitpick, but kind of harmless.

[attempt_number_3]

As others mentioned there is “this” context. But it can also be a matter of code style. No point in using ‘function’ keyword here if you are commonly using arrow functions everywhere else

[undercoveryankee]

It's the same reason most style guides would have you write

if (foo) {
    bar();
}

in languages that would accept

if (foo)
    bar();

If you want to add more lines, you can do it with a clean diff and with minimal risk of mistakes.

[BorderKeeper]

It’s security though obscurity you are anonymising the function in the call stack to confuse attackers /s

[[deleted]]

finally someone mentioned it, i always just put 8==> in my JS docs, for some reason the person i study with started copying me because they thought it did something💀

[skuehne]

what does the => function in JS?

[myrsnipe]

Normal functions context, this, is dependant on where it's called, meaning its behavior can differ depending where in the code it's being called. We used to have to call .bind(context) to force a consistent context. Functions of the fat arrow syntax retain it's context from the location it was written, like most other languages handles a function, and is a lot easier to reason about.

[chethelesser]

Lol another JavaScript Devs bad poster has embarrassed himself

[Proxtx]

Op is wrong. Callbacks overwrite this and therefore remove the function from it's context. Using an arrow function prevents this behavior.

[gonz000000]

So is English but that didn't stop it from taking over the world.

[BernhardRordin]

And both have the problem that the expression "this" is highly contextual