Arrow Functions

This JavaScript program demonstrates several types of arrow functions and their comparisons to regular functions.

ArrowFunctions.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
    <script type="text/javascript" src="ArrowFunctions.js"></script>
</body>
</html>

ArrowFunctions.js

// Ordinary function notation
function Hello1() {
	document.writeln("Hello1<br />");
}

// Assignment function notation
Hello2 = function() {
	document.writeln("Hello2<br />");
}

// Arrow function notation
Hello3 = () => document.writeln("Hello3<br />");

Hello1();
Hello2();
Hello3();

// Arrow function with an implicit return value
Hello4 = () => "Hello4";

document.writeln(Hello4() + "<br />");

// Arrow function with one parameter
Hello5 = (sName) => "Hello5 "+sName;

document.writeln(Hello5("XoaX") + "<br />");

// Arrow function with one parameter and no parentheses
Hello6 = sName => "Hello6 "+sName;

document.writeln(Hello6("XoaX") + "<br />");

// Arrow function with multiple parameters and lines
Hello7 = (sName1, sName2) => {
	var sCombined = sName1 + " & " + sName2;
	return "Hello7 " + sCombined;
}

document.writeln(Hello7("XoaX", "XoaX.net") + "<br />");

// Just a function for calling anonymous functions
function Caller(fnF) {
	document.writeln(fnF() + "<br />");
}

// Anonymous function
Caller(function() { return "Hello8"});

// Anonymous arrow function
Caller(() => "Hello9");

Core JavaScript

Arrow Functions

ArrowFunctions.html

ArrowFunctions.js

Output