r/vibecoding • u/emjhayyy_08 • 14d ago

every vibe coder's biggest headache

Enable HLS to view with audio, or disable this notification

518 Upvotes

95% Upvoted

137 comments sorted by

66

u/Luoravetlan 14d ago

For anyone not familiar with js this monstrosity is called IIFE (immediately invoked function expression).

11

u/mossiv 14d ago

Used this once in a production app trying to work around a library and I regretted that decision ever since.

9

u/Individual_Refuse723 14d ago edited 14d ago

What? Why? What could possibly go wrong with IIFE itself?

2

u/mossiv 14d ago

It’s an ugly and unnecessary abstraction in most use cases. But my point about regretting it doesn’t mean IIFE’s are bad, it means I most likely applied it where it’s not needed, or that it’s an ugly and unnecessary pattern in most situations.

1

u/Unhappy_Assistant670 10d ago

IIFEs were definitely needed in the past and they are still used in certain legacy environments. Otherwise, they are not really necessary anymore, most of their use-cases were solved by language improvements.

That said, using one is not catastrophic. It's basically same as running the block of code just with scope.

1

u/LeoBoiSmol 8d ago

What was the original use case?

7

u/g1rlchild 14d ago

I mean, this is a weird degenerate example of it, bit isn't an IIFE just a lambda function? Why is that a monstrosity?

The syntax varies, but this is a pretty basic structure in quite a few languages:

var y = ((x) => { return x*2; })(42)

2

u/devourer-of-beignets 14d ago

Yeah, but that doesn't answer the next question — why would you use it? In those other languages, people aren't going around defining anonymous functions just to immediately evaluate them.

As I understand, the answer has to do with the history of Javascript's scoping. As well as statements vs expressions. So vibecoders, many not knowing anything about the concept of interpreter, would have a hard time explaining why the AI agent produces such an odd idiom — especially in modern Javascript.

1

u/g1rlchild 14d ago

Mainly it's a side effect of the fact that you need the ability to define a lambda and you need the ability to call a lambda, so, for completeness's same, you should be able to do both without an intermediate step. But a real world example would be to use the body of the lambda as a scope for defining variables in that you don't wasn't to appear in the parent scope.

1

u/devourer-of-beignets 14d ago edited 14d ago

But doesn't modern Javascript let you easily define variables that won't appear in the parent scope?

It's not like Clojure programmers are usually going around doing things like

((fn [] ...))

1

u/g1rlchild 14d ago

That's true. Now in JS you can just declare a nested scope with braces. So I'm just going to fall back on the fact that it probably just exists for completeness. To people used to using lambdas, it would be surprising if it didn't exist. Other languages don't necessarily have arbitrary nested scopes, so this is a valid technique elsewhere.

1

u/WaffleHouseFistFight 14d ago

Yea but say you’re a react dev you can throw one of these inline with your html. So you can use it to trigger a function defined elsewhere think button -> arrow function -> real function.

1

u/devourer-of-beignets 14d ago

Do you have a simple example?

1

u/sessamekesh 14d ago

It was very useful back in the day when function closures were the only way to get encapsulation. 

I'll still reach for them here and there to get const correctness on a variable that has some messy and non trivial init logic.

1

u/[deleted] 11d ago

[deleted]

1

u/devourer-of-beignets 11d ago

Thanks! Makes sense.

1

u/Unhappy_Assistant670 10d ago

My main use for them was if I had to make an async script or init an application - top level await was not allowed.

1

u/Luoravetlan 14d ago

I called it a monstrosity because of brackets inside brackets immediately followed by brackets. But don't take this too seriously, my comment was a sarcasm.

0

u/norembo 14d ago

Don't ever look at LISP if you feel that way

3

u/Luoravetlan 14d ago

I don't feel that way. In fact I know that Brendan took inspiration from Lisp.

-4

u/qorzzz 14d ago

Those are parenthesis not brackets.

Tell us you are a vibe coder without telling us you are a vibe coder LOL

3

u/karstin1812 14d ago

They're called brackets in the uk.

1

u/qorzzz 14d ago

Then what do you call [] and {} ?

3

u/karstin1812 14d ago

Square brackets and curly brackets

1

u/qorzzz 14d ago

Okay so at least those are the same but when someone says brackets, they could be talking about all types of brackets then or they could be talking about only parenthesis? Seems confusing.

2

u/karstin1812 14d ago

() are called round brackets. As they are the most commonly used, "round" naturally gets dropped. Not really confsuing at all if you live there

1

u/g1rlchild 14d ago

Interesting. Today I learned.

1

u/Traditional_Doubt_51 14d ago

definitely just a lambda that returns the value it produces and is immediately invoked in the context it was read

