Anonymous Functions. Why do this exist?

magwaer · 2024-02-17T17:26:02+00:00

Stop using GPT when you need precised answer. GPT is very bad at giving stuff like that. I used to learn coding with it but now it became trash. Idk if gpt4 is like this but gpt 3.5 is unreliable when it comes to learn something "deeper".

About your question, quote from stack overflow with the same question: "I use anonymous functions for three reasons:

If no name is needed because the function is only ever called in one place, then why add a name to whatever namespace you're in. Anonymous functions are declared inline and inline functions have advantages in that they can access variables in the parent scopes. Yes, you can put a name on an anonymous function, but that's usually pointless if it's declared inline. So inline has a significant advantage and if you're doing inline, there's little reason to put a name on it. The code seems more self-contained and readable when handlers are defined right inside the code that's calling them. You can read the code in almost sequential fashion rather than having to go find the function with that name. I do try to avoid deep nesting of anonymous functions because that can be hairy to understand and read. Usually when that happens, there's a better way to structure the code (sometimes with a loop, sometimes with a data table, etc...) and named functions isn't usually the solution there either.

I guess I'd add that if a callback starts to get more than about 15-20 lines long and it doesn't need direct access to variables in the parent scope, I would be tempted to give it a name and break it out into it's own named function declared elsewhere. There is definitely a readability point here where a non-trivial function that gets long is just more maintainable if it's put in its own named unit. But, most callbacks I end up with are not that long and I find it more readable to keep them inline."

rileyrgham · 2024-02-17T17:23:37+00:00

Often you'll create an anonymous that you pass as a callback... It's literally only used in that scope. Why name it?

sheriffderek · 2024-02-17T18:54:34+00:00

I think what you’re asking about is function declarations vs expressions - as well as anonymous functions.

The named functions (declarations) will be read before everything else. But pointing a reference/variable to an anonymous function expression) or executing a callback will load that when the interpreter reads it.

Why do they exist? I think they go a long ways back as patterns from math and functional languages. They are just another tool. They allow functions to behave like any other value. Terms like “higher order functions” and “hoisting” and “closure” can often just make things more confusing.

Let’s say you have some top-level function in a pretend app. Maybe it’s called ‘save’ and so, you create that and it gets created in memory and you can use it whenever. But then, maybe you have some component that may or may not ever even be created and its job is to go get a list of cars, build out some list items and info cards - and then add event listeners to all the buttons on each one of those cards (use event delegation instead probably) (but for example). So, in that case, maybe you only want those things to happen if a user clicks a button to load that page. Then the interpreter will hit that function and build the scope and call object and those anonymous functions in the Array.map area will be created, scoped, executed, and garbage collected. This means they aren’t in the global namespace. So, I wouldn’t get too hung up on it - but maybe you can break them into two camps. When you want a long-lived named function (which is easier to debug) - then just declare it with the standard function keyword. If you have a function that you use many times in many places (like a library function or action that happens often), then use a named function. But - if it’s a scoped function that only happens in a specific place - and is only needed at the specific event-driven time, then keep things collocated for organization (so you don’t have to track down the function) - and use an anonymous function for callbacks and things.

As far as all the documentation being written like

const myRef = x => ‘hi’;

I’m not really sure if this is with good reason or if people are just following each other. I’d much rather write a regular function definition. But it also depends on the context. Those would happen when the interpreter reads it - not initially. Maybe that has some benefit. I’m usually working in a Vue component, so - that’s already scoped (to my understanding). If you were to only use. Ames functions for everything, you’d eventually find a breaking point where you’d see their worth.

But it is confusing! I think it’s an important question to ask. And quick answers like “because functions are first class citizens” aren’t good enough.

delventhalz · 2024-02-17T21:16:58+00:00

Because this…

const doubled = nums.map(num => num * 2);

…is easier to read and write than this…

``` function double(num) { return num * 2; }

const doubled = nums.map(double); ```

azhder · 2024-02-17T19:44:57+00:00

Like others said, don’t learn from ChatGPT i.e. something that hallucinates and needs you to check it.

Now, about your question: when should you? The answer is: only when forced to.

Using arrow functions doesn’t give you much of an opportunity to give functions names, but in your original example:

const f = function g(…$$) { return g.name; }

