MERN Stack Interview Questions - Part 1

hello everyone so it's the start of a new weekend and today we are going to cover some popular monster interview questions now basically these are the questions which i have actually faced in my previous interviews and i am going to just share answers for them like they were asked frequently by a lot of emperors and i was looking for it for jobs so i hope some of the answers of these questions help you all too so without further ado let's start off with the popular month's tag interview question series [Music] [Music] so we are first going to cover front-end questions in our first part of our series and in the second part we are going to have the back-end questions because monster basically covers express react and node from that a lot of questions are asked in web development domain like in html css javascript then questions are asked on react and then questions are asked on back end like on node and mongodb so today i'm going to cover basically the questions asked in html css and just then in part 2 we'll cover questions on react and in part 3 with our questions one node i think so let's start off with the questions on front end now usually the interview starts off with the basic questions like uh what are web development basics uh how do you structure your page and some questions on html css now a few questions which are asked frequently are what are the new elements added in html5 so i'm going to go over some a few tags which i added in html5 which are newer ones and which are quite useful so let's start off with a simple code pen now the first tag which we can cover are all the input elements like the new input elements which were introduced in html5 the first input element which was introduced recently was color picker so you have once you save your input tag with the type color you have a color picker like this and you can select a color now in order to get the value which is uh selected like one so you select it you can have a function like on change and you can write off or pass a function here for example let's say we have a function which is supposed to print selected color by the user and then pass the context that is this keyword because it doesn't work without that directly now once you have a function written like this you can define the function and make some changes so that's our function here in which we pass the value of context and what we can do is first we can log the value just to check the value passed by color pick so the value is passed in context dot value like the input panel dot value keyword and we can hit save now if we go to the console tab and let me just clear the tab as well so if i pick okay we haven't defined a function here so let's define a function and hit here now if i pick a color from this tab so let's pick i don't know blue color and select or click on the webpage we get a value paste and a color value next thing is uh just to show the user the value we can just have a simple alert which is like your selected color piece and the contextual value which we have here we can print that as well so it's safe we can clear the console again and once a user selects any kind of value here and clicks on the page okay okay the comma cannot work in others we need plus sign now let me save and repeat the process again if i select some kind of value here and click on the tab as you can see we have the x color code so this is called x color code if you type x to rgb you will get your color code back so there are a lot of converters like that and you can check the color code as well so that's basically how html by color picker works using input now let me just comment out this code and proceed ahead with the next input so another input which we have is i think uh date picker so if i type input type as date you will get a syntax like this so let me just close the console and if you click on this calendar tab here you can select any kind of date that you want and that date will get refitted in the date figure again in one change handler you can handle the date value and take it in your code another import which we have is email so if you assign a type as email to a value and if you type some name the email addition will work internally and if i bring my mouse here as you can see we will get a like a dialog if you can see here please input enter it and if you have some kind of code like this then it will ask for dot com as well so this is how you can have a email validation and once on clicking on submit this type email checks for the validation and prints our box to the user now the next input that was included in html5 was number so you can have a like restrict the user input to one memory value only using number tab and using plus minus you can increment and increment now there are a lot of other input values which you can check out these are just some of them then other than that we had other elements as well some of the elements which were introduced which are media related elements in html so let's just cover a few media elements now one element which was added by the html community was video tag now video tag is especially useful if you want to display basic or video player in your page without writing a lot of code so previously this was handled using flash player but in the addition of a video tag that got handled easily so i have a video here from pixels so this is the video which i am going to use so this is a free copyright free video i uploaded this uh video to cloudinerry so that i have like a url let me just open that url here so this is the url which i have so i'm just going to copy the url and use it in my video tag so if i type a video tag here with src attribute so src is for the src url and then we can set the controls as well is equal to true and let's give it a width of around 200 x and it's safe so as you can see we have a small video player here and let's get a width of 300px and once you click on the play button the video will start playing so that is basically how you can have a video like video player in your code so you can go full screen and other stuff as well so these are our built-in controls which are present in video player we just have to pass controls is equal to true in our video tag uh similarly we have audio tag as well which you can go through then there were some miscellaneous tags as well like a progress bar so let me just add a div here so progress bar can have a value or a max value so if you don't set any kind of value and just show up progress it will show a loading indicator like this now if i want to set a specific value in that case i'll i can set a max value to let's say 10 and then the current value using value keyboard so let's say if i add a value as one the progress bar will show the value so let's keep it a value at 10 and max 500 so in case of 100 as you can see the 10 value will get reflected if we change this to 50 the progressive will get uploaded to the half of the value so these are some of the like miscellaneous or interesting elements introduced in html5 other than that we have some other elements as well like if you want to define the header of a site we have the header tag so you can have a header tag at the site header and you can specify all the elements at the top of the page as well then we have a nav by which you can build a navigation bar at the top i am not going to build an app but these are some of the tags by which you can build the elements at the top of the site so yeah those are some of the elements then we have footer then you have articles and a lot of html tags as well so html5 so you can showcase those to the interior in case you need to if you want to show all those anyways so before i proceed ahead i just want to comment the code so let me just comment out all this code here and let's move on to our next part of our series i think the comment is not okay the current is closed properly now so we can proceed ahead to the next question in this series uh which is different ways to center a diff in css so let's say uh you have a div there with a class let's say element block let's say just to show this div i'm going to copy this element block class i'm going to add our width and height to this element so let's say this india has a width of 200 x height of 100 pixels and a background color so background color off let's say light blue border one x solid and let's give it a cover of cyan so let's say i have a table like this will be better okay so let's say i have a div like this with some border and i want to center it so that's what examines us now we can have a class here let's say center class and i am supposed to write some code here by the way that you get centered the first way in which you can horizontally center it is using margin auto so that they will get horizontally descended but uh if you interact that you want to that he wants the diff to be centered horizontally as well as vertically then in that case so there are three different ways in which uh centering occurs there are a lot of ways out of these three were popularly used in html code so before that uh let me just add a parent element to digit so we have element container list and the properties which you are going to apply are going to be applied to the parent container so the first way in which uh you can center this device so let me just switch the center class to the parent element so the popular way which was used before news css properties were introduced was using uh transform translate let me just showcase that method so for that you specify the position of the device absolute then you apply a fifty percent uh top spacing and fifty percent from left so the dv is somewhere at the center but not at exactly center now to bring the diff to exact center we use a property called as transform and in transform we specify translate property within which we specify negative 50 on x and y axis so that basically centers the div so this was the like the earliest known method which was popularly used for centering an element this is not currently used widely the method which was used widely after introduction of flexbox was using display flex so let me just showcase that for that uh the element container should have a height of 100 without which the element won't get centered vertically so let's give it a height of hundred years now after that uh if i want to center my tip what we used to do is just to set to specify our display property as flex then justify content is a property which we used to use and which to set the property asset once i have justified content center the dv is centered horizontally now in order to center study vertically we use align content align items property to center and by that the div gets centered vertically now this was a popular way of centering this like till 2018 after that we had our introduction of grid system so after grid system was introduced there is a simpler property like we don't have to use three different properties or in this case four different properties to center it you can do it they're using just uh two properties so for that uh we go for display as grid and then we use a property called as these items and we have a value as center so this is the most uh shortest or the least css properties way by which you can center radius using display grid and place item center so yeah these are the three ways you can center an element uh using css i hope uh that was useful as well let me just comment it out before you proceed ahead to the next question so those are the three ways you can center our div using css then uh we move over to javascript questions now javascript may uh we usually have questions like the concept of scopes then variable data types what are what is the difference between undefined and null so these are some of the popular questions but uh these are answerable easy uh the question which is uh quite uh like students find difficulties what are closures in javascript and give an example of closure in javascript so as you can see the definition of kujat is the closures are basically nested functions which are able to preserve the data now usually interviewers ask the definition along with an example so a good example for this or like the most basic examples for this is on w3schools i'm just going to showcase that here so let's say i want to explain closure using an example so this is what i can showcase so let's say i have a function which is supposed to increment some values within that i have let me just correct now so let's say i have a variable let's say our number your whole initial value is one then uh as i mentioned like closures are nested functions with preserved data so this variable is let's say the preserved data enclosures usually return a nested function so let's say i have increment function then there will be a nested function which is returned by this external function so for that we need to return some function so let's say i have a written statement with a function here within which this number is incremented by a value of let's say one and then we can write our code to print the updated earlier so we can write the current once i have this function as you can see this function is itself returning a function so if i have a instance of this function like let's say constant num or instance of functions let's say which is increment so this is my function definition and now i am calling the function and if i try to log the instance or this function instance using console.log for instance and if we log this value here let's go to console and let's clear so this is what we need so basically this increment function is returning this function right so the value that we have in this variable is the return function itself which is the function which is supposed to increment the value so i think we can rename this to something like let's say add now if i call this uh add function once and i hit save let me just clear the console and as you can see the output that we get is the current value of number is 2. how did this happen the value of the one and number was incremented by a value of 1 that is why the current value was printed as 2 like this is where things are simpler now the part where things get complicated is when i call this add function again once i call my add function again and it's safe so my expected value will be 2 but if you see here now this was the previous output so currently this is what we get so the value of the number was 2 when this add function was called and after my add function was called again the value got changed to 3 instead of 2. so how did that happen is this number uh variable which we have here its value did not get ended or did not run out or denoted reset once the function call was completed in this case so once this add function was called this value which was incremented to what preserved and next time when the add function was called that value got incremented by a factor of 1 and the value got incremented to 2. so if i call this function again on the third time and if i save so the console output as you can see first was two then it gets added to three then it gets updated to four so this is basically what our closure means so we have a prism or internal variable whose value is preserved and it returns a function which is acting on this preserved value in some way in this case this value was incremented by one so this value got preserved even when the function scope was complete or the call was complete and on subsequent calls the value remains or the value which was incremented remains in the scope and it gets incremented after each call so that is a basic example of closure which you can give to your interviewer now there are all possible practical examples as well but this is the most simple example by which you can explain a closure to an interviewer so that is what closures are in javascript now another uh question which uh interviewers might or might not ask is what is function curry so carrying is basically uh like a variation of closure which you can explore as well so function cutting is basically a way to transform a function so let's say i have a function which is supposed to add three values let's say a b see and you are just returning or some of these values so we are returning let me just close the console for some time uh you are just returning some of these three values and the way to call this function is you can just log this output so console.log and call the function here with some values let's say one two three now if we go to the console we will have some values printed here so let me just clear it and save so as you can see the output that we get is addition of these three numbers which is six now this is the easier way to handle addition but there were some people who wanted to make our life difficult and they wanted to have some fancy way of doing this that is why cutting was introduced so in case of carrying uh what we can do is instead of adding these functions like this or having a function addition like this another i don't know if it is elegant or whatever kind of face so we have an instance which is let's say adder which contains the first value let's say the value c then we have a return with a function which takes the value b then within that we have another written i don't know why with a element a and then you return the sum which is a plus b let's see why did we do it i don't know but that is how function carrying apparently works so the way to use this function is first you create a instance one which is supposed to call the external adder function so i'm just going to explain the instances first so let's say you pass a third value which is let's say three first and you log the instance one value first using console.log and if we go to the console this is what we had we get a function which is function b with a return function in basically the adder function now has this return function or this is the value which we get written when we call the adder function now let's say i have an instance two which is calling instance 1 function and we pass a value 2 to it then let's log the instance too as well so if i log my instance to here and it's save and let me just clear this and save here now the first instance returned outer function second instance returned my internal function now if i actually want to do the addition i will call this inner function here which is instance two with another value let's say one finally i will get my which is instance three now if i clear the console hit save hopefully the instance six or instance three will print my value six now the alternate way of calling this function like instead of calling instance one instance to an instance three uh we can call this uh function directly which is the adder function in an alternate way and that is the main way in which function carrying calls actually execute so what we can do is we can go for a console.log here and we can call our adder function instead of passing the values thrice like this what we can do is we can pass the with the three first then add another circular brackets past the value two and another set of circular brackets and pass the value one and uh if i print to something like result of addition is comma the adder function and if i go to my console as you can see the value 6 got printed again so this is the second variation in which you can print the values and this is basically what function carry means so you have like a function call in which you pass the arguments uh in circular brackets and the nested function calls execute them in one by one that is this first value 3 is mapped to the value c this second value 2 is mapped to the value b and this one value is mapped to the value a like in each nested call the parameters are taken in the sequence in which you are passed in this circular uh brackets and uh one of the useful cases of using uh function carrying is higher order functions like in case of react we have had our functions there we use this kind of index then redux i think we have a good example of function occurring like this so yeah there are some practical applications of function carrying but the most basic example that you can find is this one function cutting is basically a mechanism to transform a function so if you search for function cutting in javascript you will have a fancy kind of definition here which is a technique of evaluating function with multiple arguments into the function i don't know uh way to transform a function that's it that we know so yeah some people ask what is currying as a that is why i covered that qualify bind is used or asked a lot of times in javascript interviews so let me just cover that as well so let's say i have jason here which is mario character so mario was a game which we used to play in our childhood so let's say i have a name on this mario character which is mario then let's say the mario character is currently on level one and i have a function which is update level function which is supposed to increment the current level of mario so i have a function here and this function is supposed to increment this current value now how do i increment the value within the json itself for that we used a concept of this so let me just log the concept of or the value of this before i move so if i log my value this and if i call my mario character dot update level like this if i go to the console let me just clear the console first and save now if we get the output as you can see in this brand the value which is printed here this contains the value name and currently earlier so by using the this keyword i can access this current level right so what i can do is i can write a function like this which is supposed to increment the value like this dot current level is not current level plus one so let's say i have a function like this now before you proceed ahead let's just lock some values so let's say i have a value before update vlog here we are printing mario character dot current level then we run our update level function so we write mario character and if we go back to our console let me just clear all the values and save okay let's just remove this console as well and as you can see the value before update was one and the value of after update changes to two so let's say this is a basic call now one way in which you can call the function in javascript is instead of using this curly bracket you can go for a call method like this and if i hit save even then my output will remain unchanged and i will get this same output as you can see this was a normal function called output and this is using dot uh like after using the dot call method right so these are two ways in which you can uh like call a function now okay the value did not update that is okay but this function got executed as well so these are the two ways in which you can call the function in javascript now what we can do is i think after passing this the value will get update properly hopefully okay it is not getting limited so another way or now let's say i have another character here which is luigi character so the name of this character is and let's say the current level of the character is one and i'm going to just print the same statements again console.log we have value before update so we have any character dot current level printed here and i have another console.log statement which we are going to print the value after update now let's say i don't want to write this update level function okay that is i want to use the update level function from mario character to update the level of lewis characterization how do i do that so for that what i can do is i can call the mario character function using mario character dot update level and i can use the call keyword here instead of calling that function directly and i can pass the character instance okay now if i go to my console let me just clear the console and it's safe as you can see now the value of luigi which was current level 2 or update 2 or sorry the value which was at 1 or updated 2 if the value was at 2 and if i save now the value before update is 2 and got updated to 3 so this is how you can update the value of microcharacter as well now if i want to call my mario character like my character instance i can go for a call like this now if i save and click here and it save again so as you can see my value got changed to 2 from one using my update level function okay that was a mistake so let's just check again now as you can see the value got updated in case of micro character as well from one two two so that is basically how you can use call method to call your characters now another way in which you can use this mario character function call to update the value of luigi so is using apply method so let me just comment out this code and the another way is to use apply keyboard here instead of call now if i hit save we have the console and it save as you can see the value gets updated now the question that comes to our mind is what is the difference between call and apply so in case of call and apply the difference is how we pass the values so let's say in this update level function i have i have to pass a value here let's say uh index value and the current level should be incremented by this index values so if i have to do that uh using call method what i will do is i will pass the value directly after the character let's say i want to increment the value by two let me just clear the console and it's safe so the current level before update was two and as you can see this element which was passed which was value two this got added to the current level and the value got updated to four now if i want to uh make these changes using apply the difference is uh we don't use a comma set like the value directly but we pass the value in an array so this is how the value needs to be passed in case of a parameter so the output remains unchanged but in case of apply we pass the value in form of array in case of the call method we pass the value a single instance so that is the difference between call and apply now the third keyword which we need to understand is mind so in case of bind if i go for a function call like this which is using bind method and if it's clear and if it's safe as you can see the value remains unchanged that the reason for this is bind uh does not make the function called directly so if i if you are using the bind method to make a function call you will have it will return an instance so let's say i have an instance here of my bind method now if i call this instance method already uh let's just log the instance first and check what we get dot log instance value save let me just clear the console so as you can see i get return uh i get a function now if i call this function using a regular function called save let me just clear the console now as you can see the value gets incremented to four so in case of bind or instance of function is written and the function is not called directly so that is the difference between the function execution between call apply and bind so in case of call method the value is passed directly in case of apply the value is passed as array in case of binding we get an instance uh then we need to make the function call of that instance to run this code now the example that you saw here or this was like taken from another youtube video which was from code with simran youtube channel i will share the link like the original example which uh she had made so that was the simplest possible example i could find on the internet i just modified it a bit so i will share the original video of code with simran channel which covers color and mind beautifully and from which you can understand the concept of call of divine as well i will share it in the description so that is how all of my mind works in javascript i hope you got the gist of how it works you can obviously refer to online resources for understanding it in detail and that brings us to the end of the part one in this series which was focused on html system javascript in the next part we are going to focus on the questions on react js node.js and mongodb as well so that will be covered in part two hope you found the part one of this tutorial useful i will cover the second part soon a lot of my own students are asked the interview questions as well so i made a video instead of answering each one of them so i hope you all get the use of this as it if you like this video please subscribe and like the video as well that motivates me to keep adding new content on my channel and uh thank you and have a nice day goodbye

Channel: Saurabh Native

Views: 5,171

Keywords: interviewquestions, mern stack, web development, frontendinterviews

Id: Y6AoDw93bXk

Length: 38min 42sec (2322 seconds)

Published: Sun Apr 04 2021