Capgemini - ReactJS Interview | Frontend Developer | 5 Years | JavaScript Interview Questions 2022

uh react part is that right? Yes sure. Yeah.

Uh so uh what is the difference between where lat and const? So basically we can say where has a function scope and the lat and const have the uh block scope. So you cannot access the same variable outside of the block.

But uh in the problem when comes with suppose we are using the where and we have one for loop and inside that for loop we are updating the i whatever variable we have created. So because of that get what happens? So it will be having the same memory location it will be updating the same value.

So because of that concern the ES6 features get introduced with a block scope. So with the block scope we can have the similar variable outside of the block. So it will be a separate memory location for the B uh lat and const and the difference between let and const will be the con will be not we can say it cannot be reassigned.

So, so that is the difference between let const and where and where going to hoist and the let also going to host but basically it will be not attached to the global window it will be in the separate script block over there inside the developer tool. So there will be that recite. So andh for the temporal dead zone for that.

So when we create some variable with a late or a const so not the const when we create with a late so the difference between the initialization and the declaration. So this will be the temporal dead zone for that variable. So this is how that uh it will be resite to that uh script block over there.

Once it get attached attached to some value then it will attach to the our uh global global scope we can say. So yeah this is the some kind of difference I know about it. Okay.

Uh so let's say example you have one variable cost name is equal to power one. So will you able to change that value? Okay.

No no. So basically uh we have two types of the data type primitive and non- primitive. Okay.

So basically if we are creating the primitive data type of the con so we cannot reassign it. But suppose we are using the const object and first name last name inside that I am adding P one first name P one and last name. So I can update the properties of it but we cannot reassign it.

So this is the main difference with the respect to the primitive and non-primitive for the const. Okay. So for uh inside for loop right uh to uh uh if you use where it will give you the same result right and if you use let it will give you a different result right.

So let's say example you don't want to use lead right how you can uh what is your second solution for it? So in that case I will uh I will create a separate function and I will pass that I to that function. So that will what happens.

So whatever I variable over there suppose I have one set uh I have already know about the one example of the set time mode which prints the three suppose less than two we are using. So at that time what happens? So whatever the latest value of I it will attach to the set timeout because set timeout reset is in resides into the call stack Q as soon as the global scope get executed then only it get executed.

So for that case we can create one closure and we can pass that uh set time out in into the closure. So it will be having the new memory location with the i variable. So uh we can say that the inside that function will be having the latest value each uh each loop will have the separate value with it.

So we can do sim similar kind. Uh okay right. Uh so you have one object right and you want to make a copy of that object.

How you are going to do that? Okay. So basically suppose I want to make a shallow copy.

So I can directly write a con object two equal to object one. So whatever the object one will be there. It will be copied to the object two.

Then we have the object dot assign. So we can use that as well. And then we can use a split operator as well.

So with the help of this will creates a with the spread operator it will create a deep copy as well but uh the only the initial level suppose you are using the any references type of the object inside the parent one so it will be copied that parent references. So if you are trying to update something in the uh child one with the help of the spread as well so it will affect to that one as well. So this is the one kind of three type of the shallow copy we'll be having and we have deep copy.

So to create a deep copy we use JSON. stringify and parse. So with it so it will be creating the some string kind of the data and we'll assign to some variable.

So it will be a disconnecting between both. So whenever we do some changes into the new object so it will not reflect to the parent one. Hello.

Hello. Hello. Oh I thought I got Yeah.

Yeah. I thought I got discreet. So what is the difference between map and filter?

Okay. So basically we can say that the suppose I have some data. Okay.

And I want to make some uh manipulation on that data. So I can use a map for it. So it will create a separate array for us.

So it will be having some uh we can say that this new array will be created depend upon the transformation whatever we have written over there. And with the filter we can filter our data depends upon some conditions. Suppose I have some object it has some age or salary.

So I can put some filter like that salary greater than 50,0001 lakh something. So this will be the new object will be new array will be created for us. But suppose I'm creating on the array basically.

So at that time what will happen? So it will create a separate array. So we are creating a separate array but there is nothing as a we can say that the immutable things over there.

So it will be a separate array but we are creating from some array depends upon the uh parent one. So if I do some changes inside the new one as well. So it will reflect to parent as well.

So we can show we can say that the both will be the shallow copy depends in terms of the immutable and if it is a sorry im mutable and it it is immutable then it will be having no effect into the parent when we do some manipulation in the child. Okay. Got it.

