7

This is my first cut:

const planLimits = {plan1: {condition1: 50, ...}}

function initialisePlanLimits(planLimits) {
  const limits = new Map();
  Object.keys(planLimits).map((planId) => (
    const limitMap = new Map(Object.entries(planLimits[planId]));
    limits.set(planId, limitMap);
  ));
  return limits;
}

The linter flags this error: error Expected to return a value in this function array-callback-return

So I changed to this version:

function initialisePlanLimits(planLimits) {
  const limits = new Map();
  Object.keys(planLimits).map((planId) => (
    limits.set(planId, new Map(Object.entries(planLimits[planId])))
  ));
  return limits;
}

It throws another error Unexpected parentheses around single function argument having a body with no curly braces arrow-parens

My questions:

1) I reckon I can fix my first version by sticking in a return null within the curry bracket. But is there a better, more elegant way? A bogus return statement does not make sense in this context

2) Why the second version fails? Isn't it equivalent to the first version?

3 Answers 3

11

If I use forEach instead of map, it will not cause the array-callback-return lint error

 Object.keys(planLimits).forEach((planId) => (
    const limitMap = new Map(Object.entries(planLimits[planId]));
    limits.set(planId, limitMap);
  ));
0
1

Well, accepted answer advocates about using 'forEach,' which is true. Please read below explaination from ESLint documentation,

Array has several methods for filtering, mapping, and folding. If we forget to write return statement in a callback of those, it's probably a mistake. If you don't want to use a return or don't need the returned results, consider using .forEach instead.

-1

TLDR: ESLint and Function Return Values

This issue is caused by not returning a value when using map(), see how the results are expected according to the docs...

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. (Source: MDN WebDocs.)

Demonstration of Issue in JavaScript

With this code sample of JS, which shows a group of elements...

  var newarray = [];
  array.map( (item, index) => {
      newarray.push('<li>' + item + '</li>');
  });

I get this error...

  Expected to return a value in arrow function  array-callback-return

The error goes away if I add a single return to the above function, like so :

  var newarray = array.map( (item, index) => {
      return '<li>' + item + '</li>';
  });

`map()` - So why should I use it?

You can clearly see elsewhere, too, on MDN Docs, that what is returned is, "A new array with each element being the result of the [return value of the] callback function." So, if you are using map(), it's also a very good idea to also use return returnvalue!

map() is a powerful tool. Don't throw that tool away.

3
  • The linked thread does not support this answer. It talks about Pascal, where a "function" is distinct from a "procedure". In JavaScript, both are called "functions", whether they return a value or not.
    – Thomas
    May 25, 2021 at 13:34
  • @Thomas You are right! Thanks for pointing that out. I was just in the process of editing this answer, so I omitted that section, and also corrected the Map() MDN weblinks to correctly point to map() func, and cleaned up my example a bit more. May 25, 2021 at 13:44
  • perfect answer, i don't know why it has negative score
    – Ashu
    Aug 11, 2022 at 11:19

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.