A subscriber was asked these interview questions for a junior role

okay so someone on my Discord sent me a list of questions he was asked in an actual interview he was doing for a junior position for a react front and roll I believe but anyway let's just kind of go through these and I think just understanding how to answer some of these things will just overall make you a better developer in terms of JavaScript and how some of this stuff works under the hood so types of variables in JavaScript this one should be pretty easy right you have const let and you have VAR and knowing how to explain the difference between them well so a const basically means you cannot reassign it right so once you assign a const you cannot come down here and you can't reassign it again pretty straightforward you should kind of know that let means it's something that you can assign um differently so for example I can go ahead and like assign this to something else and it won't complain second with VAR um Vara will also allow you to reassign but the main difference between cons let and VAR is that VAR is not block scoped so for example if you have an if statement I believe this is going to be a block if you declare a let inside of here I say like let hello equal to hello this is only going to be accessible inside these curly braces if you try to console log this down here I believe it'll say like I think your program will actually crash um so let's try this out I'm gonna go to jsbin real quick let's just run this and see what happens go ahead and click run and it does crash hello it's not defined okay so this is the difference between like let const versus bar if I did VAR here this would actually do to like hoisting this would be pulled up to the very top and this would actually print out hello I believe so let's run this and it does print out hello although you cannot see it and for some reason let me try clearing the console and just re-running it okay so this prints out hello um so yeah that's kind of like the difference between them um why you might want to use some of them but I'm assuming you guys kind of already know that most of the people watching my videos aren't like super beginners the type of variables should be easy difference between let and VAR and cons we just talked about that um and most of the time you're going to be using const using let and then assigning something and then reassigning it later on typically just makes your code harder to understand versus if you just have a bunch of constants and if you need to like have an array set to a constant and then you need to like modify that array then I would just make a New Concept called like modified array equals the old array.map something like that but anyway that's kind of the difference between them what is hoisting and why does it exist so in JavaScript hoisting like I kind of showed here is basically when you declare variables it's going to pull that variable up to the very top so that you have like access to it um a good example if I did like a function the function hello if I were to call hello up here and have this thing like console log something um this will run because the way JavaScript works when it sees like function declarations and variables it'll kind of like pull them up to the very top of the file so that you don't get some type of like hello is not defined issue um now a difference is if you were to set this tool const and let that equal to a narrow function this is actually not going to be hoisted like this is going to be declared in the order so if you try to access hello here and call it it's not going to work right because because the constants are not hoisted I don't believe let's are hoisted either the vars kind of our hoisted but I will say that like you have to understand the difference between the the clearing of the variable and actually assigning it I think the assigning will still happen in the order of your code but the declaring is what kind of gets pulled up to the top so for example if I just did like a VAR hello here and that's basically behind the scenes it's kind of just doing this in JavaScript so although you're like you're not getting a syntax error um this thing is still not declared yet it's not it's not assigned yet so this will actually fail which is why we see it but anyway that's kind of how it works with functions at least where you can kind of declare a function but then call it before you actually declared it because JavaScript will automatically pull that up to the top why is that useful um I think it just kind of reduces the overhead sometimes if you have like a bunch of functions and those functions call other functions like for example if hello called um let's do this if hello called a and then a called B right if you didn't hoist these things then this would just throw a bunch of Errors because a wasn't defined yet so you'd have to basically manually go with your code pull that up to the top kind of a pain oh but then B is not defined yet so I have to go manually go here fold it up to the top so I think that's kind of the benefit as to why JavaScript does hoisting I think it makes the developer experience a little bit better but that's all I kind of know maybe there's like some other reasons that you guys can leave a comment on of why all right so the next one what is object prototype and Proto for an example with Git prototype of or set prototype of I don't think I've even used these functions in years um again I work mainly with react and stuff and like node in the background and there's like es6 classes so I kind of don't even know why they're asking this I mean you knowing what the Prototype is is kind of important but so a prototype is basically like the object's orange approach to JavaScript before they added es6 classes so if you want to make like a person so I'll say like function person this would be like a person Constructor right so if I wanted to return if I said like this dot name is equal to Bob and then I go ahead and say cons p is equal to new person here and I just go ahead and console log pdot name this will basically use this function to construct a new object and this is the Constructor here this is kind of how you do stuff with um with the JavaScript approach to things but when you do this this thing actually has the ability to attach things onto what we call a prototype so if I were to do person dot um prototype say hello and I set that equal to a function and I just go ahead and in here say console log hello basically now every single thing that we construct every instance of this person class that we construct is going to have a method attached to it automatically and that's because when we do the new keyword it basically takes the Prototype of person and it's going to append all the methods that we kind of like assigned to it so for example if I were to say um B dot say hello and run this it prints out hello down to my console okay for the most part like it's not too important to know prototype because in this day and age like we should be using classes right if you're doing objects oriented programming you're going to make a class object like this they'll say class person and it'll say like Constructor and inside the Constructor you can actually like Define this.name is equal to Bob and inside of the class itself I could give it a method that says say hello and then I can put the console log here so all that need for the Prototype stuff kind of gets abstracted away when you're using es6 classes and it does the exact same thing under the hood it's kind of using prototypes to build up the same object but basically the Prototype is kind of like the the blueprint of how your object should look like after you construct it and all the methods that should be on and all the members that should be on it but I think that's kind of a good overview of that now get prototype of set prototype of I don't think I've even used these like what happens if I do this let's just try saying git prototype of and I'll pass it P is this actually do something I don't know just go and run this and see what happens get prototype of object dot get prototype of so the object.get Prototype of I guess is a static method that exists on the object class or object whatever this is and if I run it let's see what happens when you run this thing prints out a dot dot dot right so I guess the the purpose of this is that you can check if an object extends a particular prototype so actually let's just try this again I I don't think I've ever used this in my 10 years of coding I don't think I've ever used this function before I don't know why they're asking that in an interview it's kind of stupid but hey if I just put person here let's see what happens is object I get prototype of P equal to person is this going to print out true or is this going to print that false that prints out false let's try person.prototype here and let's see what that prints out that prints out true okay so again it's kind of like trying to see if something extends something but honestly like not sure why you even do this because you can say is p instance of person okay which it will also basically check is the the instance that you're checking is it a type of person so again this question I don't know why you'd even ask these things like I don't think people actually use these anymore like es6 classes have been around for years why are you quizzing people on object.prototype in like these lower level methods but hey I guess whatever the interviewer thinks it's important so whatever what is the difference between a class and an object that was kind of like a question about object-oriented programming so again we just talked about a class and a class is basically an approach for coupling the data and the methods that modify the data together right so this person has methods on it and those methods typically use the members of the class to kind of do things okay that's kind of what a class is now an object is can potentially like achieve the same thing but an object typically is just like a more like lower level construct because at the end of the day like this P that we created this is an object right if you were to do a type of P this will probably print out object here right right so it is an object but the class is more of like a blueprint of what the object needs to look like after you construct the instance of it okay I don't know if I explained that well but again objects is just like the lower level construct of you can have some data and just attach properties to it and attach methods to it a class is more of like an object-oriented approach of finding methods in properties and if those properties should be private or public and stuff like that it's more of like a blueprint in my opinion that's what a class is I don't know if I explained that right but I'm going to move on what is the what is this keyword and when do we use it so I think that this keyword is all about like the execution context I don't know if that's the proper term for it but depending on where you're calling this thing this will point to typically the reference of that thing so for example if I say p dot say hello if this say hello method used for example name like if I were to just go ahead and say instead of console logging hello I'll say print.dist.name the this e word is going to reference the thing basically before the dot right so say hello since we're calling this method and this method is attached to p this is going to use the name that we kind of set up here let's just run this and let's verify that I am right so it should print out Bob because again this is referring to the actual like the underlying object that the method was invoked on and so that this is going to be actually referencing this I think when you're doing the new keyword it basically sets this to like a new object and this we kind of like decorate it with properties and stuff but yeah I mean this keyword usually when you're doing like object-oriented programming stuff you have to use this to kind of reference the properties of the object that you're playing around with I think half the explanations I give in this video are going to be like very wishy-washy but again I think in an interview it's just like can you explain it to enough that you feel like you know what you're talking about like I don't think you have to give like a perfect dictionary definition of what these things are but like can you actually show that you know how to use this keyword do you know how to access things on an object using this um so that leads us to the next question what is the difference between a normal function and an arrow function so the kind of talk about the arrow function it all boils down to the this context right what is this going to be pointing to and depending on if you're using the arrow function or if you're using a normal function this will either point to the normal execution context thing that it should be pointing to I'm so bad at explaining this I feel like I can't even explain this properly but an arrow function is a way to basically pass that this value further down into another function so for example this is a good example I can think of let's say set hello did a timeout of one second and I wanted to console log this dot name okay so when I run this after one second it will print out this dot name and it'll print out Bob but the only reason this is working is because we use an arrow function here when you use an arrow function behind the scenes I believe it's doing just like a normal bind on the function and it's passing to this reference even further down that was probably super confusing what I just said there but when you use the arrow function you know a better way to explain this is let's convert this to a normal function let's just make this as a function instead of an arrow function and let's see what happens when you try to run this will it print out bomb it does not it prints out result I don't know why it's printing out result there must be something on the global that is set to result but the idea is that this is no longer referring to this name here right this is no longer referring to this because inside of this function we kind of changed what this will point to so that's kind of why you want the arrow function um no now before the arrow function what we actually used to do I think is we said like cons that is equal to this and then inside of here we say that dot name and this would kind of achieve the same results as just like a very hacky way to do it notice that it prints out Bob net now but due to like the closure we basically pointed a reference to a that variable to this variable and then when I console log that dot name it's actually referring to the original this not the one that would be overwritten because we did like a set timeout with a new callback function so that's kind of what's Happening behind the scenes I do believe what's really happening is this is probably calling like a bind here and this is calling a this for us let's try this again this should also oh this is saying that is not defined let's rename let's rename that the let's rename that to this and again this works the same way right this is the same as doing an arrow function basically it takes the function it calls a bind on it which is going to kind of change what this is going to reference and then when you invoke the function after a second this is actually going to refer to this thing super confusing um I personally would always avoid using this keyword if you can but sometimes we're using object-oriented programming amp but that's kind of what the arrow function is I don't know if I even explained that good I kind of jumped all around but I showed you like what it's kind of doing under the hood it's kind of like a syntactic sugar I believe for like the bind function that you can call on functions that change what this references to let me move on before I confuse more people what is a promise okay so this one's super important if you're doing any type of coding with JavaScript you got it you gotta know what A promise is so I promise is a way to basically run some type of asynchronous code for example like make a request to a backend and being able to register a callback or like run some code when that asynchronous requests finish so like for an example um well I think with JS fiddle I'm not sure if I can do fetch requests let's try doing this um let's go to the Pokemon API and let's see if it allows us to do like a fetch request here I might get some type of random course error if I try to do this but I'll just do Fetch and let's just try to get Ditto and let's see what happens if you run this is this give us a course error let's just console log this okay so notice when I console log this fetch request this prints out objects of Promise so this thing that comes back is actually a promise and the idea is that like it may or may not be resolved yet but the idea is that it can resolve at some point and you can attach some type of callback functions on it to run code when stuff resolves so let me show you how that works like basically there's two methods you can typically attach to a promise there's a DOT then callback where I could just go ahead and pass it like a function like console log and that should run or print out the results that we get back when this thing is done running there's also a DOT catch method so like catch and then I could just say console.error if anything happens when I'm trying to make the request and it crashes it's going to call the catch callback function if I spell that right so when you're dealing with promises this is basically how you can do stuff with them there's also a finally um thing that you can do you can do like whatever code you want to do here but basically if everything is fine in the request works fine or your promise resolves then it's going to call whatever callback function you pass here if this thing has an error or it fails or it throws an exception it's going to call the Callback that you passed here and then the finally is basically just something you want to run at the very end of either it being successful or failing such as like some cleanup or something okay so pretty straightforward so again this is like super important you got to know how promises work and again I just kind of like touch the surface of promises but it's probably good to understand how to construct your own promises you haven't actually tried to create your own promise using a new promise Constructor you should probably look into that so for example if I wanted to make a promise that when I run it it just returns G inside of this I can do something like this I could say const p is equal to this new promise and then that's going to take a callback that's going to resolve some string you can also take a reject here so like I say reject and if something goes wrong you can reject it and that's basically how you control if you want to do a DOT then or dot catch inside your custom promise right you either resolve it which we'll call the dot then or you reject it which calls the dot catch so in our case if we have this promise here we can actually just instead of doing like a Pokemon fetch let's just do a DOT P here the P dot then if I run this what do you think it's going to print out it's going to print out G because this is resolving a g which means it's going to call then if I were to change this to a reject what do you think this is going to print out so it prints out bad again I don't know why this thing is printing out like a weird link here I don't know if JS fiddle has some like more error catching that's going on but that's kind of like an overview of how promises work um how to use promises outside of async await so that's kind of exactly what I showed you right so what I should probably show you instead is like how does this stuff work with async await so let's say you had an asynchronous function called Main and you call it down here when you have an async function you can actually use some syntactic sugar so that you don't have to do that then in the dot catch everywhere right you can actually just do try catches like this I can do a try catch and then I could just go ahead and say console.error err and then inside of here I could say a weight um for example p so this is basically the exact same code as this I'm basically saying wait for this promise to either resolve or eject and if it throws an error we're going to catch it here and you can also tack in a finally here if you want to as well like that's something that exists on try catch finally and you can do whatever code you want to do here but this is basically the exact same code and if I run this and change that to a g it should still print out um a g actually it won't because I need to actually get the result so like the the await allows you to basically take the resolve value and put it in a variable so you can kind of do what you want with it so I can just go ahead and say like print out result go ahead and run this and we got an unexpected identifier I think it's because I forgot to put function here let's just go ahead and run this again and notice that it prints out G okay again this is the exact same code as it was before but now we have like the ability to do async await which can sometimes make your code cleaner sometimes it actually makes your code a lot harder to understand depending on how many like nested try catches you end up needing um so jumping back and forth between async await and just normal promise chaining kind of important to understand what does it mean for something to be mutable and immutable which types of variables are mutable and which are immutable with some follow-up questions on YouTube mutatability in react so again mutatable means you can declare a variable or something you can change it in the future right so we kind of talked about that a little bit with const so if I say like const name is equal to Bob this is now immutable you cannot change this variable right if I try to change this to something else this will actually just throw an error um because this constant makes this thing immutable mutability is using a let okay so now you can actually change this variable have it point to other things that's kind of like the general overview of what something is immutable or mutable now you can take it a step further right you can have like objects so if I say const object is equal to like name of bomb this object is not immutable you can actually say object.name is equal to ABC and this will work perfectly fine because constant just prevents you from redeclaring or reassigning what object points to it doesn't prevent you from changing the object here at all right so keep that in mind that um this object is mutable you can change it but one workaround is you can do object.freeze this is built in the JavaScript and now this thing is actually immutable and if I try to change a property on this it's going to throw an exception look down here at least I thought it was supposed to um I'm not sure why that did not throw an error try writing that one more time Okay so I probably have to go refresh my memory about what object freeze does but notice that although we are reassigning name to ASDF this thing is still printing on bomb because we made this object basically immutable you cannot change it it's stuck in time it's frozen and there's benefits of that it kind of helps your code be easier to predict what's going on I think the biggest argument as to why you want to use this is if you've ever coded in a JavaScript and you have a function that takes in like a object and you take that object and you pass it to more functions and then you pass that object T for more functions any one of those functions can modify the object and it becomes very hard to track like what's changing this object so that's the argument for why you want to try to make code in immutable now I do think there's a little bit of Dogma around that ideology I think it's just you know with great power comes great responsibility I think you can write more concise code with using mutations and mutable code but it comes at a cost right you can add some kind of hard to debug issues in your code base but usually your code's a little bit more concise because you don't have all this extra like weird stuff you have to do like if you've messed with react State you know what I'm talking about you have to like return an object that's spread over the previous object and like attach a property to it kind of a lot of work um but yeah I think you guys hopefully get the idea what is a closure and give an example okay so a closure like for example is just the idea that you have like variables that are going to be scoped inside of the function when you create it so the easiest way to create a closure is by using like a higher order function so if I have a function that that's called like I don't know make okay maybe not make um actually I'll call it counter and inside of this thing let's just have it return another function that has like a let out equal to zero and then every time you call this function I'll say count plus plus okay and so what a closure basically gives you is that this function is going to refer to a variable that is scoped to in this function basically Ran So if I were to go ahead and say like so if I basically say const C is equal to counter this is going to run this function and due to how closures work this count variable is going to be scoped to the execution of this function okay so right now this is a this is a function if I were to print this out and say like what is the type of this type of C should print out function but the cool thing about this is that this is a closure I don't know how to actually say this correctly it's like is the count variable closed over this function or is this function closed over the scope of the counter like there's some stuff that I just I'm so bad at explaining but the concept should still be there that basically this function has access to some type of like private variable and no one else can know about it right this is like special only to this function here now when I call this thing like I would call it a couple of times in fact I should probably return this let me return that if I call this a couple times and put it in a console log you'll see that it prints out zero and then if I do it again it'll print out one I don't know if you guys can see that it's kind of like at the bottom of my screen let me do this all right so every time you call it this function that we created is just incrementing a variable that's kind of like private I don't know I'm going to move on from this topic because I don't think I'm gonna explain this too well but that's kind of like what what the closure does what is a JavaScript closure this is one of those things where it's like I've been coding with JavaScript for so long and I still can't explain like what exactly it is all right let's just give the definition because I think I did a bad job by explaining this a closure is a combination of a function bundled together enclosed with references to its surrounding State the lexical environment in other words a closure gives you access to an outer function scope from an inner function so it's basically the fact that I can access variables outside of this function okay and it says in JavaScript closures are created every time a function is created at function create time so anytime you create a function here like for example when I create this function this function will have access to this name variable so I don't know I probably would have not been able to explain that too well in interview it's one of those things where it's like I know how to use it I could literally code up some code that uses closures but when you tell me to explain it to you it's like I don't really know how to explain it too well because I just can't the terminology just doesn't come out of my mouth very well let's just move on why are block scope rather than function scope variables not available after we exit a function I read through this one I have no idea what this is asking personally I understand what block scope variables are like if I were to say I have a function here that's like called Main and inside this function if I had to clear like a block and say const x is equal to what uh the string of one and I try to console log X down here right this is not going to work right because this thing this is scoped to this block right if I run this I think it should crash X is not defined but like I I understand what block scoping is same thing with an if statement if I have an if statement here again this thing has a block on it if I try to run this code this will crash because again you're trying to access some type of variable that's only scoped to this block now the question is why are block scoped rather than function scope variables not available after we exit the function right now I don't know if there's a question that's like asking more about the call stack and stuff and I had a discussion on Discord about this question and I just don't understand it I don't understand what what they're trying to quiz you on like if it's just the fact that like you can have block scope variables then I think I kind of answer that question what they're asking for more information like I probably would have not gotten this answer right uh everything about front-end caching and caching in general what is the difference between local storage and session storage redis was also brought up um this is like a separate question this is also kind of a separate question I mean I guess you can consider local store to cash I guess it's more of like a storage area um but so caching is basically a way to increase the performance and load time of your website by using data potentially stale data instead of like going off to the server and fetching the new latest greatest version of the data so for example when I load jsfiddle.com it probably loads in a ton of different things but on the second load my browser actually caches a bunch of these things so that I don't have to go back to the server again and refetch all of the unmodified data right so all these files they probably don't change that often the CSS maybe they do a deploy every couple of days and the other CSS will change but if I load this app like 20 times a day I don't want to have to keep hitting the server over and over and over again to get the exact same file so that's kind of why we have caches it's a optimization that clients can use to basically be quicker to run and reduce the load on the server so that you don't have to fetch things that you already know you already have and this can also be applied to like caching data in your application right so sometimes when you have like a widget that loads you have to fetch data from an API and if you were to navigate to another page that has to use that same data well you just loaded it right so you can store that somewhere in your browser memory and like a variable or if you're using react you can store it in like a provider or something or you can store it in like a state management Library like Joe Thai zustin Redux or something and basically cache that information somewhere so that when you try to load from the API again you can check okay when was the last time I loaded this data has it been like 60 seconds and if so I could just you know use the data I have locally if not I need to go to the API and get some new data now there's a bunch of caching Solutions out there like react queries one there's a whole Paradigm called like stale while revalidate I think it's called SWR this takes care of a lot of the caching that a lot of react applications and just front-end Frameworks use in general basically again fetch data from the API and cache it somewhere so that if I ever need to fetch again from that API endpoint I can just use the cache and under the hood I could just do a silent request to the back end and kind of update The View when that data comes in so the user gets like a more seamless user experience and they can start working right on some stale data but that's kind of the purpose right it's just potentially a better user experience stuff loads faster reduce the load on the back end but at the same time it's a trade-off right because now your users are dealing with stale data and some systems have to be live right you can't show a date a table with a bunch of old data and then after three seconds it just like changes on your users so it really depends on the use case of when you should be caching stuff but that's kind of like an overview of the different things that you can cache I'm sure there's a bunch of stuff I didn't even talk about but what is the difference between local storage and session storage so local storage is a storage location you can use that's persisted when your browser closes session storage I believe is only for your tab and more specifically when your tab were to close it clears out your session storage that's the main difference so I feel like why would you want to use local storage well let's say they have some type of dark mode or light mode configuration that makes sense storing the local storage because you want it to basically persist when they come back to your application session storage would be stuff that's like ephemeral that you want to kind of clear out um when they close the tab can't think of a good example but I'm sure you can Google it and then he said redis was also brought up so redis is a it's kind of like a database but also like a caching solution they also have like messaging built into it it has like a bunch of features right this is pretty interesting but a lot of software uses redis kind of on the API side of things to Hash things that are brought back from the database right so typically when you're funding makes a request to an API the API has to hit a database to get some data now if depending on how often those queries are hit and how live or sale that data could be you could potentially take all that data that comes back from the query and just put it in a redastore so that now your API can hit redis first and since redis is in memory it's really fast to like kind of return those results back so for example if I had an API endpoint for like getting the the user information for Bob I could first check redis and say hey redis do you have information for Bob if not I'm going to request data from my database which is a little bit slower and then I'm going to take that data that came back from a database I'm going to store it in redis so that if anyone in the future needs to request data from Bob they can just get it directly from redis it's a lot faster but again your storing potentially stale data into redis and you have to have some type of like time to live so you can clear the cash out and you know consider the cash dirty so you can kind of like update it so for example if a user would like change his name from Bob to like Bobby you know it's people are going to see Bob still for a certain amount of time so that's the things you have to kind of think about when you're dealing with caching but I think that's kind of good enough what are cookies and what do we use them for so cookies are ways to basically persist information on the front end so like on the browser you can store information about the user um maybe their session ID or something and that's actually stored directly in cookies so if you go to application and go to cookies here every page you're on has its own like list of cookies you can store right and a lot of times we do like authentication inside the cookies like we'll store information related to Authentication and we use the cookie data to verify that the person is logged in now there's a bunch of other settings you can kind of set on cookies to make them secure there's a lot of issues with cookies if you don't have them set up properly you can have like leave yourself vulnerable to like cross um cross-site request forgery attacks and stuff like that but basically all you need to do so for example like if you use like an HTTP and secure cookie basically what happens is every time the browser makes a request to your API it's automatically going to forward the cookie on the request your backend can basically just keep checking the cookies that were set on the headers of the request and they can just look up the session ID or something and use that to look up the the user session from your database or from your Reddit store to get information about if the user was authenticated and like what roles should they have access to in the application that's usually what cookies are kind of used for it's just kind of tracking the user's session that was like a really high high level overview of cookies I don't know if I explained it well but that's that's what I would kind of say what is HTTP and what is rest so HTTP is a protocol that we use to kind of Define how the front end should talk to an API or how like a a web browser should talk to a web server okay so every time you kind of like make requests this is just doing an HTTP request using a particular protocol and if you kind of dive into the protocol I know nothing about it I'll be honest but there's like different headers in the request packets there's like IP addresses for the request packets and all these other things but some you know really smart people kind of set out some standards of how like this information should be structured in the request and like where certain things should be and what you should be able to attach to the protocol and what you should be able to attach to the methods and that's kind of what HTTP is now rest rest on the other hand is basically using a subset of http things features and trying to build out some type of conventions for how you can set up an API so one of the things that HTTP provides us is you can send request methods all right every time you do a request to a backend you can say okay this is going to be a get request or this is going to be a post request or this will be a put or a patch or delete so rest is basically taking some of the conventions that the HTTP protocol provides Us in trying to build a a well-known pattern that a lot of apis kind of follow and everyone has like a very common convention to use to get data delete data update data fetch data um and then I would probably look up like the crud rest in points that's probably important to understand like typically you have like let's say you had users this would be like a get request at users um typically if you have like some resources that have ID you could do a get request by the particular ID you could create new users doing a post request you can update users by doing a put request there's also a patch request that we typically do like this so these are basically the endpoints that we're hitting right you can do those HTTP methods those request methods two different endpoints and this is just like a common convention that we use for restful services good to know make sure you definitely understand this uh what HTTP verbs are there and when are they used so again I kind of talked about that git is for typically when you need to get back data post is when you need to create something new but is when you want to basically completely overwrite an existing record and patches when you want to just update individual fields on a record so for example if someone needs to change their name from Bob to Bobby you could probably just do a patch and send in like a little piece of information say change name from Bob to Bobby okay so that's kind of like the verbs and how you kind of use them in a restful API so that kind of covers all the questions I want to talk about I mean there were some more like react specific questions I don't I know nothing about mobx to be honest so I would probably skip this I think he worked on a project before the interview that was asked to use mobx so that's why they asked him about it but I know nothing about us I'm not going to even talk about that I could try to talk about these react specific questions explain the life cycle of a react component when are they mounted re-rendered and unmounted so I have a really fuzzy understanding of like how some of the lifecycle methods work I know that in react when a component shouldn't be displayed so for example if I said false and I would say like my component here um this would basically assuming that the component was already mounted and this is like a variable like let's say I said like is visible equals true this is pseudocode so don't get mad that I'm not using like a real state you know some people don't have imagination so let's just go ahead and do this I'm gonna go ahead and do this so you guys can actually like follow along let's pretend we had some some code here some jsx code in react this thing is going to display and if it's the first time this thing displays it's going to be mounted right it's going to basically create the component react to some stuff under the hood and it's going to call a mount function or if you have an effect you can have it call the effect for the first time and do some stuff some setup logic right when it's re-rendered basically anytime you change State inside of my component or if you change the properties that you're passing into the component is going to re-render my component now we're in like a parent component here so I could say like function parent and again this is pseudocode so and there might be like a bug but by part probably should return here anytime the state of the parent changes so for example if something were to change this state variable to false it's going to basically rerun and re-render all this code all of this code and all of the children of this code and all the children of that code are going to remember so basically depends on where the state changes like in what component State changes and also like what properties potentially were changed and that's kind of when stuff gets re-rendered I believe I might even be right about the property stuff now for unmounted so unmounted is basically if something were to come along and change this from True to false react is going to think that okay I don't need to show my component on the page anymore so I'm going to go ahead and just run the unmount logic and just do whatever cleanup I need to do typically if you have like websockets that were set up in this component when it mounts you then want to clean it up and unmount those websockets and just clean up those resources um everything about use effect again for kind of achieving mounting and unmounting you want to use you want to use the use effect function uh use effect is a function I should say a uh a hook and react you can use to basically run some behavior when something changes and it turns out there's like a this is kind of hacky in my opinion but if you want something to only run once when the component mounts you can do something like this and pass it in empty dependency array here and anything inside of here this is going to basically run once unless you're using react strict mode and react 18 which makes it run like multiple times which is super confusing and awful but that's the idea this is basically your Mount logic and then inside of this effect you can return some type of code for handling the unmount logic okay but use effect is also useful for when you want to like do stuff when variables change so for example let's say you want to run some code when the invisible Boolean changes from True to false or false to true you can pass that in your dependency array and run some code to basically do some additional effects when variables of State change um I would try to avoid use effects when you can because if you can just have stuff happen when you interact with the UI it's much cleaner and easier to manage your code base yeah I think that's good enough I don't know there's probably stuff I missed I'll do class components differ from functional components I don't I've never written a class component in react I'll be honest with you I started basically with functional components so I probably couldn't even answer this question [Music] they're asking like not syntactically in relation to State Management I think what they're getting at here is that functional components allow for more composition right so you can easily have multiple Mount functions fire and you can abstract these out right so you can make custom hooks you can have like these custom hooks do their own mounting and unmounting behavior which I don't think was possible with class components I think you just had like a single Mount function and a single unmount function and setting up a bunch of different like custom Logic for when Seth mounts and unmounts was like kind of a pain but again I I never coded at all with like class components so I don't know but I think that's like the general idea is that functional components with custom hooks made things a lot more like um composable um that answers like all the questions I hope this was kind of a good overview of those questions and I think it's good to understand some of those questions or mainly most of those questions I don't think there's any questions that were like too out of the ordinary for asking a junior some of them were kind of like okay this is asking a little bit too much but I am curious if anyone else has had interviews and has questions like it was ask questions in the interview feel free to send me your list and I can try to make a video and kind of talk about them and maybe I can try to answer the questions I think these are pretty good questions to understand how to answer um I think answering them just helps people know that you understand react at a decent level and you understand JavaScript at a decent level some of the stuff I wouldn't ask about like the react the the JavaScript prototype stuff I probably won't even ask about honestly um and there's some other stuff that I probably want to ask about such as like the scoping with block scope versus functional scope I don't know it just they seemed like silly questions but if you guys got some value from watching me explain these be sure to like comment subscribe and press the Bell icon and like always I have a Discord Channel if you want to talk to me directly or just ask me questions or if you have been an interview and you want to kind of forward some questions to me and have me talk about them in a video feel free to do that I can try to do that if I have time anyway have a good day and happy coding

Channel: Web Dev Cody

Views: 465,285

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: xo1sW5HD7os

Length: 44min 34sec (2674 seconds)

Published: Tue Mar 14 2023