Higher Order Functions and Passing Functions as Arguments

Question

I'm new in JavaScript and just trying to figure out abut this code of line.

As far as I know, the word operator is just a random word that could have been anything. But how does it know that the users is referencing to the word add/subtract/multiply/divide when those word also could have been anything else, and lets say its a bunch of other function in that .js file. How does operator return the right inputs?

function add(num1, num2) {
    return num1 + num2;
}

function subtract(num1, num2) {
    return num1 - num2;
}

function multiply(num1, num2) {
    return num1 * num2;
}

function divide(num1, num2) {
    return num1 / num2;
}

function calculator(num1, num2, operator) {
    return operator(num1, num2);
}

Do you mean if you do `calculator(1, 2, add)`, how does `operator(num1, num2)` "know" that `operator` is `add`? The function is an object. It doesn't need to be referred to by name. The passed function could be anonymous with no name. — Carcigenicate, Oct 04 '20 at 23:36
You are going to need to be more clear. This code doesn't return anything because non of the functions are being called ... — sinanspd, Oct 04 '20 at 23:36
Currently, this code does nothing. You need to call the functions with the right arguments and use their return values to see any effect. — Sebastian Simon, Oct 04 '20 at 23:37

score 1 · Answer 1 · edited Sep 30 '21 at 07:05

You need to call calculator to actually do anything.

See if this snippet helps:

function add(num1, num2) {
  return num1 + num2;
}
 
function subtract(num1, num2) {
  return num1 - num2;
}
 
function multiply(num1, num2) {
  return num1 * num2;
}
 
function divide(num1, num2) {
  return num1 / num2;
}
 
function calculator(num1, num2, operator) {
  return operator(num1, num2);
}

var a = calculator(3, 2, add);
var b = calculator(3, 3, multiply);
alert('a=' + a + ', b=' + b);

The key is to understand that in JavaScript, functions (like add) are first-class objects, which can be used as parameters just like integers (2 or 3), strings, etc. You can read more here: What is meant by 'first class object'?.

score 0 · Answer 2 · answered Oct 04 '20 at 23:43

It's the same as just using the variable under any name:

function foo(bar) {
    return bar + 1;
}

const something = foo(123); // 124

You use the bar name inside function, even though the external context doesn't know anything about that name.

In JavaScript you can pass function as any other values, which is makes it possible, for example, to use functions inside other functions:

function zoo() {
    return 3;
}

function foo(bar) {
    return bar() + 1;
}

const something = foo(zoo); // 4

Inside foo(), we call the something() function, even though foo() doesn't know anything about that function. It's all about the context and passing values.

score 0 · Answer 3 · answered Oct 04 '20 at 23:55

operator could be any function, not just one of the ones listed there. It could even have side effects. It all depends how calculator is called.

For example:

// exactly the same `calculator` function
function calculator(num1, num2, operator) {
    return operator(num1, num2)
}

// new `write` function
function write(num, fontSize) {
    document.write(`<span style="font-size: ${fontSize}px">${num}</span>`)
}

// execution happens here
calculator(99, 200, write)

Higher Order Functions and Passing Functions as Arguments

3 Answers3