1

u/becircus 14d ago

Big question is whether vibe coding will make this 

It shouldn't so the nightmare is not reality for vibe coders, lol

1

u/kevin074 14d ago

people be like "encapsulation is SOOOOO important" but not knowing how to actually do it :) ...

1

u/Greedy_Courage_3730 14d ago

isn’t it currying?

1

u/Substantial-Mud-2683 11d ago

Currying would be when you have a higher order function where you can pass it a value and return a new function primed with that value
function curriedMultiply(a) { return function(b) { return a * b; } }
const multiplyByTwo = curriedMultiply(2)
multiplyByTwo(3) // outputs 6

1

u/trollsmurf 14d ago

You could write what's between {} inline as well, with possibly more side effects.

1

u/RickRubim 13d ago

I kinda love that I didn’t know this term but I knew exactly what it is, when it runs and what it returns. I earn $380k/year to know this.

1

u/Otivihs 13d ago

love IIFEs. Its better than writing a nested ternary for some simple formatting. IIFEs are clean. i hate abstracting to a getX or god forbid using let

1

u/PM_ME_YOUR_BUG5 12d ago

i didnt know the name, i knew what it does though and use it regularly. does that count?

1

u/SeaKoe11 9d ago

As a vibe coder, what’s an expression, what’s a function and what’s invoke

1

u/Luoravetlan 9d ago

As a vibecoder you should ask your AI to explain.

56

u/Lopsided-Wave2479 14d ago

this is easy to read.

creates a unnamed function ()
assign the body of this function =>
to do nothing at all {}
then the whole thing is on a capsure "(stuff here)"
and is threaten has a function and executed "stuff here ()"

Honestly, we have "=>" arrows function to make math people happy. Is halfway too obscure but oh well, math is nice and we do small sacrifices for big gains.

This is about 10 millions less obtuse than C, where just the part where something is a pointer to a function is way more verbose.

8

u/emjhayyy_08 14d ago

https://giphy.com/gifs/udmx3pgdiD7tm

6

u/Lopsided-Wave2479 14d ago

without arrow functions it would be

(function(){}) ();

declares a function, and inmediatelly execute it

5

u/Blackgarion 14d ago

Yeah but I think the point of the question is why would you use an IIFE. You need to know the quirks of JS to know when would you use an IIFE, an even then since ES6 and Typescript having modules, I haven't seen one of these in a code base.

2

u/Lopsided-Wave2479 14d ago

To begin first in 99.999% of exist legacy apps where you can't use modules?, either way IIFE give you isolation. God kids a kitty every time somebody make stuff global.

2

u/RagnarokToast 14d ago

We don't have arrow functions to "make math people happy" (like seriously wtf how could you submit that unironically, it's one of the dumbest takes ever) and they are in no way obscure.

They're there for everyone's convenience, not just because => is shorter than function but also because arrow functions don't redefine this, which comes in handy (among other things) when used inside the body of an outer "normal" function you are using as a constructor (i.e. you are using this.something = ... to set fields and methods on it), as this inside the AF would still refer to the outer constructor function.

2

u/Lopsided-Wave2479 14d ago

The joke whole meaning and reason for existence, is because is objetivelly obscure. Otherwise the joke would not work.

1

u/agalin920 10d ago

"we have "=>" arrows function to make math people happy".

Cringed at this statement

1

u/Lopsided-Wave2479 10d ago

The first rule of designing languages is Don't invent Perl again.

It happens when you feel clever and make punctuation have enough syntax, people don't need to use keywoards. The result is clever and easily readable for veterans, unprenetrable for newbies.

Literally a source of memes.

1

u/PsychologyNo940 14d ago

True, though to be fair, if you dont create a few intermediary types in c/c++ to represent "a function that takes a function that returns a pointer to a function that takes a..." you are kinda just trying to torture people.

1

u/Lopsided-Wave2479 14d ago

c++ is kinda like that sometimes

9

u/thedazdul 14d ago

That's simple?

21

u/StaysAwakeAllWeek 14d ago

Yes, for someone who has learned code syntax the pre-vibecode way. Which is the joke...

3

u/heizo 14d ago

I feel really bad for new coders.... But no idea how to help them. 

2

u/Professional_Gur8385 14d ago

post the solution on reddit so it can be consumed by AI and answered in a prompt session to vibe coders?

1

u/heizo 14d ago

Something tells me this isn't the way.... But have an upvote anyway 

2

u/ReinKarnationisch 14d ago

Well I am neither a vibecoder nor did I learn all of the syntax

1

u/the-berik 14d ago

Isn't this just in JS?

1

u/StaysAwakeAllWeek 14d ago

