Frontend interview question 2024 - javascript technical assignment

A walkthrough of a frontend interview coding challenge: implement a function that recommends books to a user based on friends' ratings, filtering by a minimum score threshold and sorting by average rating. The presenter builds a solution using JavaScript maps and sets, debugs test cases, and emphasizes efficient lookups and thorough testing.
Chapters
Hey guys, today we're going to be doing interview question for a frontend developer that was asked in 2024 by one of the companies with 1,000 employees for frontend developer. Okay, so the question is like that: we're given user and user has a rating which is books, so he has books, and he has a rating for every book with a score. So this is our user, and now this user have friends, and all the friends have also ID, and they also have rating. So rating is, um, books. So we're gonna, I'm gonna treat rating as books and it has a title and score again, so it's an array. And we are also given minimal score, so our function find_interests— so it's, it's kind of, we think about it as if it's a suggestion to the user that have minimal rating, which means this rating or above, a user will be interested in. But, and also with this rating and his friends have it in their rating with a score above. Okay, so there is couple of things here also. That what happened if the same book is found, all the friends have the same book. So what happened in this case is that we need to calculate average score for this. So for example, in our case, we see that our user have 5 friends, and if for example all the 5 friends, in this case, as almost all of them has Pride and Prejudice, for example, with— but it can be a different score. So for this user, the score is 0.8, and for this user, Pride and Prejudice, the score is 1. But what we want to do in this case is we want to calculate the average, the average score, which means 0.8 0.8 1, and we divide it by 3 because 3 users that I can see reading it, 1, 2, 3, and, and then the average score, then we're gonna compare it with an expected minimal score. Okay, and another thing also, we don't want to return, we don't want to return books that are we don't want to return books that the user already have. So if for example— sorry— if for example some of my friends already reading Crime and Punishment and I also have it in my rating, so I don't want it to be a suggestion. Okay, this is also important part. And we want to order them by score, which means, um, as a bigger score first. And, and, and if the books have same score Then we want to order it alphabetically. Okay, okay, so this is what we want and let's start. So, so to start I'm gonna have a result. Well, first, yes, so our user has rating and he has friends, so we can fetch them. I'm also gonna be adding So we want to add the books that we're gonna be collecting. And also, so in order for me, I don't want to go over because it's an array for a user. It is an array for a user, and for me to check every time And because I will need to, to check that the books are not in, in my user, so I would like to create const userBooks, and I'm gonna put there, um, again, also in this case in case I have a number of books. I'm not sure it's very— I'm not sure it's possible in this case. I don't think that user can have two, two of the same books. No, a user cannot have two of the same books. I don't— it would not make sense really to have same books with different score for the user. Okay, so this is my user books. Now we want to go over our friends. Okay, we want to, we want to iterate on our friends and for every— no, I don't, I don't want that. What I want is— so I'm going for every friend and— no, so I'm gonna have a result here, const result. I'm gonna have it, uh, right now. So, okay, so, so let's see, uh, now my user books, this is, uh, the books that I already read. So if it doesn't include user books, then only then I want to put— I'm going to create a map and I'm going to store there because I want to know by, uh, name. Okay, so I'm going to have a result with a title. Sorry, I'm going to have a, um, result. And I'm gonna put by title name, I'm gonna put my, I'm gonna put my rating, which rating is basically, it's a book, maybe it will be clear, but okay, so rating is a book, book title, okay. So I'm, I'm going over my friends and I'm asking if a book score larger or equal minimal scores, it means it is valid for me and it also is not included in my books. Okay, so because I don't want it if it is included. Okay, and now so I want for my title So I want to— first, I want to— I do want to store— I don't want to store all everything that it contains. I want to also store the number, the number of users. Okay, so for example, right now I'm adding a new and, um, and I want to add the count. So the count will be, uh, I'm gonna be adding all the book. So all the book, I'm gonna be storing the book and I want to add the count. So my count would be a number, number of— if currently, if I have it already in result, then I do count 1, otherwise count. So I want to count, I want to have a count. This is for the average, guys. So I want to count, count for every For every book, I want to count how many users had it. Okay, and I have here some issue. Where is this coming from? Okay, this is close. This is my book, this is my if So my if is here like that. Again, here I need to close that like that. Okay, so I'm collecting. And, and just also remember, when you have a lot of conditions So it's important for you when you're collecting some data, it's important for you to collect all the possible information that you, you can collect by some identifier. So in this case, our identifier is a title, and we're creating a map and we're collecting all the information. So We're collecting the score and we're collecting the number of users, that number of users, but also we're collecting the total score. So I'm gonna call it total_score just to remember why, what is it, why we need it. So we would need to calculate average. So when we need to calculate average, we want the number of users that have this book and we want total score. With this number, we will be able to calculate average. Okay, so this is for the average. This is what we want. So now So I'm going over all of the friends. I'm checking. I'm not, I'm not using my book, so I don't need to collect it. Okay, now I have total score and count. Okay, so now what I can do— we will do need to do a sort, but first I need to calculate an average. So we're gonna go over my result. Okay, so we're gonna go— so basically what we need to do is we're gonna do result for each book average book score, I would say. But this is a map, um, and I still Yes, so just object.keys of result. Now I don't, I don't need to delete it, but so for each key I'm gonna do for each key, I'm gonna have a book. Book is a result of key, and I'm gonna set, I'm gonna set average score with total score divided by count. Okay, at this point we have. And, and what we want to return, so we want to, we want to return keys of results sort. Now this is not So now we need to— yes, so we're returning. So we have a result and we want to sort it because we have average score. So we want to sort it by average score and then we want to return it. Okay, this is one of the, one of the ways. So I'm going of my keys is array of the names, and for every name we're calculating because we have average score. Oh, so what happens if the score is equal? Okay, so if the score is equal this will be 0. Okay, so if this is 0, we can, we can add sort by, um, result of B, a title, title It's, I think, toLocalCompare. toLocalCompare by title. So if, if the score is, is different score, if it is different if they are different from each other, then we will receive the number. I'm gonna sort by it. But if it is 0, if they are equal, then I want to sort by text. Okay, okay. So let's also const Suggestions, suggestions. Okay, I'm gonna return the suggestions. Return suggestion. So as you see that even though we have ChatGPT, we still need to understand as a problem and we need to be able to choose right solution and to correct improper solution. So, so it's not like, uh, ChatGPT doing everything while you can give him what you want and he will do it, but you still need to understand to fix it. And for you to be able to, to fix a bug his solution or verify a bug, it's even more harder. So I don't see any problem with using ChatGPT for your coding. Just, it should, should be done. Okay, so we're gonna print console.log. I want to print suggestions. But I also want— so I want to print result. I want to print result here. And it's a good question because it, um, it, it shows that— I can tell you that it shows a lot of conditions, and most of the questions about a lot of conditions come to the same point. Where you need to collect as much data as you can collect so you will have it. And eventually, with all the data that you have, you can generate the result as much as you want, as much as you want it. Okay, so just, just remember that. Okay, so I want to print suggestions and I want to print— I want to print our currentUser. This is what we're receiving. And let's also print a minimalScore, um, just to see that what we are having. And, and, and so here I have all the test cases. So it's different test cases, and we're gonna run this test case and here. So let's run it. Ratings— I think just something is not saved. Ratings— and which line is it? I don't even know. Ratings— let's find And upstairs, it's all— let's just see that everything is correct. Save again, run. Okay, so this is our suggestions. And let's just see if we have, uh, if we have any failed tests. I'm gonna search for failed. Okay, so we have one failed test case, and so let's see what we have. Failed test case. Okay, this is the one. This is a failed test case. So we have our user and he doesn't have ratings, and he doesn't have ratings, and he's— let's see, test case 5, test case 5. Ah, okay, this case 5, it's just an array. Okay, so I have 1, 2, 3, 4, 5. This is a 5, 1. So our user doesn't have ratings, he has number of friends here. Let's just put his friends here. Let's put his friends here. This is his friends, and this is what is expected. So, so let's check, uh, 0.6. Okay, so, um, 0.67. So, so first of all, we're taking everything. So we're taking— so the result is The Tale of Two Cities. Yes, because, uh, so he should receive this one, Tale of Two Cities. They all above, so they all above 0.6. I know she shouldn't receive this one, should be above 0.67. So yeah, but the average eventually— yes, so he should receive that because the average will be more than 0.67. And the Lord of the Rings, let's see The Lord of the Rings. What about Harry Potter? No, Harry Potter no. Okay, so The Tale of Two Cities and The Lord of the Rings. And a Lord of the Ring, his score will be higher So what is an average of— let's calculate the average. Let's see, so 0. 9 plus 0.6 plus 0.8 equal divided by 3, 0.67. So first should be The Lord of the Rings and then should be Tales of Two Cities. And let's see what we have. This is expected, this is a suggestion, and this is expected. Why? Why is it failed? Suggestion: first, Tale of Two Cities, and then The Lord of the Rings. I assume it is because we're dealing with— let's, let's print, let's print our result here. Okay, so we calculated the average here, so I want to print console.log result, and I want to print everything, so Yeah, a result. So let's see in case 5. Let's run it again. I'm gonna clean it. I'm gonna run it again. Let's search for failed. This is expected, and this is what I return. Okay, the Lord of the Rings average score And what does our calculator got? 0.67. A Tale of Two Cities. Yeah, but there is more than that. Okay, let's do JSON. ToStringify. If you see the problem, you are great. So I'm gonna run it again. Okay, we're gonna go for failed again. So this is our failed, The Lord of the Rings, and we're returning first The Tale of Two Cities. So for some reason A Tale of Two Cities, 06. A Tale of Two Cities. And so for some reason we didn't collect it for 3 friends. We didn't collect it for 3 friends. Ah, wait. Okay, okay, so here I don't really care if it's more because we're calculating the average. So this blocked me. Okay, so in this case, in this case, okay, so I don't want to say bookstore is larger than minimal store because I'm interested in average, so I'm gonna remove that. Wait, but I'm gonna take that. This I want, I want this because now I want to filter. Okay, so I want to filter my results. So before I'm doing the sort, now when I'm calculating the average, okay, so now I want to filter it. Okay, so, uh So now I want to filter the map. So we went to the average score. Now we calculated it, and now we're gonna go and put it on on, on the map. Okay, so for each of them we calculated average score. And now, okay, I'm gonna, I'm gonna— it's not really a result, a result. I'm gonna— it's a book map. Okay, book map, let's call it a book map. I want to call it results. Everywhere there is a result Bookmap, Bookmap, Bookmap, Bookmap, Bookmap. Okay, so this is my Bookmap and here I calculated— don't have result, I have a Bookmap. And now, okay, I'm some— now I'm gonna create array which is const result. And it's array. Okay, so now when I have an average, I can put— if it is, I push my book finally here, and now my result is array. So I don't need to, to do this thing. So my result is array, and now I can do just B and A and B and A. Okay, much, much better. Let's clear this and run that. Failed. Failed false. Yeah, but why does it even print failed? If result is true, then passed, otherwise failed. Ah. Okay, that's, uh, weird. Okay, so I just want failed or passed. Okay, so let's clear that and want to find failed. Okay, now I have another fail. Oh, I have a lot of fields. Now. How is it possible? I have a lot of fields now. Failed. Wait. Okay, so put if book average score larger equal minimal score, then I push the book. Yes. Here what expected, and I want to print result here. Okay, so I want to print actual, actual I'm doing it with you together, so live, actual. Okay, now let's clean and do it again. Let's go for one test case that is failed. Okay, all of them are failed. Oh, okay, I shouldn't return that. I'm sorry. Okay, I shouldn't return the full thing. So there is suggestions. Now we can sort it, and here we just do map to title. Whew. Okay, so run this again. Failed. Okay, we have no failed test. Okay, so this is very important to create your test cases, okay, with, um, with expected and actual, and, um, and be able also, um, to see when it's failed as actual and expected. This is very important. And then the basic thing that we do, we're printing the input and we're printing the output. It helps a lot. Okay, so again, what was here? What did we have? And what was important to look at? What was important to look at is, is the condition on which that you need to— you can have a same book in number of rents and and then the score should be calculated an average. So you needed to collect information. How do you calculate average? You need the total number of friends, you need the number of friends, how many friends have it, and the total score. And then you can calculate, and then you can calculate the average, and then you can sort by this average. Another thing was, is that you need to you don't need to add the books that user already have. And for that, the good thing would be is not, not to search every time in his rating, but to create a map or set with the names and then just check if it doesn't include. Okay, so you will not need to search in the map all the time, which is not good for performance. This is what we had. Um, what else? So collect as much information as you can by a unique identifier that you have. In this case, the title is our unique identifier. So we calculated as much information as we can, then we calculated the average, and then we checked, okay, so now if this average— this is our main condition. So we collected a lot of information, we calculated the average score, and now we see, okay, if the average score is equal or greater than the minimal score, which is passed, um, as a property, okay, then we add it to result. And then we can also sort. Again, about sorting, so sorting we do it by score. And again, but if two scores are equal, then it's usually— it's a common practice to do is to sort it by, um, ABC. Okay, so if they are equal, this is 0, so this condition is false, then it will go here. Okay, and it will do sort by title. Okay, and then important is how your result should look like, and the result in this case should be just a list of books by title. This is what was expected. Okay, so I hope you enjoyed it and have a great day.
More from Happy

Design System Interview - Design System for a kanban board , Fullstack developer, 2024