Uh so do you have any idea about prototype? Yeah. So yeah so basically what happens suppose anything we create inside the JavaScript so it attach attach by default some properties.

So that property is attached because of the prototype. So this is the uh suppose I write array. push.

Okay. So what will happen? So array proto.

push. This method is attached to the array. So whenever I use array so so it will be created from capital a array dot our array dot push.

So what will happen? So array has a proto. Okay.

So that proto is we are using indirectly. So because of that only we are able to access that. So we have the levels of over there.

Suppose I created one object. So object has one. Yeah.

Yeah. You can continue. Oh I thought I disconnect.

Okay. So what I was saying that every uh whatever object we create or array or function so everyone has a prototype attached to it. So to access such kind of the things we have to attach it.

So with the help of the proto only we are able to use the on push then pop then this kind of the functionality. So it will say we can say that the it will allow us to the prototype chaining is with the help of the prototype chaining we are able to access such kind of things. And suppose I want to uh I want to create my customized function that will be attached to the function.

So what I can do I will write a capital function capital f function do my bind. So what will happen? So whenever I will create one new function now so it will be giving me that reference my bind.

So everyone everywhere I can access that my bind function attached to the uh function. So I can create my customiz proto as well like that. Got it.

Got it. So basically for the inheritance purpose we can use that. Yeah.

Yeah. A chaining. Yeah.

Correct. Right. Uh so what is arrow function and what is the advantage of using arrow function.

Okay. So basically in the arrow function we apart from the syntactically difference. So we have the syntactical one first difference.

So in the arrow function we don't have the this scope over there. So if we have some uh uh nested we can say the closer closer parent is there then only it will be having the access of this over there whatever the value inside that. So if we don't have that it will uh target to the global scope directly.

This is the one difference. Then we don't have the argument object inside the arrow function. So we use a rest operator for it.

So whatever rest operator we pass from the fun calling the function. So we'll get that inside the rest function. And another thing the uh arrow function not going to host and the normal function going to host.

So this is the third difference and uh apart from that suppose I am I have created one arrow function but that is not expecting any parameter. So I can skip that uh parenthesis as well. So this is this will be the simplified version for the arrow function we can say uh for the normal function.

Right. Uh so in which case you will use bind. Okay.

So basically suppose I have one parent object. Okay. And object one I have inside that I have parent first name and last name P and Patil.

Okay. And now I want to print some other name. Suppose I want to pass the test test.

So what I what will I can do? I will create uh that uh object one. ropy whatever function get name over there.

So I can pass the value of a new object. Suppose I want to pass test test. So that will be the another object that that object will attach to that this.

So with the help of that bind okay so I will tell about the first what is the approach and I will give the differences between three. So what I was trying to say that the we can attach the new scope of this to the current function. So it will not target like that the power and partial it will target to test test.

So this is how we use call apply and bind. So difference between call and apply and bind is that bind will create a separate memory location. So it will not execute as soon as we call that it will be having some memory location attached to the one variable and we can use it later on.

So this is the one difference I know and uh in the call and apply it get executed as soon as we call it and in the both the difference we have to use a separate uh comma separated parameter we have to pass in the call and in the apply we have to use in the uh array array shape we can pass right. So basically what is the difference between the spread operator and rest parameter? Okay.

So basically we can say that the rest operator as I mentioned that suppose I don't know how many parameter is coming into the arrow function. So what that time what what I can do whatever parameter I will pass from here I will create the rest operator dot dot dot whatever input I will create over there. So suppose I want I pass three parameter now.

So I will get the three parameters over inside that. Suppose I pass uh n number of then n number of will be get. So I can iterate that uh my rest operator over there and uh in in terms of the spread operator I can say that the suppose uh it will be having a it allow us to separate whatever things over there.

So what I can say that the it will help us to the separate everything from the array. Suppose I want to uh add something beginning to the array and the end of the array. So what I can do I will create array const new array and I will push something and uh in the bracket I will add uh suppose I want to add 10 and 10 at beginning and the end.

So what I can do array 10 then comma dot dot dot whatever base array and again 10. So what will happen it will create separate out the whatever the dot dot dot array we have passen. So what it will happen it will separate it everything from that array and it will allow us to create the new array.

So this is the difference I know. Okay. So uh I'm sharing one problem statement with you on chat.

