-3

This is an example from "Eloquent JavaScript" book (I think you know the book):

function groupBy(array, groupOf) {
  var groups = {};
  array.forEach(function(element) {
    var groupName = groupOf(element);
    if (groupName in groups)
      groups[groupName].push(element);
    else
      groups[groupName] = [element];
  });
  return groups;
}

var byCentury = groupBy(ancestry, function(person) {
  return Math.ceil(person.died / 100);
});

What the code does is not very important.

The question is: the groupBy function has two different 'bodies', i.e. it does completely different things, as far as I can see. In the first instance, it does a lot of logic, but the second time it, first, has a different second argument (function(person) instead of groupOf, and, second, it just divides an array element property (which is the date of death of a person in an array of 39 people) by 100.

How can it be that the same function does different things? I do understand that
these two instances of the same function somehow cooperate, but what is the general principle of such cooperation?

Thank you!

Vadim Anisimov
  • 121
  • 8
  • 4
    You are confusing with function declaration with function call. The first one is defining what the function does. The second time you are calling it with parameters – abhishekkannojia Aug 24 '17 at 07:43
  • 2
    For the second time you are calling the function and passing a function as the second argument. – Sayan Pal Aug 24 '17 at 07:44
  • One thing you should do right now is learn how to use a JavaScript debugger. If you put a `debugger;` statement at the very top of this code, you can then load it in any browser with the developer tools open. It will stop at that `debugger;` statement. Then click the Step In button and see what happens. Keep clicking Step In after you look at the current state and understand it. Each time you click it, it will step to the next statement to be executed. Then you will soon understand what is happening. Here is a [guide to the Chrome DevTools](https://developer.chrome.com/devtools). – Michael Geary Aug 24 '17 at 07:51

2 Answers2

1

The code below is not "redefining" groupBy. It is simply calling it:

var byCentury = groupBy(ancestry, function(person) {
  return Math.ceil(person.died / 100);
});

The groupBy function receives a callback function as the second parameter (groupOf). You are there passing an anonymous function for that, which returns Math.ceil(person.died / 100);.

Alberto Trindade Tavares
  • 10,056
  • 5
  • 38
  • 46
-1

The first one 

function groupBy(array, groupOf) {}

is a function declaration where the name of the function is groupBy and it is globally accessable.

While the second one 

var byCentury = groupBy(ancestry, function(person) {});

is a funcion call. Here the returned value is assigned to a variable byCentury.

May be you got confused due to function(person) {}. Note that in Javascript we have First Class Functions which means that functions are treated like any other variable. Therefore function is passed as argument to the function groupBy

Rohit Agrawal
  • 1,496
  • 9
  • 20