Arrow Functions

This JavaScript page demonstrates the various syntax for arrow functions, anonymous functions and function objects.

ArrowFunctions.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="ArrowFunctions.js"></script>
	</head>
	<body onload="OnLoad()">
		<pre id="idOutput"></pre>
	</body>
</html>

ArrowFunctions.js

// Functions with no parameters
function TwoPi() {
	return 2.0*Math.PI;
}
// Anonymous function assigned to a variable
const kfnTwoPi = function() { return 2.0*Math.PI;}
// Arrow function assigned to a variable
const kfnArrowTwoPi = () => { return 2.0*Math.PI;}
// Arrow function assigned to a variable without braces because it only has one line.
const kfnSingleArrowTwoPi = () => 2.0*Math.PI;

// Functions with one parameter
function DoubleIt(x) {
	return 2.0*x;
}
// Anonymous function assigned to a variable
const kfnDoubleIt = function(x) { return 2.0*x;}
// Arrow function assigned to a variable
const kfnArrowDoubleIt = (x) => { return 2.0*x;}
// Arrow function assigned to a variable without braces because it only has one line.
const kfnSingleArrowDoubleIt = (x) => 2.0*x;
// Arrow function assigned to a variable without braces and parentheses
const kfnNoParenArrowDoubleIt = x => 2.0*x;

// Functions with two parameters
function Sum(x, y) {
	return x + y;
}
// Anonymous function assigned to a variable
const kfnSum = function(x, y) { return x + y;}
// Arrow function assigned to a variable
const kfnArrowSum = (x, y) => { return x + y;}
// Arrow function assigned to a variable without braces because it only has one line.
const kfnSingleArrowSum = (x, y) => x + y;

// Function Constructors
const kfnTwoPiConstructor = new Function("return 2.0*Math.PI");
const kfnDoubleItConstructor = new Function("x", "return 2.0*x");
const kfnSumConstructor = new Function("x", "y", "return x + y");

function OnLoad() {
	// Output to pre element to get the correct formatting
	let qOutputElement = document.getElementById("idOutput");
	qOutputElement.innerHTML = "";
	// Functions without a parameter
	qOutputElement.innerHTML += "Functions with zero parameters\n";
	qOutputElement.innerHTML += "------------------------------\n";
	qOutputElement.innerHTML += "Standard Function: " + TwoPi() + "\n";
	qOutputElement.innerHTML += "Assigned Anonymous Function: " + kfnTwoPi() + "\n";
	qOutputElement.innerHTML += "Self-Executing Anonymous Function: " + (function() { return 2.0*Math.PI;})() + "\n";
	qOutputElement.innerHTML += "Assigned Arrow Function: " + kfnArrowTwoPi() + "\n";
	qOutputElement.innerHTML += "Single Expression Assigned Arrow Function: " + kfnSingleArrowTwoPi() + "\n";
	qOutputElement.innerHTML += "Self-Executing Single Expression Inlined Arrow Function: " + (() => 2.0*Math.PI)() + "\n";
	// Functions with one parameter
	qOutputElement.innerHTML += "\nFunctions with one parameter\n";
	qOutputElement.innerHTML += "----------------------------\n";
	qOutputElement.innerHTML += "Standard Function: " + DoubleIt(12.5) + "\n";
	qOutputElement.innerHTML += "Assigned Anonymous Function: " + kfnDoubleIt(12.5) + "\n";
	qOutputElement.innerHTML += "Self-Executing Anonymous Function: " + (function(x) { return 2.0*x;})(12.5) + "\n";
	qOutputElement.innerHTML += "Assigned Arrow Function: " + kfnArrowDoubleIt(12.5) + "\n";
	qOutputElement.innerHTML += "Single Expression Assigned Arrow Function: " + kfnSingleArrowDoubleIt(12.5) + "\n";
	qOutputElement.innerHTML += "Single Expression Assigned No Parentheses Arrow Function: " + kfnNoParenArrowDoubleIt(12.5) + "\n";
	qOutputElement.innerHTML += "Self-Executing Single Expression Inlined Arrow Function: " + ((x) => 2.0*x)(12.5) + "\n";
	qOutputElement.innerHTML += "Self-Executing No Parentheses Inlined Arrow Function: " + (x => 2.0*x)(12.5) + "\n";
	// Functions with two parameters
	qOutputElement.innerHTML += "\nFunctions with two parameters\n";
	qOutputElement.innerHTML += "-----------------------------\n";
	qOutputElement.innerHTML += "Standard Function: " + Sum(1, 2) + "\n";
	qOutputElement.innerHTML += "Assigned Anonymous Function: " + kfnSum(1, 2) + "\n";
	qOutputElement.innerHTML += "Self-Executing Anonymous Function: " + (function(x, y) { return x + y;})(1, 2) + "\n";
	qOutputElement.innerHTML += "Assigned Arrow Function: " + kfnArrowSum(1, 2) + "\n";
	qOutputElement.innerHTML += "Single Expression Assigned Arrow Function: " + kfnSingleArrowSum(1, 2) + "\n";
	qOutputElement.innerHTML += "Self-Executing Single Expression Inlined Arrow Function: " + ((x, y) => x + y)(1, 2) + "\n";
	
	// Function Constructors
	qOutputElement.innerHTML += "\nFunction Constructors\n";
	qOutputElement.innerHTML += "---------------------\n";
	qOutputElement.innerHTML += "Zero Parameter Function Constructor: " + kfnTwoPiConstructor() + "\n";
	qOutputElement.innerHTML += "One Parameter Function Constructor: " + kfnDoubleItConstructor(12.5) + "\n";
	qOutputElement.innerHTML += "Two Parameter Function Constructor: " + kfnSumConstructor(1, 2) + "\n";
}