Let me know the answer for it. Yes. Get the second last element from the array.

So I can array list will be keep changing. Okay. So array length will be keep changing.

Correct. Yeah. Right.

Okay. So what today we have a 10 elements, right? uh so it's a you can say it's a input right from the function so the the length of array will be keep changing okay so you want to take only single element correct from the second last or you want to take last two right so today we have a six elements right tomorrow it will be a 10 so every time I did a second last okay okay so what I can do for that uh array length minus plus two.

If I pass then it will give me the let me think 1 2 3 4 5 6 right now I have and I want to get E. So 6 - 1 so whatever ar length over there we can minus the which could you please write down that uh chunk of four for me? Yes yes yes yes let me share my screen.

Yeah, sure. Or otherwise you can uh write it in chat box as well. Actually, it's totally dependent.

Yeah, JSP I'm doing. So I want to get uh I want to get E now. Correct.

Only E. Right. Yeah.

Right. Okay. Okay.

Okay. So I will do console. array list - 1.

If I do like this, what will happen? So, array length is 1 2 3 4 5 6 6 - 1 5. So I have to pass something like this and it will give me E.

Maybe something like this I need to do. Can I run this? Yeah.

Yeah, it's it it will work. No, I think something problem is there. No problem.

Your logic is uh pretty clear. Okay. Yeah.

FG1 if I do minus two then it will every time it will return me last second last. Yes. Okay.

So that will be keep changing that doesn't matter. So the way you are writing right that's important for me. Yeah.

Yeah. Yeah. It will give me now something your approach.

Yes. What? Uh I'm sharing one more problem statement with you.

Yeah. what will be the result for it? So it will be uh 33 because we are trying to uh we are trying to uh add string and integer.

So what will happen the so whenever there is some rules over there we have suppose you are trying to uh plus something into the string so it will get two converted to string. So it will return double quote 33 I think. Okay, interesting format, right?

And what about this the second one? So, we are now converting the string number to minus. So, it is not a number.

So maybe it will return you 3 n I think because no string it will convert to three because this unary operator we are using and we are passing string to that unary operator. So maybe it will return zero. Not sure but maybe.

Okay. No problem. It will return I think zero.

Yeah. Right. That's that's the correct answer.

Yeah. So we are converting because it will convert your string to number and then try to uh uh subtract minus that thing from the uh particular number. Yeah.

Okay. Uh so how comfortable you are with NodeJS? uh I do worked on the NodeJS in my previous to previous companies but right now mostly working with the front-end technologies so I'm comfortable with it but I will be needing some time related to learn the code whatever code will be there so it will not take that much of time so I can adopt that too actually I know about the many concepts related to node but I need to just brush up about the architecture and all okay okay so do you have any idea about middleware what is middleware Okay.

So I can say that the suppose uh I can give an example. So and that time we can create some middleware. So what we can say that uh suppose I want to upload some image.

Okay. So into suppose I want to upload the my profile image. So what I can create over there suppose I can pass my image to the back end and I will create one middleware.

So that uh that middleware be doing things for us to uh upload that image to the some memory some folder location. So and it will return some path to us. So that path I will uh attach to the that path we can attach to the we we can send it to the database.

Okay. So whenever we are trying to access that path so the image will be over there as well. So we can uh suppose I have local port images folder and inside that I have pan.

png. So what will happen? So it will target that location back uh back back end location and the / power and it will try to find that.

So what I can say that the middleware helps us to do something before going to the back end or something maybe something like that. Right. Right.

Uh so uh let's move to the react part. Okay. Uh so uh tell me what is uh what is the difference between element and component?

Element and component. Yeah. Okay.

So basically we can say that the component will be having the everything will be the architectural over there and uh only element you want you mean to say only the tag only or uh the block you are asking is directly put return block you are saying sorry no I'm asking about element so you mean to say only the single element or the whole uh uh like the component uh I'm talking about a single element single element it's a single element element. Okay. So basically what I can say that the suppose uh as when the our react application get load to the DOM the basic application.

So suppose uh the component will be having its uh life cycle methods with it. So and the element will be having only the whatever whatever the things we have to render to the DOM. So inside the renderer so we use that return and the whatever element we have to uh load component we can say that the it's a part of the react.

So basically whatever things we have to bind to the DOM we use uh state over there inside the class component and inside the function component we use the use state and the set state. So with the help of that we can update the whatever element we have inside the return function respect to the function and class component we do update according to that. Okay.

