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,
},
]
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)
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)
Top comments (0)