Javascript Coding Interview Questions- You Must Know Them

in a lot of javascript interviews you might get a coding exercise and you must do it directly there in the interview so you don't have any time to google or prepare this is why in this video i want to show you five most popular exercises that i got a lot on the interviews and asked also so you know how to solve them and in what direction they are going at all [Music] and the first exercise that you might get is create a function which stores inside the secret word which cannot be changed or accessed from outside and this is exactly a question to understand if you know closures in javascript or not so how we can proceed with this task the main idea is that we must store a function somewhere before we will use it in other case we can't really store a closure inside this is why it will look something like this so we create a function for example some function and we don't get any arguments here and inside we're creating a closure so here we will have secret and it is our secret string that we can't change from the outside because this is a closure we must return here a new function so we simply write here that we're returning a function and this function will return a secret word which actually means we have a function which returns a function now our usage will be for example getsecret and here we want to call our sum function and actually getsecret here is a function and we can call this function this is why here we simply write console.log getsecret and here we just call it just like normal function and the important point here that first of all we are assigning our sum function to the variable and only then we are using it only in this case the closure will work and we have access to our internal property if we will check in browser as you can see we are getting word secret but actually if we will try to access some function in the browser we simply get a secret we don't have any access to this local property secret because it is internal inside a function so if you get a question regarding closures on the interview you can show this code or if you are getting such tasks then you already can solve it the second popular question that i see a lot is how we can clone an object in javascript and you must understand that in javascript when we simply assign the same object to another object we just reference in the same object inside memory we are not creating a new variable which actually means our code for example for equals object won't create a clone our foo will be referenced our object and this is exactly the problem so the question on the interview is how we can really clone it so we won't mutate our object that we created before and two most popular solutions in javascript is by using spread operator or object assign and they are working exactly in the same way so what we can create here we can create a clone and here we can use a spread the main idea is that this brackets will create a new object now we want to spread all properties of the old object inside the new object but this will exactly create a clone this is why here when we cancel log our object and our clone after we will change our clone you will see that they are different for example here i can write clone foo equals full we check in browser and as you can see here we are getting our object which was not modified and here is our object with property full which means spread is the first solution how you can clone an object the second solution is by using object assign so we can write here clone equals and we're calling object dot assign and the important part here as a target we must provide an empty object in this case we are creating a new object and the second parameter here will be object so we will put all properties of the object inside our new object and as you can see in browser it is working exactly the same we didn't mutate the old object but we created the new object so the answer here is either spread operator or object assign the next question is typical to check how you can write code regarding for example strings or arrays how you can change them calculate things in them and so on and the typical question here is for example count vowels inside a string it doesn't mean that you will get exactly this question you can get a question like calculate all numbers inside the string and so on so actually how we can proceed here we need to find all our vowels so first of all we must create this function let's name it find vowels and we know that we are getting our string so first of all we must write what are vowels this is why here let's create them this is just an array of all possible vowels and this is a e i o and u so we have our array now we must check every single character inside our string and increase our counter which we will return so normally beginners will create here additional property like count and it will equal zero and now we need to loop through every single element of our array and we can do it in different ways for example by using for loop we can write here led character of our string dot to lowercase because actually we must be on the safe side we can get also uppercase and we can't really compare uppercase letter with our vowels array this is why here to lowercase is mandatory and actually is important if you want to pass an interview because you need to really check all these little cases and now inside 4 we have access to our character this is why here we can check ok if we have this character inside vowels array then we increase our counter so we can write if vowels includes to check if our character is there and here we are checking our character and if this is true we want to increase counter and of course we need around brackets for our if condition as a last step here we want to return our count this is why here i will return it and now let's check if it's working i'm reloading the page and as you can see we're getting three let's check this out we have here a e and o which means this code is working fine but actually this code is good for beginners at least you solve the exercise but we can make it better if we want to write some advanced stuff instead of this code we can try to reduce and if you don't know reduce is a functional way to write for loops and if you have more advanced level as a developer you must write dry and reusable code this is why it's much better to use here reduce to show that you are really good in javascript so what we want to do we want to take our string and make here two lowercase just like we did previously now we want to get an array to loop through every single element and for this we can use split operator just with empty string in this case we must get an array of every single character and now we want to calculate our counter so on our array we want to call reduce function and here we must provide two things first of all a function where inside we have our accumulator and every single character and secondly we will have here our counter and our default counter is zero and now inside we must write a code how we increase our counter and we can simply return the same code like it was previously for example with if bubbles and increasing of counter so i can copy paste this if here inside and here we want to increase our accumulator and this is our counter when it includes our character so here i can simply write if and inside accumulator plus plus and after this we must return our accumulator in other case it won't work let's check this out i'm reloading the page and we are still getting 3 which means our code is working correctly and this is much better because we wrote our code with reduce in a functional way but what is not good here we used if condition which is more imperative form of writing code and we can easily improve it just by using ternary operator so here we want to return our accumulator and actually we want to check first of all if our vowels includes our character in this case we want to increase our accumulator so here accumulator plus one and in other case we don't want to increase our accumulator and as you can see this code is much better let's check this out i am saving this and reloading the page we still get three and we can improve this code even more if we will remove this return and just write a single line here so we can write like this remove here our arrow function so it will be a single line and this code is really dry so if an interview you want to show that you are advanced developer you must not only solve the task but do it in dry and reusable way the next typical task that i saw a lot is reverse each word in a sentence so you have a sentence like for example welcome to this javascript guide and you really just need to reverse every single word in a sentence so we need to build reverse string function so let's create this function reverse string and we are getting here as our argument string and what we want to do first of all we want to split our string by space in this case we are getting an array of our words now we want just to reverse them and we have a reverse function inside javascript for this this is why here just dot reverse so we reversed our array and now we need to create a string back this is why here we're using dot join and here we're using space again let's check this out i'm reloading the page and we reversed all these words in a single line this is exactly what you must code for this task in the interview and the last task in the list is a little bit more difficult as you can see here we must define a function which takes an array of strings and returns the most commonly occurring string in that array and i saw this task on the interview enormous amount of times so you really need to know how to solve it and i want to show you here the beginning approach and advanced approach so first of all let's do a beginner approach so we want our function most common string and we're getting here our array of strings let's name it strings and here inside what we want to do first we want to build an object so the idea is that inside this object we want such structure so for example here is our object and inside we have a and we know that inside our array of strings we have a three times then we have here b for example two times and here c one time and after we generated such object we can understand what is the highest key in this case we must return a because here we have a value 3. so the idea is first of all to build such object and secondly we must find the maximum number inside this object so this is how typically beginners are solving such code so first of all here we must create our object common strings and it will be just an empty object and we will feel it after this we must loop through our string so normally people will use here for each and here we are getting every single string now inside we want to check if we already have such key inside our object if not we must assign one there and if we have such key then we must increase it so we're checking here okay do we have inside our common stream our stream that we are looking for and if the sequel is undefined so people are writing equals undefined then we want to create it so we're writing here command string our string equals one in other case we want to increase it so here will be our common string string plus one so here plus plus so let's check if this code is working at all so here i want to write console log most common string and we're providing inside our array of a b c and then we want a twice so here i save this and let's look in the browser and we're getting here undefined it is happening because here we didn't return anything and we must at least write console log so we want to see here our common string object that we created let's check this out as you can see our object is correct we have a twice b ones and c ones after this we must find our max value and in this case people will create two additional properties so here for example we have our max entry this is what we want to return this is undefined and here our max value and by default it is for example zero now we need to loop through every single element inside our object so here is for loop and we are getting common string and actually the naming is bad let's name it common strings here also common strings here and here so we don't have name collision and now we can write here for common string in common strings so we're getting every single element inside object here we want to check our value and just sign max entry if we need to so we're checking here if our common strings and here common strings are our key and it returns us a value and we're checking here if it is bigger than max value and our max value is 0 now then we want to reassign our max entry this is why inside we must reassign our max entry and here we want to store our string this is why it is just common string but also here we must reassign our max value so here let's write max value and we want to write here common strings common string so this will return our value in this case we are looping through every single element inside object and we are getting here maximum entry and now at the end we want to return this max entry let's check if it's working at all i'm reloading the page and as you can see we're getting back a which means our code is working correctly now if we will try here and write b several times we can see that we are getting back b which means we successfully solved this task and we're good to go but we can do it better because this is not an advanced approach this is why here i want to create the same function once more to show how i will write it let's name this function for example most frequent so we don't have a name collision and we're getting here our array so first of all we want to create this object which is our mapping so here what i want to get is our mapping and we will use here array reduce to get the same object this is why here array dot reduce and we know that here we are getting our accumulator and every single element and here is our function and at the beginning we have our empty object now inside this function we need exactly the same logic if we have a property we increase it if we don't have then we assign a one here this is why here we can write accumulator element so we're getting this object assign and here we're checking accumulator element if we have it then we need to increase it so here accumulator element plus 1 in other case we must just write their one and of course after this we must return our accumulator so let's write here return accumulator so this function will create a mapping for us exactly like this code on the top with for each after this mapping i want to do one more reduce to find exactly the value but here is the problem we can't really call reduce on an object the main idea is what i want to use here is object entries and actually here how it works we can write here object dot entries and we can provide here inside our object for example we have a1 and b2 as you can see object entries created an array of arrays from our object and this is exactly what i want because i want to call reduce on this array so here we have array with two elements first of all it's a key second layer value and exactly the same here this is why here what i want to do is return object dot entries and inside we must provide our mapping so this will create array of arrays and after this we want to call our reduce function again and we are getting here accumulator and every single element and here as a default value for our accumulator i want to create a ray because we have the structure of array of arrays and here i must provide null and 0. why like this this is exactly the same code like we have here with led max entry and max value so these are default values we need somewhere to start and this is max value 0 and we don't have any element so it is now now inside this function we will write exactly the same logic like an if condition on the top so we want to check here if our element 1 and this is our value is bigger than our accumulator 1. in this case we are checking the value that we have inside the accumulator and the value that we have here if yes then here we must return our element and if no we're returning accumulator and the second reduce that we wrote here will return us data in the same format like array with two arguments and actually we are interested here only in the first argument which will be our character this is why here i took the first element now let's check if it's working i will copy paste this console log and use here our function most frequent let's check this out i am reloading the page and we are getting here b and b which means this function is working exactly the same but it is being written in more advanced way as you can see the business logic inside this function stays the same but the code is more advanced also if you are interested in most popular javascript interview questions don't forget to check this video also you

Channel: Monsterlessons Academy

Views: 15,129

Keywords: monsterlessons academy, coding interview tasks javascript, javascript coding interview challenges, javascript solutions you have to know, javascript problems solving, learn javascript solutions, javascript coding interview questions and answers

Id: 0ltJGE5Y4Mk

Length: 17min 5sec (1025 seconds)

Published: Tue Dec 14 2021