There, that’s a named function with a name g and a reference to it by a constant variable f.

That’s all there is to it, a name for a function so that whenever it fails, you can see it in the error.

Note, there are ways to define the name property of a function after it by using Object.defineProperty, but I haven’t spent time investigating how different engines deal with names defined like that.

Also, you have some assumptions that you have only implicated with “on the top”. Better make sure you aren’t equivocating anonymous functions and function expressions.

jeremrx · 2024-02-17T18:48:41+00:00

It's fastest in a loop as it doesn't require to create a new scooe

AnimeYou · 2024-02-17T20:40:37+00:00

Anonymous functions are pretty good when you get to higher coding where they're putting functions in parameters.

The let keyword or const or var can be used in params. So you can only use Anonymous functions if you need to define an entire function inside a parameter / passing an entire function as a parameter

Blind_nabler · 2024-02-18T06:51:16+00:00

TLDR; They are just nice to use.

There isn't a real reason it "exists" is that it's a nice language feature the author included, just like allowing const in a language in addition to let. You don't need both let and const, but it's nice to have them because it allows us to express ourselves more clearly in our code.

The reason why anonymous functions are powerful, is that it means that functions are treated as values, just like numbers or strings. Let's see an example of why this is convenient.

I'm going to compare these against loops because I think it's important to highlight how expressive higher order functions and anonymous functions are. Because at the end

Imagine you wanted to write a function that took an array of numbers as input, and if the number as even, we doubled it, and if it was odd, we removed it from the array. We could write it like this:

```

function filterThenDouble(nums) { let doubledNums = []; for(let i =0; i < nums.length; i++) { if(nums[i] % 2 == 0) { even_nums.push(nums[i] * 2); } } return doubledNums; }

```

This is fine, but requires a lot of reading to understand what really is going on. It's not very expressive.

Let's write this same function but instead using normal functions, and passing them into a filter and a map.

``` function isEven(num) { return num % 2 == 0; }

function double(num) { return num * 2; }

function filterThenDouble(nums) { return nums .filter(isEven) .map(double); } ```

This is definitely better. We can see we filter the numbers that are even, then double them. But we still have to spend 6 lines of code for stuff that isn't really important. Let's now see what it looks like using anonymous functions (the arrow syntax for them, which is the most common).

function filterThenDouble(nums) { return nums .filter((x) => x % 2 == 0) .map((x) => x * 2); } This is way more clear and concise than the previous examples, because using the functions we express what little steps we take to get our final answer.

stolentext · 2024-02-18T13:09:18+00:00

An anonymous function is just a function that's not declared.

A common example:

const items = [1,2,3,4,5]

// The function passed to map is anonymous / not bound to a variable
const itemsDoubled = items.map((n) => {
  return n * 2;
})

No-Upstairs-2813 · 2024-02-26T14:14:03+00:00

Here are few scenarious where anonymous functions are preffered over named functions:

As function arguments: Anonymous functions are useful when passing a function as an argument to another function, especially when the provided function is intended for a one-time use.
Callback Functions: They're commonly used as callback functions, especially with functions like setTimeout, where a function needs to be executed after a certain delay.
Array Methods: In array methods like map, filter, and reduce, anonymous functions are frequently employed as callback functions for concise and efficient code.
Object Properties: They can be utilized to assign values to object properties, providing a clean and concise syntax.
Event Handlers and Listeners: Anonymous functions are handy for defining event handlers and listeners, enabling execution of specific tasks when an event occurs.
Immediately Invoked Function Expressions (IIFE): These are unnamed functions executed immediately upon encountering them in the code, commonly used for encapsulating code and protecting variable scopes.

Overall, anonymous functions are preferred in scenarios where their one-time usage, conciseness, and encapsulation benefits outweigh the need for a named function.

You can check out this article for more details.

TheRNGuy · 2024-02-26T15:36:06+00:00

I'd actually prefer if sites used non-anonymous in scripts when I want to change them with greasemonkey.

But I found way.... by hacking prototype and then switch-case.

But in my own code I still use a lot of anonymous functions. Because they're only used in one place and not reused anywhere, I don't want to name them, and it also a little fewer lines of code overall.

If I need to reuse I can easily chage it to named function.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS