I'm solving the following kata: Write a program that takes as its first argument one of the words ‘sum,’ ‘product,’ ‘mean,’ or ‘sqrt’ and for further arguments a series of numbers. The program applies the appropriate function to the series.
I have solved it (code below) but it is bulky and inefficient. I'm looking to re-write it have a single function calculator that calls the other functions (i.e. function sum, function product).
My question: how do I write the functions sum, product, sqrt, etc so when called by the function calculator, they properly take the arguments of calculator and compute the math.
Below is the bulky code:
function calculator() {
var sumTotal = 0;
var productTotal = 1;
var meanTotal = 0;
var sqrt;
if(arguments[0] === "sum") {
for(i = 1; i < arguments.length; i++) {
sumTotal += arguments[i];
}
return sumTotal;
}
if(arguments[0] === "product") {
for(i = 1; i < arguments.length; i++) {
productTotal *= arguments[i];
}
return productTotal;
}
if(arguments[0] === "mean") {
for(i = 1; i < arguments.length; i++) {
meanTotal += arguments[i];
}
return meanTotal / (arguments.length-1);
}
if(arguments[0] === "sqrt") {
sqrt = Math.sqrt(arguments[1]);
}
return sqrt;
}
calculator("sqrt", 17);
It is quite simple for people of any skill level. This project covers the interactions with UI and key JavaScript methods. In this article, you will be taken through the various HTML and CSS elements along with Vanilla JavaScript and modern ES6 practices used in building a functional and responsive calculator, as shown in the image below:
While building the calculator, we used ES6 classes to organize our code. We also made use of vanilla JavaScript, CSS Grid, and Flexbox. With that, you have a fully functional calculator. The source code of our application is available on GitHub. Happy coding!
Here the root folder is named Calculator. According to standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively. Open the index.html file and paste the following code: <td> <input class = "button" type = "button" value = "."
The calculate () function accesses the DOM using the id of the result and evaluates the expression using the eval () function. The evaluated value of the expression is again assigned to the result. Note: The eval () function is used in JavaScript to evaluate the expression passed to it as a parameter.
You can just create an object with the functions you need, and then have the calculator function call the correct one.
var operations = {
sum: function() { /* sum function */ },
product: function() { /* product function */ },
mean: function() { /* mean function */ },
sqrt: function() { /* sqrt function */ }
};
function calculator(operation) {
operation = operations[operation];
var args = Array.prototype.slice.call(arguments, 1);
return operation.apply(this, args);
}
You can see an example of this in action on jsFiddle.
If you don't quite understand what I'm doing in my code, I reccomend reading about call
and apply
in Javascript and also about objects in Javascript.
You can pass your entire arguments list to another function using the apply()
method:
if(arguments[0] === "sum") {
return sum.apply(this, Array.prototype.slice.call(arguments, 1));
}
With your operations in separate methods:
function sum() {
var sumTotal = 0;
for(i = 1; i < arguments.length; i++) {
sumTotal += arguments[i];
}
return sumTotal;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With