Uh so tell me what are pure components? Okay. So we can say that the pure components is nothing but suppose uh I have one uh suppose I have one component and that is returning some another component.

So in that case we can say that it will be having a pure component. So it should return something every time to us. Okay.

Do you have any idea about reps? RIP. Yeah.

Re FS reps. Yeah. Yeah.

Reps. Okay. So basically suppose I create a input box.

So I want to take the value of it. So with the help of the refs. So /ref we can target over there and equal to the whatever the names first name last name.

So we'll get the whatever uh value of that uh reference we'll get to the variable. So we can utilize that value to the uh uh in the code we can say but uh usually we don't recommend such kind of things because of the DOM can manipulate with the help of that reference kind of the things. Got it.

So do uh what is a forward refs? Forward ref uh not heard that much. Okay.

Uh so what is virtual dog? Basically uh React is work on the virtual dog, right? So what is a virtual dog?

Okay. So basically we can say that the it will create a separate DOM uh based depend upon the current DOM. Okay.

So we can say that the we have the real DOM and it will create a separate DOM from it. So whatever the things will do change inside the components, it will render only that part. So instead of reloading every components in the DOM, it will reload only the respective components there the state get changed or the value get changed.

So we can say that the it will be creating a separate DOM from the real DOM and it will helps us to uh improve the performance by not updating the everything inside the DOM. It will be having a separate DOM and it will render the things as changed into the DOM. Okay.

Uh do you have any idea about interceptor? Yes. What is that?

Yeah. So basically we can say that the with the help of the interceptor we can intercept the request and response before going to the back end. So suppose uh I want I have some APIs that I want want to uh strictly check that API to the back end before going to back end.

So it is valid or not. So I can do one thing. I can attach some authorization header with it.

So the back end team will check that. So is header the authorization token which we passed into the that API is it correct or not? If it is uh we can write a middleware over there.

So that middleware will check that the request coming from front end it is valid or not. If it is not valid then we can send the response back to the redirected to login page. So such kind of things we can do and depends upon some status responses we can do navigations as well in the interceptor.

Okay. So, uh do you have any idea about React fiber? React fiber?

No. Okay. Uh so just uh briefly about life cycle methods of react.

Okay. So basically in the components we have uh render uh compon constructor will call first as we create. So then uh then the component did mount then component update and the last will did uh component uh unmount will be there.

So when we set something into the state uh into the this state so that at that time what happens? So whenever we do something into the state so component will rerender. So that is the uh uh that is the case where we check the component should re rerender or not.

So these are some common uh life cycle hooks for the component life cycle and inside the functional component we have some uh use effect over there. So it checks that the whatever dependent we have passed to that array. So if it is that get change only the at that time that uh value get changed according to that the component will decide that it should render or not.

So we use uh instead of using this dot state we use a state over there we'll create a constant object and the handler for it to v validate uh change that value. So this is how we can do achieving the functional components. Okay.

Got it. Uh so what in which case you will use uh higher order function uh component. Okay.

So exact exact definition I'm not remembering of it but uh you can explain me the use of it right uh so it okay okay so basically I can say that the that function do that component should do some manipulation and return depends upon something to the outer scope we can say or it it should return something from uh that component. So at that time we respect to use a higher order for components something maybe like that. Uh sir please come again.

I was saying that the suppose uh it it is taking some component okay and depend upon some situation we are updating that uh com inner component and returning the new thing to the to the DOM. So that I was saying I'm not clear the exact uh uh scenarios for that but maybe like that or I will read about it more. Yeah basically it's for the reusability of code right.

So it will uh you can use that high order function. So it will uh manipulate things uh and it will give return you the new component. Yes.

For the reusability purpose. Yeah. Yeah.

Okay. So uh do you have any idea about lazy loading how it work? Yeah.

So basically okay instead of adding that SL slash directly we if we are doing that slash and path we are passing whatever component we are using inside the react. So at that time what happens? So whatever route we have written to the uh inside the routes.

So it will get uh bundled inside the single time and if we use dot then so it will be loaded at the lazy so it will be not going to load inside the DOM uh as a bundle created. So it will be having the lazy reloaded with the dot then. So we can say the promise based such kind of things we do using or the lazy.

