How to know how many and which arguments a callback function can take

1

Hello guys, from the time i started Javascript this question has been bothering me a lot and i just cant a good answer anywhere.

So how do we know How many and Which arguments a callback function takes? for example -
while doing the array.map tutorial of FCC it showed that it takes a callback function with currentValue as argument.
But now when i was doing a challenge on CodeWars i ran into a problem that needed me to use array.map but i didnt know its callback function could take index as an argument too.

2

Hi @mahaveer0496

For built in JavaScript functions like map, the Mozilla developer network is a great resource

https://developer.mozilla.org/en-US/

As an example, the page about map shows exactly what parameters map expects aswell as what the callback function expects as well.

3

Isn’t there any other way to know them without looking at docs again and again, with the help of a method or something ? :slight_smile:

4

In addition to what @joesmith100 said, many code editors and IDEs provide calltips that inform you what parameters a function takes and what it returns. Something like this: getElementById(id: str).

5

Was just about to say that :grin:. Visual Studio Code is probably the best text editor for this.

6

Its simple. Just do a console.log(arguments) in your callback function see what’s getting called. For example

var arr = [1,2,3,4,5];

arr.map(function(){
  console.log(arguments);
});

You will get

{ '0': 1,
  '1': 0,
  '2': [ 1, 2, 3, 4, 5 ] 
}
{ '0': 2, 
  '1': 1,
  '2': [ 1, 2, 3, 4, 5 ] 
}
{ '0': 3, 
  '1': 2,
  '2': [ 1, 2, 3, 4, 5 ] 
}
{ '0': 4,
  '1': 3,
  '2': [ 1, 2, 3, 4, 5 ] 
}
{ '0': 5,
  '1': 4,
  '2': [ 1, 2, 3, 4, 5 ] 
}

As you can see the

  • 1st argument is the element in the array.
  • 2nd argument is the index of the same element in the array
  • 3rd argument is the array on which .map was called.

You can do this with any callback function and get to know the arguments.

7

@janschreiber do we have any plugin like that in Atom if you might know pls ? would be tremendously helpful :smiley:

8

I haven’t tried it, but a quick Google search points to TernJS:

9

Thanks a lot, it did work up to some extent but the tips it shows is like this

[1,2,3,4].map(f: fn(elt: ?, i: number, array: Array), context?: ?)

I checked the documentation, read it all and still have no idea how to read these (fn(elt:?) and stuffs :sob:
I guess i’ll have to read MDN top to bottom :sob:

10

Yeah, in the case of map this looks pretty intimidating. But I think it can still be quite helpful. I’m pretty sure you’ll learn how to read those hints.

11

@janschreiber :sweat_smile: how can i learn to read those hints , if there are no documentation.
I’m really very sorry for bothering you again and again :sweat_smile: but im sure other campers run into this problem a lot as well.

12

Those text hints are probably more useful when you know what the function is expecting, more of a reminder than a learning tool.

Visual Studio Code is a little easier to read, here’s a sample output:

[1,2,3,4].map(callbackfn: (value: number, index: number, array: number[]), thisArg?: any)

Unfortunately I don’t know of a better solution, the combination of MDN and VS Codes intelisense (their ternjs) has always worked well for me.

13

thanks @joesmith100 will try VS i guess :sweat_smile:

14

I’d suggest that whenever you encounter something that doesn’t make sense to you, look up the official documentation and try to match it with what you see in the calltip.
In our example, w3schools says the syntax is
array.map(function(currentValue, index, arr), thisValue)
So, the first argument fn is apparently a function that takes elt, i and array as arguments, context is optional (?) and can be of any type (?), while i must be a number and array is, well, an array.
.map() is probably one of the worst examples for explaining this. For a calltip like getElementById(id: str), you can conclude that there is one required parameter, id, which has to be a string. Those are basically just abbreviations.

15

highly grateful for all you help :smiley: , your .map comparison with w3School does make a lot of sense, i’ll keep doing this from now on :slight_smile: and one last problem :sweat_smile:
when i do document.getElementById() or document.querySelector and a lot more , i dont get the Autocomplete/ternJS guide, i tried reinstalling Atom + every Plugin , and even tried on different PC but no luck :sweat_smile: am i missing something or maybe i messed something ?

16

Hm, not sure. Works for me most of the time. But maybe TernJS just doesn’t support jQuery.

17

@janschreiber nope i’m not talking about jQuery :slight_smile: but thanks a lot for all your help. @joesmith100 too :slight_smile: Thank you both, I hope we can someday collaborate and acheive awesomeness.:heart_eyes:

2 Likes
18

IMO, we are already achieving awesomeness together: getting you up to speed is what this forum is all about. :heart_eyes:

19

Idk whether or not you feel comfortable with reduce, map and filter but doing this mini tutorial helped me learn:
http://reactivex.io/learnrx/

You only need to do up to 17. You actually build the callback methods with for loops, so that gives you some insight into what’s going on.