What is an anonymous function?


#1

Question

What is an anonymous function?

Answer

An anonymous function is a function without a name! Anonymous functions are commonly assigned to a variable name or used as a callback function.
Syntax for anonymous function:

function (optionalParameters) {
  //do something
}

Anonymous function assigned to a variable:

const myFunction = function(){
  //do something
};

Anonymous function used as a callback function:

[1, 2, 3].map(function(element){
  //do something
});

#2

Austensibly an anonymous function is an expression, and not a declaration. When we add a name before the parameter in the first example above, it becomes a declaration and would be freestanding. As such it would be hoisted at load time. Expressions are never hoisted and only get picked up on the second pass through the code by the parsing engine. Unless they are callbacks in an iterator or event handler they are always assignments and get bound to a variable.

If we use const then it becomes a permanent function. If on the other hand we use var or let our expression can be replaced. That means we can assign new functions to a variable (just don’t try to use let again, and we should know by now not to redeclare variables, so var is off the table, too). A simple assignment is all that is needed to replace an expression.

Consider what might be done with this construct…

lib = [x => --x, x => x, x => ++x]

This run took 275 iterations (of which 100 were zero sum) to play out. It might never have, that’s the risk we took, but it did.

x = 9;
while (x > 0) {
  x = lib[Math.floor(Math.random() * 3)](x);    // function expression invoked
  console.log(x);
}
Trial run
	10
	9
	10
	11
2	10
	9
	10
	11
2	12
2	11
	10
	11
	10
	9
2	10
6	11
	10
	11
	12
	13
	12
	13
	14
	15
	16
4	15
	14
	15
	14
	15
	16
3	17
2	18
	19
	18
	19
2	20
	21
2	20
	19
	20
2	21
	20
3	19
	20
	21
	22
	21
	22
6	21
	22
	23
	24
2	25
2	24
4	25
4	26
	27
	26
4	25
	24
	25
3	26
	25
2	24
	25
2	24
	23
	24
3	25
	24
2	23
	24
3	23
2	22
	23
	22
3	23
	24
	25
	26
2	27
	26
4	27
6	26
2	27
	28
7	29
	30
	29
	30
	31
	30
	29
	28
	27
	26
	25
	26
	25
2	26
	25
	24
2	23
	22
	21
2	22
2	21
5	22
2	23
	22
	23
	24
	23
2	22
	21
2	22
	23
	22
2	21
	22
3	23
	22
	23
	22
2	21
3	20
	19
	18
4	19
	18
2	17
	18
	17
	16
	15
	14
	13
	12
	11
2	10
2	9
	8
2	9
	10
3	9
	8
	9
2	8
	7
	8
	7
	8
	7
	6
	5
	4
2	5
	6
	5
	4
	5
3	6
	5
	4
	3
5	4
	5
	4
	3
	2
	1
2	2
2	1
	0
undefined	275

In case you’re wondering how I got that number, the left column contains repeat counts. I dropped the tabulated data into Excel and inserted a formula in the last, rightmost cell after labeling the left column “zeros” (sans the ‘defined’)…

=ROWS(zeros) + SUM(zeros)-(ROWS(zeros) - COUNTBLANK(zeros))

#3

How does this part work ? lib[???](x)
I know what Math.Random does.
I whas wondering how [] is used in this case and how this works ?


#4

lib is an arbitrary name given to the an array of function expressions. The line above accessess a random index of the array (that’s what [] is for) and invokes the function on the parameter, x.


#5

Technically if you assign it to a variable it’s not really anonymous because it can be called through the variable.


#6

Yes, but the function still does not have a name, and it is an expression, not a hoistable function. A variable is a name for a given reference, which reference may be any object, such as a function expression. Assignments are from right to left. The object on the right is an anonymous function. No further semantics involved.

Because they are expressions, we can write/insert them anywhere a value would appear.

list = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
lmap = list.map(x => 2 ** x)

The expression between the parens is an anonymous function.

// [1, 2, 2, 4, 8, 32, 256, 8192, 2097152, 17179869184, 36028797018963970]

#7

Sorry for trailing off-topic in this FAQ, but why would the creators of JS allow hoisting?


#8

You make it sound like a bad thing. It’s not. Just how JavaScript compiles declarations.

function foo() {
    console.log(a)
}
foo();    // undefined
var a;

These are hoistable declarations. Notice that no ReferenceError exception is raised?

SERP: what is hoisting?


#9

I don’t think it’s a bad thing; it could be helpful. But why are there some unhoistable things and some hoistable things?


#10

There is plenty of good reading in that SERP, above. Surely you can find out more about hoisting by doing a little digging on your own.