Can someone explain why these array methods in Javascript have functions as parameters? An example would be:

newArray = oldArray.map(
 function(val){
  return val + 3;
 });

also this,

array.sort(function(a, b) {
 return b - a;
});

I am having trouble understanding how these functions and their parameters play a roll in the actual Array methods.

Can someone explain why these array methods in Javascript have functions as parameters? An example would be:

newArray = oldArray.map(
 function(val){
  return val + 3;
 });

also this,

array.sort(function(a, b) {
 return b - a;
});

I am having trouble understanding how these functions and their parameters play a roll in the actual Array methods.

• javascript
• arrays

• What else do you suggest to pass if not functions? – zerkms Commented Jan 17, 2016 at 5:44
• @helloMundo People made the effort to answer your really basic question, you could at least make the effort to accept one of their answers... – Hadrien TOMA Commented Mar 17, 2019 at 10:16
• @HadrienTOMA - to be fair to OP, if you read the answers in the mindset of someone who would ask the question (that is, presumably a beginner in JS), none of them are as basic as OP needed them to be. You and I may understand them but not without a bit of unmangling of the English used. (no disrespect intended to those answering the question). My point is I expect OP had a hard time trying to glean any information/understanding from them. – Mike Devenney Commented Jan 3, 2020 at 3:10
• @MikeDevenney Alright but when a time is spend for someone at its demand, I think it should be reactive to discussions and here the OP never said nothing after posting the question... – Hadrien TOMA Commented Jan 3, 2020 at 6:28
• 1 @HadrienTOMA - No argument with you there. – Mike Devenney Commented Jan 8, 2020 at 19:46

3 Answers 3

First you need to understand, all JavaScript functions are first class which mean:

• A function is an instance of the Object type
• A function can have properties and has a link back to its constructor method
• You can store the function in a variable
• You can pass the function as a parameter to another function
• You can return the function from a function

reduce(), sort(), map() and filter() are method of Array object that accept a callback function as its parameter.

For instance:

reduce()

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});

sort():

var items = ['réservé', 'premier', 'cliché', 'muniqué', 'café', 'adieu'];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

map():

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

filter():

function isBigEnough(value) {
  return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

• Reference: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

This callback functions are used to define behaviour. Like in sort it will sort array in order descending order. That's the definition how you want to sort array or filter array. You can play around it to understand it better or MDN has good examples.

var arr = [12,23,1,56,4,32];

alert(arr.sort());

alert(arr.sort(function(a,b) {
    return b - a;

} ));

Here in case of first example sort method will sort by paring first digit. In order to achieve correct sorting we need to pass our own logic.

You can use sort for various different sorting by changing logic in callback function.

Similar is true for other array methods you mentioned.

In above example of you want to do ascending order you need to

return a - b;

It is functional programming style

To (over) simplify concept is, these function will loop through all members of that array for you. It will just plug that function you pass in at the place it need

Let make an example with map

If you don't use map, the whole thing you need to write is

var oldArray;
var newArray;
for(var i in oldArray){
    if(oldArray[i])
        newArray.push(oldArray[i] + 3);
}

You could see that everytimes we do something like this. The thing that will change is the line in for block. So they just make a function for it

 function map(oldArray,ConvertToSomething){
    var newArray;
    for(var i in oldArray)
        newArray.push(ConvertToSomething(oldArray[i]));
    return newArray;
 }

var array;

//// The function you pass in here will became that ConvertToSomething above
var newArray = map(array,function(val){ if(val) return val + 3; })

Easy as that. Same go for sort and filter. sort will pick a pair of them for you. filter is like map but it will make an array that exclude thing you don't want by just return false or true