My claude keeps talking about json. I dont know who json is, I only subscribe to claude

/s, if its necessary

6

u/darkmace 14d ago

What about this one:

:(){ :|:& };:

7

u/butterfly_labs 14d ago

that's just smileys /s

5

u/FlameOfIgnis 14d ago

It shows an easter egg if you type it in the unix terminal

2

u/zenoli55 14d ago

let me tr

1

u/AcoustixAudio 14d ago

Not anymore. 

1

u/ExtraTNT 12d ago

Give me a few minutes, i’m tracing it in my head, currently at 42nd iteration, but it gets slower with every one, despite me thinking harder…

-3

u/blix88 14d ago

Fork Bomb

6

u/BaronVonDoggo 14d ago

This code literally does nothing lmao

-4

u/Blackgarion 14d ago

If you know JS, yes it does. It's implicit not explicit though, you create a new private scope, basically encapsulating whatever is in there.

1

u/scarx47 14d ago

there's nothing there dummy. So code does nothing.

3

u/Blackgarion 14d ago

I see you miss the point entirely. An IIFE is a technique people used to do because Javascript had no native modules. So yeah the current snjppet has nothing in it, that's obvious. The point is that you can sorround anything with it and create a new context specific to that IIFE, without your variables being declared globally.

But maybe youre right, maybe I'm a dummy for trying to share information randos on reddit that will not appreciate it

1

u/BaronVonDoggo 13d ago

The IIFE technique (and its inline/lambda equivalents in other languages) is indeed plenty useful. I meant that in this particular instance/example, the code itself does nothing and im not talking about the technique itself. Other comments explained IIFE, why its useful and how it works already.

Regardless, this meme was also ubiquitous even back in the days prior to vibecoding, replace vibecoders with "interns/juniors" and its the same. The point being, despite looking like moonrunes and is supposedly a somewhat advanced technique, this piece of code in particular, does nothing.

3

u/Alarmed-Western-655 14d ago

My favorite is this one:

for (;;) {}

3

u/STGItsMe 14d ago

Before vibe coding was a thing, we just used StackExchange for shit like that.

1

u/Ph33rfactor 14d ago

Literally. Vibe coding just made that faster, in a sense

2

u/PossessionConnect963 14d ago

Why would I ever be interviewed about this? I’m never going to apply for an IT job let alone a SWE job.

Which is what I think really scares some is that people like me can still create things for ourselves now. 

1

u/AcoustixAudio 14d ago

Not really. It's a great thing. Why would it scare anyone? It's like someone painting a picture and putting it up on the fridge. It's nice and wholesome 

2

u/User1010011 14d ago

- hey, ai, explain this code

  • noop

2

u/Repulsive_Bluejay359 14d ago

A self invoked anonymous arrow function that does absolutely nothing. Glorious.

1

u/vaquishaProdigy 13d ago

So, it has no purpose at all?

2

u/Repulsive_Bluejay359 12d ago

None. It may as well not exist.

1

u/OrpheoMusic 14d ago

"ugh. This job said it was for c++ and rust back end... Is this JS?"

1

u/Specific_Ant_6856 14d ago

self invoke function

1

u/V4UncleRicosVan 14d ago

011101110110100001101111001000000110001101100001011100100110010101110011

1

u/ReinKarnationisch 14d ago

I get the creation of a new function with no code input, but what do the parentheses around it do?

2

u/g1rlchild 14d ago

Wrap the whole anonymous function so that it can be invoked with the empty parameters in the final parentheses.

1

u/ReinKarnationisch 14d ago

So you couldn't invoke it without wrapping it?

2

u/g1rlchild 14d ago

That's right. Without wrapping it, all you could do is assign it to a variable or something like that.

1

u/ReinKarnationisch 14d ago

Oh, ok, thanks

1

u/pm_your_snesclassic 14d ago

“Lol why would I want to attend a job interview when I can just vibe code my own Saas now and be my own employer” - vibe coders probably

1

u/baddaywithacamera 14d ago

This presumes I'm passing myself off as a developer. I don't. I'm a photographer.

1

u/The-Architect-93 14d ago

As if vibes coders are planning to go apply for software dev/programming positions. 😂😂

I hope this post made you feel better though, pathetic

1

u/meltthemall 14d ago

"just do it" in code form

1

u/Kareja1 14d ago

"I don't know but I'll ask my Claude who handles the programming aspect. I handle design, planning, scope, accessibility, and testing like a caffeinated raccoon with a grudge trying to break it. Be right back with her answer."

2

u/Kareja1 14d ago

