CODEWITHSUNDEEP
javascriptreduce
Beneficium
Beneficium

Reputation: 113

Return undefined when using reduce

Consider the following array:

const books = [
  {
    id: 1,
    name: 'A song of ice and fire',
    genre: 'Fantasy',
    author: {
      name: 'George R. R. Martin',
      birthYear: 1948,
    },
    releaseYear: 1991,
  },
  {
    id: 2,
    name: 'The lord of the rings',
    genre: 'Fantasy',
    author: {
      name: 'J. R. R. Tolkien',
      birthYear: 1892,
    },
    releaseYear: 1954,
  },
  {
];

Suppose I want to print the book with the longest title. The following works:

const longestBook = () => {
  const longestName = books.reduce((accumulator, book) => {
      if (book.name.length > accumulator.name.length) {
        return book;
      }
      return accumulator;
    });
  return longestName
}

console.log(longestBook().name);

My question is, why can't I return book.name / accumulator.name directly instead of using .name only when calling the function? If I try to do so, the result is undefined.

const longestBook = () => {
  const longestName = books.reduce((accumulator, book) => {
      if (book.name.length > accumulator.name.length) {
        return book.name;
      }
      return accumulator.name;
    });
  return longestName
}

console.log(longestBook());

Upvotes: 1

Views: 535

Answers (3)

Robby Cornelissen
Robby Cornelissen

Reputation: 97130

You'll be accumulating a string instead of an object, so you're entire reduce() method needs to be geared towards that.

That also means you'll need to provide an initial value for reduce(). By default it takes the first value of the array, which is an object, and not a string.

const books = [{
  id: 1,
  name: 'A song of ice and fire',
  genre: 'Fantasy',
  author: {
    name: 'George R. R. Martin',
    birthYear: 1948,
  },
  releaseYear: 1991,
}, {
  id: 2,
  name: 'The lord of the rings',
  genre: 'Fantasy',
  author: {
    name: 'J. R. R. Tolkien',
    birthYear: 1892,
  },
  releaseYear: 1954,
}];


const longestBook = () => {
  const longestName = books.reduce((accumulator, { name }) => {
    if (name.length > accumulator.length) {
      return name;
    }
    return accumulator;
  }, '');
  return longestName;
}

console.log(longestBook());

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370689

With reduce, you're passing along a single value - the accumulator - from the previous iteration to the current iteration. In decently-structured reduce callbacks, the accumulator should usually stay the same shape throughout the loop, so that logic can be performed on it predictably and consistenly.

If you try to return the .name only, there are problems:

  const longestName = books.reduce((accumulator, book) => {
      if (book.name.length > accumulator.name.length) {
        return book.name;
      }
      return accumulator.name;
    });

because

  • Because you did not provide an initial value, the accumulator for the first iteration will be the first book object
  • Inside the first iteration, you return a .name from either the first book object or the second book object. The name is a string, so this results in the accumulator being a string for the second iteration
  • In the second iteration, the accumulator is now a string - not a book object - so return accumulator.name does not return anything.

Upvotes: 2

Phil
Phil

Reputation: 164752

If the accumulator becomes the .name property, it will be a plain string and no longer have a .name property to compare in the next iteration.

You'd need to be consistent with your accumulator type from the very start by providing an initial value. An empty string would suffice...

return books.reduce(
  (acc, { name }) => name.length > acc ? name : acc,  
  "" // initial value
);

Upvotes: 2

Related Questions