DEV Community

Cover image for Learning the reduce function part 3
Adam Preece
Adam Preece

Posted on • Updated on

Learning the reduce function part 3

Let us continue our reduce journey and look at other useful ways to use the very powerful reduce function.

Here I have an list of blogs with title,author,url and likes keys, feel free to look at the articles!


const blogs = [
  {
    title: 'React Best Practices ',
    author: 'Jean-Marc Möckel',
    url: 'https://www.freecodecamp.org/news/best-practices-for-react/',
    likes: 7,
  },
  {
    title: 'A Complete Guide to Flexbox',
    author: 'Chris Coyier',
    url: 'https://css-tricks.com/snippets/css/a-guide-to-flexbox/',
    likes: 5,
  },
  {
    title: 'Higher Order Functions In JavaScript',
    author: 'Vegibit',
    url: 'https://vegibit.com/higher-order-functions-in-javascript/',
    likes: 12,
  },
  {
    title: 'Node.js series Part 1. Create a Simple Web-Server with Node.js',
    author: 'Patrick Rottländer',
    url: 'https://patrick-rottlaender.medium.com/create-a-simple-web-server-with-node-js-6db13faab0f5',
    likes: 10,
  },
  {
    title: '5 Amazing GitHub Repos Every React Dev Should Know',
    author: 'Harshithrao',
    url: 'https://javascript.plainenglish.io/5-amazing-github-repos-every-react-dev-should-know-e893d7bfc261',
    likes: 0,
  },
  {
    title: '23 Places to Learn JavaScript in 2022',
    author: 'Niemvuilaptrinh',
    url: 'https://javascript.plainenglish.io/23-place-to-learn-javascript-2022-7c6b854928c2',
    likes: 2,
  },
]


Enter fullscreen mode Exit fullscreen mode

I would like to know:

  • Which blog achieved the highest amount of likes
  • The actual number of the highest amount of likes

Which blog has the highest likes

So what do we want?

An object with all the info, but the one which has the highest likes.

So our reducer will need to the previous blog and the current blog and compare their likes.


pseudocode

So my thinking is if the current blog likes are greater than the previous blog we return the current blog

Else we return the previous blog

Let us code that in our reducer. Congrats!

function blogWithMostLikesReducer(previousBlog, currentBlog) {
  if (currentBlog.likes > previousBlog.likes) return currentBlog
  else return previousBlog
}

const blogWithMostLikes = blogs.reduce(blogWithMostLikesReducer)
Enter fullscreen mode Exit fullscreen mode

The actual number of the highest amount of likes.

A bit tricker....

A challenge, why don't you try this before yourself.

Ask yourself what the end result should be

What should the starting value be?

What could we call the parameters on our reducer?

And write the pseudo-code

Then the actual code!

/
/
/
/
/
/
/

Did you get an answer?

If you did it a different way, great! Share it below!!!

I used a ternary here, but an if/else statement would also work nicely.

function highestLikesReducer(highestLikes, blog) {
    // I need to compare the highest likes with the blog likes, and I 
    // want to return a number with the highest likes or the new blog likes
  return blog.likes > highestLikes ? blog.likes : highestLikes
}
// I start with the first blog.likes number to compare
const highestLikes = blogs.reduce(highestLikesReducer, blogs[0].likes)
console.log(highestLikes)

Enter fullscreen mode Exit fullscreen mode

Top comments (0)