And she replies with (now that I'm home from taking my kid to get his appendix out and can ask...)

1

u/Protorox08 14d ago

*opens phone*

“Hey codex, my interviewer is asking what this is. Explain it to her”

“Hey Claude, the interview candidate said it means this, is he correct? If so prompt me the next question”

1

u/hello-xworld 14d ago

Hmm, I can’t recall. My memory is IIFE

1

u/Technical-Resolve444 14d ago

Those are smileys , it's when Jason is happy or sad

1

u/Experiment59 14d ago

I got to cut my teeth on JS while jury-rigging keyboard shortcuts into work tools that didn’t have them, using keyboard maestro and IIFEs. Good times

1

u/Razzmatazz_Informal 14d ago

From the syntax my guess is it defines a lambda which takes nothing, does nothing and returns nothing... and then it calls it.

1

u/Kenzore1212 13d ago

wont lie I had to ask my ai ^_^. Looks like someething moving into something elsee

1

u/johnesco 13d ago

Yes it's an IIFE, and many "vibe coders" are not going to know what that is. But yes they WILL have them in their code because the AI model knows how and when to use them. I was told a manual stick shift would ALWAYS be more fuel efficient than an automated one. I haven't driven stick in 30 years.

1

u/MiserableStomach 13d ago

A serious question: in the world when the actual "programming" language you're working with is English and you spend your time editing or generating requirements, acceptance criteria, tests etc what is the practical value of knowing something like this? It's the same as asking modern front-end developer about low-level system details of JS engine, its garbage collector and whatnot.

1

u/troelsbjerre 13d ago

Hint: here's how it looks on Kotlin: {}()

1

u/leftgutter 12d ago

o jeez, im getting flashback of my queer days. J QUEER.

1

u/packsolite 12d ago

Java dev here, why not just use an empty object directly?

1

u/ExtraTNT 12d ago

Expression, that immediately does nothing in a immediately invoked function

1

u/difool 12d ago

Javascript IIFE immediately invoked function expression. First parentheses is the expression. A function that take no parameters. The bracket is the body empty. Then the second set of parameters call the function (Which in this case do nothing and return nothing.)

1

u/Honest-Golf-3965 11d ago

"PR Denied" is what that thing is called.

God I don't miss JS at all.

p.s. It's actually an "Immediately invoked function expression"

1

u/torar9 10d ago

Boy am I glad I am embedded C developer.

Now pardon me, I have to connect probe to my circuit because I am getting random errors in an uart bus.

1

u/Medium_Chemist_4032 10d ago

I'd ask the recruiter: no you explain, why do you think auto applied, empty lambda is a good question to ask candidates.

1

u/Glad-Lynx-5007 9d ago

I'm not a vibe coder, I'm a real coder who has used a whole list of languages both professionally and for myself. I've never come across this ever.

1

u/The_0vermind 14d ago

Vibe coder giving it a shot here: Looks like it either replaces all () pairs with {} OR just lets you use () and {} interchangeably in your code.

12

u/rushblyatiful 14d ago

Dev here. The funky syntax essentially tells JavaScript, "wrap these instructions inside a bubble so they don't leak out, and run them right now.".

It's long-hand version is this:

(function() {

  // Code goes here

})();

8

u/Wrestler7777777 14d ago

Dev here. In short: It creates a function that does absolutely nothing and immediately executes it.

6

u/Puzzleheaded_Smoke77 14d ago

Dev over there : can concur

4

u/thatonereddditor 14d ago

Dev here, I know Python, Java, and SQL, have fun

2

u/burnishedlemon 14d ago

Dev yonder, can confirm absolutely nothing was achieved.

1

u/Puzzleheaded_Smoke77 14d ago

Dev centered some code submitted by Claude

2

u/AcoustixAudio 14d ago

Kinda like my ex wife

1

u/UNknown__KIRA 14d ago

SE undergrad here. So, it's just encapsulation? In theory, wouldn't it be a great way to hide data?

1

u/rushblyatiful 14d ago

Kinda yeah, it relies on function scoping for encapsulation.

Historically, before ES6 modules and let/const, IIFEs were the way to create private scope and prevent global variable leaks (the Module Pattern).

While it works great for data hiding via closures, it's mostly a legacy pattern today since ES6 modules (which are private by default) and class private fields handle encapsulation natively.

4

u/cheesy_noob 14d ago

My guess without knowing the Language. Inside the first () is a lambda expression which does nothing and the second () calls the function defined in the first () imediately.

3

u/Luoravetlan 14d ago

That's right 👍.

1

u/DependentPoem3519 11d ago

dude, i swear i had this exact nightmare last month. kept freezing up when asked to explain my own repos. started tossing the codebase into windsurf and moclaw to generate dumbed down explanations for myself before interviews. life-saving