22

The title sums up my question. An example that demonstrates the point would be nice.

matori82
  • 3,669
  • 9
  • 42
  • 64
  • 1
    What is your guess, assumptions? Feed us something. – andrewb Oct 03 '13 at 12:53
  • 1
    I don't see any reasons why the question should be downvoted. –  Oct 03 '13 at 12:57
  • andrewb: my current understanding is that inline functions are anonymous functions that have name... the reason for this for function to be able to call itself in a recursion. Note that I am new to JavaScript and still learning. I have experience with C# and .NET though so I all this is a new shift in thinking. – matori82 Oct 03 '13 at 13:10
  • 1
    Closed so can't answer, but everyone here is confused. Anonymous and inline funcitons are not opposites. JS doesn't have inline functions. There are anonymous functions: `function() {};` and named functions: `function foo(x) {};`. Then, there are function *references*: `var foo = function() {};`. In that example, the reference is to an anonymous function! You can also reference a named function: `var foo = function bar() {};`. Finally, there are callback functions: `foo.test(function() {});` (again, anonymous - but could be named!) which can also be passed by reference (and are closures). – Ben Sep 26 '15 at 13:13
  • Don't close questions like this, otherwise ChatGPT will gladly answer it – Salvador Valencia Jun 06 '23 at 18:07

4 Answers4

37

First off, there doesn't seem to be a consensus definition for inline functions in JavaScript. I consider an inline function to be a special case of a JavaScript function. An inline function is a function assigned to a variable that is created at runtime instead of at parsetime.

Anonymous functions and inline functions are practically the same, in that they are created at runtime. The difference is that an inline function is assigned to a variable and so it can be reused. In that way, inline functions work the same as a regular function.

Pre es6, anonymous and inline functions were declared similarly to regular functions using the function keyword. With the advent of es6, anonymous and inline functions could also be declared with the more compact, arrow function syntax.

Function

function func() {
    alert ('function');
} 
$('a').click(func);

Inline Function

var func = function() { 
    alert ('inline') 
};
$('a').click(func);

// Alternative es6+ inline arrow function.
let func2 = () => alert('inline');
$('a').click(func2);

Anonymous Function

$('a').click(function() {
    alert('anonymous');
});
// Alternative es6+ anonymous arrow function.
$('a').click(() => alert('anonymous'));
Daniel Gimenez
  • 18,530
  • 3
  • 50
  • 70
  • FYI the link given regarding performance penalties is a bit inconclusive. Perhaps 7 years later it is safe to assume that there isn't a big difference in terms of performance? – bluenote10 Dec 17 '20 at 15:59
  • Agreed @bluenote10. At the very least it's off topic. – Daniel Gimenez Dec 17 '20 at 16:27
  • What do you mean by "created at runtime/parsetime"? All javascript functions are runtime objects; this is especially true since they are closures. If they happen to be erased from the program by being inlined or something, that's an implementation detail. – Quelklef Feb 27 '21 at 01:53
7

Inline function is somewhat different , quoting from wikipedia :

an inline function is a function upon which the compiler has been requested to perform inline expansion. In other words, the programmer has requested that the compiler insert the complete body of the function in every place that the function is called, rather than generating code to call the function in the one place it is defined. Compilers are not obligated to respect this request.

Javascript does not support the concept of inline function. But i found some references in web where callbacks like:

(function(){
  setTimeout(/*inline function*/function(){ /*some code here*/ }, 5);})
();

are called inline function. As you can see these function do not have any name either , so they are essentially same as anonymous function. I think ,since you are defining the function where you are using it ,it's been referenced by inline function but the name "anonymous function" best describes the notion.

CSStudent
  • 309
  • 2
  • 12
3

Anonymous functions are defined like this

var x = 1;
(function(x){
    // Do something
    console.log(x); // 1
})(x);

However, the definition of inline function is a bit unclear to me.

jhnlsn
  • 186
  • 4
1

Inline function

var foo = function (){ 
   alert('Hello') 
}
setTimeout(foo, 100);

Anonymous function

setTimeout(function(){ 
   alert('Hello') 
}, 100);

They are doing the same thing, but inline function is better when you want to reuse it. Anonymous is good for one-time use because you do not need to worry if its name will conflict with other variables, and it's shorter.

So it depends on your situation.

Pang
  • 9,564
  • 146
  • 81
  • 122
Chokchai
  • 1,684
  • 12
  • 12
  • anonymous functions are reused widely as part of OOP in javascript. One can see the coffescript generated javascript as well for evidence. – CSStudent Oct 03 '13 at 13:13