CODEWITHSUNDEEP
javascript
user2487861
user2487861

Reputation: 35

Understanding Javascript Documentation

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.

Upvotes: 1

Views: 169

Answers (4)

Felix Kling
Felix Kling

Reputation: 817198

.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.

Upvotes: 2

ksbg
ksbg

Reputation: 3294

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

Upvotes: 3

epascarello
epascarello

Reputation: 207557

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.

Upvotes: 1

Esailija
Esailija

Reputation: 140234

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);

Upvotes: 2

Related Questions