Arrow Function Expression
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Arrow Function Expression</title>
</head>
<body>
<!--
Arrow functions use simple and concise syntax for creating function expressions.
function keyword, return keyword, and curly brackets may be omitted.
Limitations of Arrow Function Expression :
- Cannot be used as methods in objects. As they don't have their own bindings to 'this', 'arguments', or 'super'.
- Cannot be used as constructors. As calling them with 'new' throws a TypeError. They also don't have access to the 'new.target' keyword.
- Cannot be used as generators. As they cannot use 'yield' within their body.
- Cannot contain a line break between its parameters and its arrow.
-->
<h1>Demo: Arrow Function Expression</h1>
<div>
<h2>Arrow Function Expression</h2>
<p id="para1"></p>
</div>
<div>
<h2>Simplified Arrow Function Expression</h2>
<p id="para2"></p>
</div>
<div>
<h2>Usecase of Arrow Function Expression</h2>
<p id="para3"></p>
</div>
<!-- JavaScript code Starts here -->
<script>
/************************************************/
// Arrow Function Expression
// Find the area of the rectangle
//
let inputNum = 5;
let result = 0;
//Arrow function with no 'function' keyword
const factoNum = (num) => {
let fact = 1;
for (i = 1; i <= num; i++) {
fact *= i;
}
return fact;
}
result = factoNum(inputNum);
document.getElementById('para1').innerHTML =
`The factorial of ${inputNum} is equal to ${result}`;
/************************************************/
// Simplified Arrow Function Expression
// Example : Arrow Function with no function & return keyword, and no parentheses
//
let sqSide = 5;
let sqArea = 0;
// Arrow Function with no function & return keyword & no parentheses
// 1. Remove the word "function" & place arrow between the argument and body opening.
// 2. Remove the body braces & word "return" — the return is implied, if there is one line expression in the function block.
// 3. Remove the parameter parentheses, if there is only one parameter.
const getSqArea = side => side * side;
sqArea = getSqArea(sqSide);
document.getElementById('para2').innerHTML =
`The area of a square with side ${sqSide} units, is equal to ${sqArea} sq units.`;
/************************************************/
// Usecase of Arrow Function Expression
// Example : Conditional Expression for functions
//
const functionTrue = () => {
document.getElementById('para3').innerHTML =
"This message is from the functionTrue()";
}
const functionFalse = () => {
document.getElementById('para3').innerHTML =
"This message is from the functionFalse()";
}
let conditionDecision = false;
// Ternary conditional operator
conditionDecision ? functionTrue() : functionFalse();
/************************************************/
// Arrow Function
// Example : Multiplication table
//
let number = 4; // Multiplication table of 4
let tables = num => {
let result;
for (let i=1; i<=10; i++ ) {
result = num * i;
console.log(` ${num} * ${i} = ${result}`);
}
}
tables(number);
/************************************************/
// Output on console log looks like this:
//
// 4 * 1 = 4
// 4 * 2 = 8
// 4 * 3 = 12
// 4 * 4 = 16
// 4 * 5 = 20
// 4 * 6 = 24
// 4 * 7 = 24
// 4 * 8 = 32
// 4 * 9 = 36
// 4 * 10 = 40
//
/************************************************/
</script>
<!-- JavaScript code Ends here -->
</body>
</html>