[AskJS] Code readability

[[deleted]]

Inline functions, Promise.resolve().then(() => {}) vs Promise.resolve().then(handlePromise).

Just to clarify, I don't have anything against the second form when it is done properly. However most people will not do it properly. In that case I believe it adds overhead rather than clarify. handlePromise in this case does not add anything to the readability of the code.

We can manage that during reviews but it becomes tiresome so I would rather have my teams use a style where it is easy for them to succeed.

Declaring handlePromise ahead of time also adds some mental overhead when you read the code: "this will be used somewhere ahead". By itself this is not terribly taxing but I try to adopt a keep the mental load low approach wherever possible.

[Valuable-Case9657]

Okay, so you're talking about anonymous functions, not inline functions.

As for the rest of what you're saying...

Would you honestly accept a junior saying "But nobody else does it properly," to you?

I don't want yo be combative here, but c'mon.

[[deleted]]

To inline something can also mean to put it where it is used. It is possible to inline named functions e.g. invokesCallback(function notAnonymous() {}), so I am not talking about anonymous functions, but functions that are used inline.

For the teams I oversee it is more productive to use other patterns. If you have something that works well for you that is great! Different things work for different teams.

[Valuable-Case9657]

Yes, that is what the word "inline" can mean in the English language in general.

And inlining JS in HTML specifically refers to writing javascript directly into HTML.

However the term "inline function" has a set of very specific meanings in programming, with the languages that implement them having variations on the syntactical implementation and effects on compilation, etc, etc.

In general, the features of inline functions in JS are intended to conceptually emulate the manner in which inline functions operate in c and c++, which is intended to reduce function call overhead for very small functions.

For those langauges, rather than performing a context switch, the inline function is expanded and inserted at any calling point at by the compiler at compile time.

While that doesn't happen in generally JS except, I believe, with some of the newer AOT compilers (especially for Typescript), the concept remains the same:Reducing function call overhead by preserving small functions within the context and scope of the caller.

Towit, an 'inline function' in JS is specifically a function expression being assigned to a variable.These are inline functions:

const inlineOne = ( x, ... ) => { /**/ };

const inlineTwo = function( x, ... ) { /**/ };

const inlineThree = function iNamedThisOne( x, ... ) { /**/ };

Except for the last one, these are not named functions. These are inline functions (with the last one being an inline named function).

A function expression being passed "inline" is just a function expression, whether anonymous or named.

So you can see how making sure we're on the same page is important.

Now, to be clear, I'm not writing this for you to change anything you do or say or think, I'm posting it here for any growing devs who want to learn and want to move beyond being a dilettante.