# Calculator Using Arrow Function Expression of ECMAScript 6 Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 2162 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="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;
}

}
```

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 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. Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team

Login to vote for this post.

Comment using (Author doesn't get notification)