In this article, we will develop a simple calculator using the Arrow Function Expression and see it's taste.
Introduction
In JavaScript, we can use the function inside an expression to create a function expression.In ECMAScript 6, they have introduced the anonymous Arrow functions or Fat Arrow Function that brings more readability to the code, has a shorter syntax of it's own.The new token that has been added looks like
=>
The name is FAT ARROW and it is use like
param => expression
To make the things more clear, let us have an expression which we are familiar with as
var result = function (parameter) {
return parameter*2;
}
The same can be re-written in the Arrow Function Expression way as below
var result = parameter => parameter*2;
C# or Java developers has already understood by this time, we think, that it is already their favorite LAMBDA EXPRESSION.Yes, that is correct and the name given is Arrow Function Expression or Fat Arrow
In this article , we will develop a simple calculator using the Arrow Function Expression and see it's taste.
Environment Setup
Let us first make the simple design as under
<html>
<body>
<fieldset style="width:280px">
<legend>Calculator Demo Using Arrow Function:</legend>
Number1:<input type="text" id="txtFirstNumber" /><br><br>
Number2:<input type="text" id="txtSecondNumber" /><br><br>
<input type="button" id="btnADD" value="Addition"/>
<input type="button" id="btnSUB" value="Subtraction"/><br><br>
<input type="button" id="btnMUL" value="Multiplication"/>
<input type="button" id="btnDIV" value="Division"/>
</fieldset>
</body>
</html>
Will give the output as
Using the code
Now, let us write the function
function Operation(operand)
{
var firstValue = parseInt(document.getElementById('txtFirstNumber').value);
var secondValue = parseInt(document.getElementById('txtSecondNumber').value);
var result = 0;
switch(operand)
{
case '+' : result = ( (x, y) => { return x + y; } )( firstValue, secondValue );break;
case '-' : result = ( (x, y) => { return x - y; } )( firstValue, secondValue );break;
case '*' : result = ( (x, y) => { return x * y; } )( firstValue, secondValue );break;
case '/' : result = ( (x, y) => { return x / y; } )( firstValue, secondValue );break;
}
alert(result);
}
Explanation
As can be figure out that, we have passed the values of the two text boxes to our new anonymous function and after computation, the results are stored into the variable result
So, let us simplify it as under
( (x, y) => {
return x + y;
})( firstValue, secondValue);
It creates an anonymous function, which receives the argument x and y and returns x + y. It then immediately executes the expression, passing the values of the x and y parameters as firstValue and secondValue as argument.Observe the way the two arguments are passed into the function.
The output is as expected.The result for Addition of two numbers is shown below
Reference
Arrow functions
Conclusion
In this article we have seen the usage of importance and usage of of Arrow Function Expression of ECMAScript 6 with a simple example.Thanks for reading.Zipped file is attached herewith.