Okay. Uh right. So basically for the uh uh uh utilization right uh you can say for the performance perspective you can use that on demand.

Okay. Right. Uh so uh just brief me something about uh how your routing works.

So if you have a multiple users, right? For example, multiple roles, how you're going to manage that in a route. Okay.

So I have multiple roles and you want me to so what will be the your structure for it? Are you getting my point? Right.

Because few pages are accessible only for the admin and few pages are only accessible for the manager and there is only limited pages only for the accessible the normal user. Right. Okay.

Okay. So how you will manage those things? Okay, for that I did such kind of things inside the angular but exactly I did didn't do that in the react but but it's a real world example right you it's a uh any applications requirement yeah yeah so can I give the example for angular if you allow me yeah yeah I just want to know your thought process right how you're going to do that yeah so basically yeah so basically because every technology have their own closet calls.

Yeah. Yeah. Yeah.

So basically in the angular we can create a guard over there and inside the oguard we do whatever. Okay. So basically when user get logged into the system we'll get some roles and whatever the roles and uh back roles first name last name everything will be there into the coming to the back end.

So I can do one thing. I will create that ogard inside an angular. So the og guard will check that the what is the role of it.

So if user is uh that uh user has the role which he able to access then at that time we'll return the true and he and if he is not able he's not have that access then we can return the some uh 404 page or something page so you should not you don't have that authorize something component will create over there. So depend upon guard we can do so such kind of things we can do with the help of the on the model level as well. So we can write that same thing in the module level as well on the route level as well.

So I can try such kind of things to the centralized place. Okay. So let's see example.

Okay. Uh you are picking those uh roles from the session storage right? Session.

So any user Yeah. Any user can modify that right? As a normal developer you can modify session storage.

Right? M now the scenario is there is one URL for the bit and somebody is bookmar that URL on your machine now you are a normal user you are logged in that system and you you can see that bookar URL right you click on it and you modify your access uh or role in your session storage so will you able to uh access that URL and if you want to restrict that right if yes if you able to access that URL then you have to restrict that user, right? How you will restrict that user?

Okay. Uh I hope I'm clear, right? Yeah.

Yeah. I got it. I got it.

So you meant to say suppose uh someone update some roles roles inside the local session storage and reload the page. So you're able to access something that so Okay. Yeah.

Right. Because you are just hiding and showing things, right? On the basis of the role.

Yes. In all guard. Yeah.

Yeah. So for that uh API that can check whether he has role but uh again we will store into the local storage and he will update that so we can make API call that's right but where you will write that code yeah that is I'm thinking only so I can write in the like the interceptor where we can check that uh user but I'm thinking about suppose he logged in but he get changed after some time into the local storage but still he able to access so something we can create so it will automatically get expires after some time so you should log in again but I'm thinking okay but if it's a valid user then it's not makes sense right yeah so if it's a invalid user then it will work right but if it's a valid then it forcefully uh deactivate uh that session right Yes, I have to check this. How can I overeat?

Okay, no problem. But this is a real world example, right? We can fix this issue, right?

Yeah, I got it. Somebody can modify that session easily and they can access the pages. Okay.

Okay. So, uh P that's it from my end. Do you have any question for me?

Uh I have question related to the project only. So what kind of the project we have? So for this hiring so basically uh we are looking for mostly for the react uh developer who can work on the react but uh in after some time we are going to give up uh exploration on the NodeJS as well.

So if you are willing to work on NodeJS uh you can work on that as well. M and basically uh because uh we have a multiple projects right? Okay.

So some projects need a uh react plus node some projects require only node right. So but the way we are looking for right uh who have a better understanding on front end as well as in the back end. Okay.

Because nowadays each and every application almost each and every application using a NodeJS right. Yes. So we are planning to give you uh the guidance right or uh uh trainings for it to you can explore yourself on the NodeJS okay and I think you you have a very good experience on front end so I think you can uh work on any front end technologies right I'm okay with it I'm not I don't have problem because uh if you are working on node yes right you will get exposure on other technology like a cloud technology as well so it will be a beneficial for you in future as well.

Yes. If you have a combination of node, front end and cloud, right? Uh you have a very good value in market, right?

Yes. Okay man. Okay.

So I will share my feedback with HR and HR will get back to you. Is that fine? Yeah.

Yeah, sure. No problem. Okay.

P. Thank you very much. Thank you.

Bye-bye. Yeah. Bye.

Bye.