Learning the reduce function part 3

This content originally appeared on DEV Community and was authored by DEV Community

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)

This content originally appeared on DEV Community and was authored by DEV Community

Print Share Comment Cite Upload Translate Updates

APA

DEV Community | Sciencx (2022-03-07T20:20:02+00:00) Learning the reduce function part 3. Retrieved from https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/

MLA

" » Learning the reduce function part 3." DEV Community | Sciencx - Monday March 7, 2022, https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/

HARVARD

DEV Community | Sciencx Monday March 7, 2022 » Learning the reduce function part 3., viewed ,<https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/>

VANCOUVER

DEV Community | Sciencx - » Learning the reduce function part 3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/

CHICAGO

" » Learning the reduce function part 3." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/

IEEE

" » Learning the reduce function part 3." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/. [Accessed: ]

rf:citation

» Learning the reduce function part 3 | DEV Community | Sciencx | https://www.scien.cx/2022/03/07/learning-the-reduce-function-part-3/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Which blog has the highest likes

pseudocode

The actual number of the highest amount of likes.

Related Posts