Anonymous Functions and their syntax.
What is a function?
A function is a procedure or subroutine — it is composed of a sequence of statements contained within the function body that performs a task or calculates a value.
In JavaScript, functions are first-class objects, because they can have properties and methods just like objects. Functions also contain several values that can be passed to a function, and the function will return a value. To return a value other than the default, a function must have a return statement that specifies the value to return. There are several components that vary amongst functions. They are variables, parameters, symbols and characters.
Here is the widely used declared function–also known as a function statement–which has the following elements:
The declared function starts with the keyword function (line 1, first word), which declares that it is a function, followed by a variable (in this case, “hello” printed in green). That variable is the declared designation of that function, hence the term “declared function.” The designated variable is how the function will be called or invoked later on within a program. Between the opening and closing parentheses are where the parameters are positioned, and in some cases it is possible for there to be no parameters within a function. When parameters do exist between those parentheses, there can be one or more parameters, or even parameters with default argument values within those parentheses, and each parameter is separated by commas. Finally, another type of parameter that can exist within the parentheses, is yet another function. When a function is called within another function, it has many names, including a callback function or a promise. Both of which are known as high-order functions.
After the parentheses, there begins the function body, which–in JavaScript–starts with an open curly brace. Often times the curly brace will be the last character/symbol of the first line of the function’s code. The lines that follow will contain the “verbs” and logic that will direct the procedures and behaviors of that function.
Which leads to our main topic of discussion: What is an anonymous function?
An anonymous function (also known as a function literal, lambda abstraction, or lambda expression) has no declaration identifier as does the declared function. Also, anonymous functions can be considered a function expression.
Common uses for an anonymous function include:
Arguments to other functions:
In the example above the anonymous function (which has the function keyword, and with no parameters within its own parentheses) is passed to setTimeout.
The example below is a callback function:
In the above example, line 1’s declared function, sayHello will be the argument being passed within line 4’s first parameter, (helloMessage) which is within the parentheses of line 4’s declared function, greeting. Then, from line 8, the declared function greeting, is being “called” or “invoked” with the (sayHello) function as its first argument, and the string (“JavaScript”) as the second. In short, the second function calls the first function back.
Here is an anonymous function as a closure:
Breakdown of the above anonymous statements:
- The surrounding parentheses are a wrapper for the anonymous function
- The trailing parentheses initiate a call to the function and can contain arguments
According to the Mozilla Development Network website, a closure (also known as function closures or lexical closures) is the combination of a function bundled together (meaning enclosed) with references to its surrounding state, which is called the lexical environment. The point is that a closure gives you access to an outer functions scope from an inner function. In Java Script, closures are created every time a function is created, at function created time.
What is of interest to us is that the displayName() function has no local variable. A common use case for an anonymous function is as an argument to other functions. This was mentioned in my previous blog topic regarding Callbacks and Promises.
An arrow function expression is similar to what in other programming languages is known as lambda, introduced in ECMAScript 6 in 2015. It provides a shorthand for creating anonymous functions.
Examples:
The following is directly from the Mozilla Developer Network website.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Here is an example of arrow functions applied in ways that could be used within React.js
