Calculator Using Arrow Function Expression of ECMAScript 6

Rajnilari2015
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 654 red flag

In this article, we will develop a simple calculator using the Arrow Function Expression and see it's taste.


 Download source code for Calculator Using Arrow Function Expression of ECMAScript 6

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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)