Function Returning Another Function

Question

I’m building a calculator (https://jsfiddle.net/rwt3am1L/). The result of the calculation appears on the screen when I click the equals key, after that it gives a "reset", however, this "reset" is happening before the result comes out on the screen. I have an idea of what’s going on, but I don’t know how to fix it.

const reset = (res, calc) => {
  const cleanRes = res.textContent = "";
  const cleanCalc = calc.length = ""

  return {
     cleanCalc;
  }
};

const showResult = (res, calc) => {
  res.textContent = eval(calc.join(""));
  const { cleanCalc } = reset(res, calc);
};

I just wanted to call the function "cleanCalc" inside "reset", but it seems that every function is executed, because the response box is also cleaned through the variable "cleanRes".

If I do it this way, it works, but not the other way:

const reset = (res, calc) => {
  const cleanRes = res.textContent = "";
  const cleanCalc = calc.length = ""
};

const showResult = (res, calc) => {
  res.textContent = eval(calc.join(""));
  calc.length = "";
};

I just wouldn’t want to repeat code. It’s possible to do what I’m trying to?

Thanks for your attention!

Answer 1

First of all, your code had some unused, conditional ternary returns that make the code harder to read, so I recommend a clean-up. I made a Fork on your Fiddle with some changes that I hope will help make it clearer what I’m talking about (https://jsfiddle.net/wzh5atye/1/).

Regarding your question, your reset was wiping both the "memory" (which is its array calc) how much your "display" (which is the textContent of your <span>) and this happened after you calculated the result and display.

Making it clear: your return at the end of reset() was doing absolutely nothing in the code. The definition of the constant cleanCalc neither.

What I recommend to keep the reset() as a single method, is to leave the parameter res as optional, so you don’t need to clean the <span> when he’s not past:

const reset = (res, calc) => {
  if (res) res.textContent = "";
  calc.length = 0;
};

const showResult = (res, calc) => {
  res.textContent = eval(calc.join(""));
  reset(null, calc);
};

Answer 2

An easy way would be to keep the variable res.textContent with its content in the function reset. That way, only the calc will be reset and when the function result is called again the appropriate result will be assigned to the variable res.textContent.

Answer 3

If it was leaving before the result you would see the result, if it clears the screen and does not appear the result is because you are calling one method under the other. Use the method reset as user’s choice to clean the screen as a button or wipe only when he type another number. I believe you are starting, try to draw step by step your code, use existing calculators and understand what they do, then apply in your code.

EDIT1:
I saw your code now and is exactly what I said, the reset is cleaning the results, if you comment the reset it works normally.

const showResult = (res, calc) => {
    res.textContent = eval(calc.join(""));
    //reset(res, calc);
};

Addendum: according to the website of Mozilla (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) the use of Eval can be used for entering code, so avoid using it!