What is the point of returning a function in this specific javascript code?

Question

I followed a tutorial online on how to build a calculator using javascript. The code uses a for loop to go through all the buttons of the calculator and 2 functions to add the numbers and to calculate. Here is the code:

for (var i = 0; i < buttons.length; i += 1) {

if (buttons[i].innerHTML === "=") {
    buttons[i].addEventListener("click", calculate(i));
}

else {
    buttons[i].addEventListener("click", addValue(i));
}
}       

function addValue(i) {
    return function() {
        if (buttons[i].innerHTML === "~" ) {
            result.innerHTML += "/";
        }
        else if (buttons[i].innerHTML === "x") {
            result.innerHTML += "*";
        }
        else {
            result.innerHTML += buttons[i].innerHTML;
        }
    };
}

function calculate(i) {
    return function() {
        result.innerHTML = eval(result.innerHTML);
    };
}

I want to ask why the 2 functions, addValue and calculate return functions? If i remove the return, the code will not work. Why?

to prevent this type of issue: [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Patrick Evans, Feb 05 '16 at 20:02
Simply put, the addEventListener function requires a listener. The docs [see here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) define a listener as "The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.". — william.taylor.09, Feb 05 '16 at 20:03

score 3 · Accepted Answer · answered Feb 05 '16 at 20:03

If you remove the return statement then addValue returns undefined.

addEventListener expects two arguments, the name of the event to run a function on, and the function to run.

If addValue returns undefined then you are passing undefined to addEventListener instead of a function.

score 0 · Answer 2 · answered Feb 05 '16 at 20:06

The line:

buttons[i].addEventListener("click", calculate(i));

At the moment it is called, it calls calculate(i). This then returns the function that will be called by the event handler. The event handler is not calling calculate(i) but the function returned from it.

score 0 · Answer 3 · answered Feb 05 '16 at 20:23

returning function throw a function is the property of JavaScript named closure ,generally with the functions we get a solved value through return statement but when our variable is not solved then we can pass a function as return value for further computation

score 0 · Answer 4 · answered Feb 05 '16 at 20:30

When a function returns another function or recives functions as parameters that is called High Order Function Wikipedia

This is just a feature that some languajes offer us.

e.g:

function addTextTag(idTag) {
  return function(text) {
      document.querySelector('#'+idTag).innerHTML = text;
  }
}

var containerChange = addTextTag('container'); 
 //calling addTextTag with first parameter return a function
 // that would receive another parameter
containerChange('tag says that');
containerChange('Now says this');
 //here we can call first function and pass directly parameter to the function returned
addTextTag('otherId')('Other Text');

What is the point of returning a function in this specific javascript code?

4 Answers4