1

I know this is a silly question so please go easy. I'm having trouble understanding documentation in general such as this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Can someone explain the terms 'callback' 'currentValue' 'index' 'array' (in that context) and 'thisArg' in very basic layman's? I'm sure it's something simple but it's just not clicking in my brain, and it's making learning the language on my own very difficult so I would greatly appreciate the help.

3
  • 3
    I don't think it's a silly question, nor do I agree with the votes to close. It is broad, but not overly broad that a simple (technical) answer can't cover it. Commented Feb 17, 2015 at 20:55
  • 1
    callback and thisArg are simply labels that refer to the arguments that are supposed to be passed to .map. The documentation could also say "The first argument....". Similarly currentValue, index and array are labels for the arguments that are passed to the first argument (callback). Commented Feb 17, 2015 at 21:15
  • Hi, thank you so much for your answers, I'm extremely grateful and really didn't expect any response at all! I knew it would be something obvious but I just couldn't work it out for some reason. Thanks to everyone's answers and then having a play in a js console I now seem to have got my head round it. Commented Feb 20, 2015 at 20:53

4 Answers 4

3

I'll try to make it very simple and understandable.

A callback function is passed as an argument to a function (like age is passed to foo in the example below) and is executed after a certain event. It is called callback because it is executed not before the parent function (to which the callback function was passed to as an argument) itself is executed.

For example:

function foo(age, function callBack()) {
    print("I am " + age + " years old");
}

function gender() {
    print(" and male");
}

function certainEvent() {
 foo(99, gender);
}

If you now call certainEvent(), the result would be:

I am 99 years old and male
Sign up to request clarification or add additional context in comments.

3 Comments

Thank you for the detailed and easy to understand explanation, I am finally getting my head round it. :)
This isn't syntactically valid javascript
I am aware of that. There is no need to use javascript syntax to explain the principles of callbacks.
2

callback is a function that you pass to map. It will be called with the arguments currentValue, index and array.

For instance using a callback that logs:

   [1, 2, 3].map(function(currentValue, index, array) {
        console.log("currentValue", currentValue);
        console.log("index", index);
        console.log("array", array);
   });

Logs:

currentValue 1
index 0
array [1, 2, 3]
currentValue 2
index 1
array [1, 2, 3]
currentValue 3
index 2
array [1, 2, 3]

Note that the function doesn't have to inline, this is equal:

   function mapper(currentValue, index, array) {
        console.log("currentValue", currentValue);
        console.log("index", index);
        console.log("array", array);
   }

   [1, 2, 3].map(mapper);

3 Comments

... and thisArg, if supplied (which is fairly unusual) supplies the arguments which will be this when the callback function is executed.
@Esailija @Scott Sauyet Thank you for the explanation. I've had a play around in the console and am I right in thinking when you do something like the below example the num argument is the currentValue part? If yes I was wondering what you can do with the index and array arguments? As in what sort of situation would you use those? var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; });
I've spent a lot of time working on a functional programming library which doesn't supply these by default; I in fact think it's often better not to have them. :-). That said, they can be useful, especially the index: var stretches = arr.map(function(el, idx, list) {return idx == 0 ? "start" : el >= list[idx - 1] ? "increasing" : "decreasing";}). Applied to [3, 1, 4, 1, 5, 9, 2, 6], this yields ["start", "decreasing", "increasing", "decreasing", "increasing", "increasing", "decreasing", "increasing"]. But they're often not needed.
2

.map is a function. Function usually accept arguments. The part you are referring to describes the arguments and their purpose in more detail. Lets have a look at the signature of the function:

arr.map(callback[, thisArg])

This tells you that the function takes two arguments, where the second argument is optional (indicated by the [...]).

The documentation chose to name the first argument "callback" and the second argument "thisArg". It could have chosen different names ore no names at all and simply referred to the "first" and "second" argument.

Of course the chosen names carry some meaning, but this is only secondary. Naming them at all is done to be able to easily refer to those arguments later in the documentation. Whenever you see callback (i.e. formatted as code) in the documentation for .map, such as

Value to use as this when executing callback.

you know that it refers to the first argument.

Similarly "currentValue", "index" and "array" are labels for the arguments that are passed to the first argument of .map ("callback"), since that argument is supposed to be a function as well.

currentValue by itself doesn't really mean anything. However, in the context of .map it refers to the first argument that is passes to the first argument of .map. It's meaning is described in the documentation:

The current element being processed in the array.


This follows the typical way we write functions. When you declare a function, you usually give the parameters names. For example:

function first(arr) {
    return arr[0];
}

Here I am giving the first parameter the name arr so I can refer to it more easily later. The same happens in the documentation: The parameter/argument gets a name so it can easily be referred to later.

Comments

1

The map method has two arguments. The callback and the scoping parameter.

The callback is the function that you set that does the processing. It has three arguments that give you the state of the current iteration as map loops over the array.

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

function callback ( currentValue, index, array) {
   console.group("callback called");
   console.log("currentValue:", currentValue);  //Current value of the index aka `array[index]`
   console.log("index:", index);  //current index of the loop (think of it as a for loop (var i=0; i<array.lenght; i++) It would be i.
   console.log("array:", array);  //The array you are looping over..aka a reference to myArray 
   console.groupEnd("callback called");
   return currentValue * 2;
}

var result = myArray.map(callback);
console.log(result);

And the [] in the method declaration [, thisArg] states that that parameter/argument is optional.

1 Comment

Thank you for that explanation, if the currentValue is like a for loop, can I put in a number as the second argument to start the iteration at a different point in the array? (hope that makes sense!) Or are those arguments purely there so you can see the actual index and array being executed?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.