3

I recently noticed that when using array.prototype.map(), my callback function may accept a third argument which is the array I'm mapping. I wonder if there are any use cases for this argument because inside the callback function, the array can be accessed anyways.

If I access the array I'm mapping inside the callback function, why/when should I rather use the third argument instead of just accessing the array?

example

Even though both methods should work fine in every use case I can imagine, I'd like to know which is the recommended way to do it and why.

Improve this question
1
  • 2
    In short, you may not have access to the array or you may not want to refer to it. Case 1 myArr.filter(x => x % 2 == 1).map((x, i, arr) => x+arr.length) - it's a chained operation, so after the first chain, you can't refer to myArr as your working data. You can stop the chain, assign to a variable and use that but it's a bit wasteful. Case 2: your callback is in another scope to the array you have callback = (x, i, arr) => x+arr.length in one place and you do myArr.map(callback) in another, so you cannot refer to the original array in the callback. Commented Oct 10, 2019 at 11:31

3 Answers 3

Reset to default
9

The third argument can be useful when you are chaining several array methods and need to access the intermediate state of the array (result of the previous operation):

const source = [-3,-2,-1,0,1,2,3,4,5];
source
  .filter(n => n >= 0)
  .map((n, index, arr) => {
     // arr contains only non-negative numbers
     // here you may have some logic that rely on it
     return n;
  })
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

5

EDIT: This answer was already (coincidentally) given in the flagged dupe. Check it out over there.

You may wish to reference the original array in a generic fashion. For instance, the callback may be a separate function, not just an anonymous one as is usually seen:

function arrayMapper(val, idx, arr) {
  // Some operations which use arr
}

myArray.map(arrayMapper);
myOtherArray.map(arrayMapper);

Note how each in execution of arrayMapper, the arr parameter refers to a different array in the outer scope.

Improve this answer

3 Comments

here still same result as example was on global context. Here still i can access original myArray without needing 3rd argument. See my answer which depicts its more likely use with object oriented programming using functions:
@vipulpatel Does the update make my intention clearer?
yes here i could see if were- use separate function for two different array. Could see my example as well with Object Oriented programming as now a days no one write code in global scope with ES6 or Typescript and many other provides class style programming
0

You are using normal global context where this need does not arise.See below example where you are not using arrow function (which preserve the current context) with Object oriented function programming. At that time it helps as third property. In first example, i cant access this.numbers in anonymous function as anonymous fun has its own context. Here it useful when you want to access original array for operarions

working example :

function Demo (numbers){
   this.numbers = numbers;
}

Demo.prototype.doMap = function () {
 return this.numbers.map(function(num, index, array) {
     return array[num]
  });
}

var obj  = new Demo([1, 2, 4, 2, 3]);

console.log(obj.doMap()); // will work

non working example if i don't pass array, it will throw error.

function Demo (numbers){
   this.numbers = numbers;
}

Demo.prototype.doMap = function () {
 return this.numbers.map(function(num, index, array) {
     return this.numbers[num] // cant access original number array using this (this refers to context of anonymous function)
  });
}

var obj  = new Demo([1, 2, 4, 2, 3]);

console.log(obj.doMap()); // throw error

Improve this answer

3 Comments

This is the second argument to map. OP is talking about the third argument given to the callback - the array itself arr.map(function (item, index, array) {}, thisArg)
Sorry !! I just got the question and i updated the answer :)
@VLAZ Hi, Now it makes sense ?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.