Top 25 Javascript Interview Questions for Test Automation SDET - Playwright & Cypress

0:00 Welcome guys. In this lecture, let's see top JavaScript interview questions with explanations. This is your instructor Rahul Shetty. So let's step by step see what kind of questions you could face in interviews when you are sitting for JavaScript related text tag. Question number one, can JavaScript object hold a function as a property? Explain. So let's see can this object really hold a function as one of the property. There are a lot of things to dissect here. First let's try to create one simple JavaScript object. So I will just start with a object like this con person equals to

0:49 and and we will write one property here. This is how you declare property John and let's say their age is 30. Now these are the two properties of JavaScript object. An object can be created with properties and values. So combining all these properties will sit in one object and we call this person is a JavaScript object. Right now our question is can this object can this person hold a function as a property? So right now here our function so right now our property name is a string age is a

1:37 number and can this property hold a function? Great. Right? This is a property. Now value you know you can actually create a function like this function and then you can print whatever you want inside that. Yes it can hold not just strings or integers. It it can also hold a function. Okay. Now interesting thing here is in this function I want to call this property value. Okay. So you can refer to your own properties with this keyword. So this dot name the John will be printed here. Now how to call this function? You see

2:23 person.gre. So person is an object using that object. Not just this you can call person.name it will print you John person. It will print 30. Similarly in the same way when you call person.gre then it will call this function and this will be executed basically. Okay. And the output of this will be like hello I am John. That's what you will see in your output. But one thing you need to remember here that great when you call a person dot name now right when you call this name it is just a property where it holds a string and you need not give brackets like this. But whereas when you are calling a property which holds a function, then you should

3:09 give a brackets to tell that that property is a function. So to see our answer, can a JavaScript object hold a function? Yes, it can hold a function. And in the function, you can also refer to your own property values with this keyword. And this is how you call the function using the JavaScript object. Okay. What are anonymous functions in JavaScript? define their syntax and implementation. Okay. So before we go what is anonymous function let's first see the basic function implementation. So this is how you can create a function right function let's say say hello and I'll write like this you know some print statement. So by looking at this this is

3:55 the function the way how we define in JavaScript. you write a function keyword and you give the name of that function. Now if you want to call that function then you will just write that function name here say hello and that that's it. So this will print you in the output and when you call this function it will say hello I am the word right that it will print in the output or if you want to return the statement then you can put return keyword here. So return I'll remove this console.log log and it just returns hello I am the world. So whatever you written you can store it in one variable. Now I would say let's consider this as hello message. Perfect.

4:40 And then now you can print out this console.log hello message and that gets printed in the output. You see that this is what it will print. So to write a function function keyword function name and this returns this is cool. Now what is anonymous function? Anonymous functions are those which does not have name. So that means there will be no function name at all. Now here this is not anonymous function because it has name. Right? So now to give you a simple example this is anonymous function. So what is this function name? There is no name in it. Right? We created a function keyword and we have defined it. These functions which does not have name are

5:26 called anonymous functions. Okay. So now let me write this again. Function I'll create a function keyword here. Now you might be wondered okay this looks good. Now this is expecting some name argument. Right? So I'll that name argument I will send from here. Now how to call this function? So previously we have a function with a name. Now if you want to execute this function, we called this with that function name and this got written. Very nice. But if the function does not have name at all, how would you return it? So in that case, you need not again explicitly write a step to call that function. You can just collect the output of that function. So in this case, instead of printing, I

6:11 will again return this is what I am written. I'll collect that into one just a variable called let's say greed. That's it. So now whatever you want to print if you print console.log of greet then you will see your output. Okay. So this is how you do if it is anonymous function because it does not have name at all. It's just a function and the actual code. So the return whatever this returns an output we collect that into variable directly here itself for anonymous functions. Now you see that for a JavaScript object previously this is anonymous. So we are collecting that into a property. Right? This function has name. So you can either collect or

6:57 you know you can just call it like this. Right? This is so simple because it has a name. You can call it wherever required. But if it does not have a name you should collect it there itself. Okay. So that's what anonymous functions in JavaScript and their syntax. Okay. So I hope now you understood uh what is a general functions anonymous functions and how functions are being called as a property in the JavaScript object. Right. So differences between where const and let keywords explain with an example. So this is interesting especially with where keyword. Now if you look at this example if you are aware of any other programming language like Java or Python so basically this is

7:44 a function right and here where x equals to 1 is defined. So where is a type so it is a function scoped as well as globally scoped. So that means if it is in Java usually what happens is when you declare something inside this block. Now if condition here is one block right whatever you declare here x= to2 technically this will not have access outside of this block. Okay. So this x will point to x= to 1 what you defined in the line number four. So whatever happened in this block stays within this block. Okay. And we call x within this block is a local variable to this block

8:30 itself. And once you come out and it does not have life. If you try to print x, it will point to the one which is in this main scope which is a global scope. Right? But whereas with keyword things act differently in JavaScript. So this is a globally scoped. So the moment when you declare x as a global scope now inside this block when you again have x= to 2 it won't create new variable because x is one global this will have access everywhere right. So the x= to2 will replace the existing one. Now here one is stored right. It will go and make this update to two. Though you are writing inside

9:16 one block, it will not create a dedicated variable within this block. It will update the global variable. Okay. So when you print console.lo, it prints two. Even after you come out of this block, when you print console.log here, what will this print? Will this print one or two? It prints two. As I said, this is globally scoped. And wherever you change X variable, it will change the first defined variable. It will update here itself. This variable will gets updated and that will travel. So no matter in which block you update the value, that will be the actual output. Okay? So you won't have a separate local

10:02 variables and global variables. If you use a V keyword, one variable will travel entire function. Okay? So if you want you know in typical Java style where when you declare some variable here that stays only within this condition but when you come out you know that does not have life. If that is your requirement then you have to use a let keyword. So let is a block scoped here where where is a function. So it is available everywhere and it's a globally scoped but let is a block scoped. Now that means same example let equals to one right and when you print console.log it will be one only. What happens inside this block it does not care. It is not

10:49 having access. If you declare a new variable inside it that variable scope will be in that block only if you declare with a let keyword. But if you make it where keyword then it applies to everywhere. All the X variables will be updated just because let is a block scope. Now if you have some X equals to2 declaration and console.lo will print two as long as you are inside this block. Once you come out of that block this variable will not have any life because this keyword what you assigned for this variable is the block scope and it lies within that block only. That's the difference between let end bar. Now even here right now if you don't declare

11:36 let anything in the prefix by default it takes as a where. Now y equals to three. Okay I did not tell whether it is a let or whether it is a where if you don't tell anything by default it's a where okay if it is where what happens if it is in block or outside block doesn't matter it is applicable everywhere because it is globally scoped. Now even after coming outside of this block if I write console.log then this will have access it will print three as an output. Okay. Though it is inside now let's see um I will call that function here. Okay let me I'll come to this very soon. So

12:21 basically I created one function where example 2 and I am calling this function that's all and remaining all this is commented. So I'm running this test. You can run any JavaScript file by giving node prefix node and the file name. That's it. It will run right here. You see 2 3 1 are the outputs. Okay. So let's try to see what's happening here. two. Let x equals to two within this block it is happily printed two. Right? And now once it comes out of this block y is three. Okay. So y is decide actually declared inside this block. Even if you declared inside it is having outside that means

13:07 that y is given where access. Even if you don't write anything in javascript by default it takes where access. The moment you put let keyword here instead of any default. Okay, if you don't declare anything it's a default value. Now let Y equals to three. Now what happens? The moment you put let the the scope is within this block only. Right now when you are trying to print something outside, this does not have any clue what is Y as it is let there. Now let me rerun this. I think it should give me error. Here you go. There is an error saying Y is not defined. It's just defined. We got output three. Okay. The trick here is you changed it to let and it became block scope. Now put it

13:52 default like this or put where and again the visibility will show because where is the global scoped right? And now you run things will work. You know this is one of the famous interview question. People try to answer this as just a theory saying where is a function scoped is a block scoped. But again you know when they really want to test your practical skills they will give you or ask you write a function like this and show me how things are working then where you know it will become tricky that's how people differentiate if if you are a theoretical person or a person who applied things practically. Now coming to const keyword it is exactly like let no difference the only difference here is it cannot be updated or redeclared. Okay. So all the let

14:38 futures apply here that the scope is block scoped only right. You cannot write outside but you cannot you know update it. Now here let x equals to 1. Right? Now before printing outside of this block you can make x equals to 4. This value will get updated and console.log it will print four. Okay. But with const problem is const means constant. So you cannot update it or redeclare it again once you assign value. So here x equals to 4 you can do and it will print it will change to four. But in const keyword once you assign value that's all. There is no change. Now see here x= to 1. This is inside the uh if block forget about it

15:24 for a moment. Now again I'm updating x x= to 3. This does not work. it will fail saying you cannot reassign value to x once you declare it as a constant let's see I'll comment out the previous function and I'm using this function here the error it says assignment to constant variable on line number 42 is not allowed but overall the differences is where is a function globally scoped no matter you are inside block or outside block the value keeps on updating and you have that restrictions with let. So that's why you know in best practices people always use let keyword so that way there is no conflict of variables used inside and outside the

16:10 block. But do remember the trick is if you don't define anything as a type here it still work but by default it takes it as a work even okay this is how you can explain if they want you to show programmatically right. So where are push, pop, slice, shift and unshift methods used when accessing array elements. So most of the people are good in accessing array elements in JavaScript with index or for each loop. That's fine. But there are few specific methods on these JavaScript arrays like slice, shift, all these. But are you sure on how exactly these are used? and

16:56 in what scenarios you can use it to write a code in optimized way in accessing this array. Let's see. So just as a brush up this is an array. This is how you declare with a square bracket and you write stuff inside that. Right now there are total four elements present in an array. Most of you know that this can be accessed with the help of index. Fruits of zero. Apple will be the output. Two 0 1 2 3. This is how you count indexes and if you want to access any element fruits of two cherry will be accessed. So this is how you access elements based on the index number. Great. Next, if you want to add a new element to array, so you can directly do that by using push method. Okay. So this

17:44 will help you to add an element to end of the array. So here by just having this array dot push of elderberry and then when you try to print the fruits array now you will see that a new element added at the end. So similarly if you want to remove the last element from the array in this case it's elderberry again. So there is a method called pop on the array itself. If you just say dotpop it simply pops up the last added element which is elderberry again and your output will be back to original one. Right? So these are how you can use push and pop methods in JavaScript. Next this is interesting unshift. Okay. So this will add an

18:30 element to the beginning of the array. So when you put unshift fig when you print output again you see fig is added in the beginning. So see the difference if you want to add element at the end push but if you want add something in the beginning unshift. How many of you know this? So this is how you might get a question. So people try to you know solve this problem by unnecessarily writing for each loop getting the size of the array and then doing I + one to add at the end or in the beginning you know they're ending up writing three to four lines of code but if you are a smart JavaScript engineer who is very good in the programming you should know stuff like this using unshift you can add in the beginning now let's say you

19:15 want to remove it if you want to remove at the end it's a pop if you want to remove in the beginning of the array then you can use shift method. Array dot shift will again help you to shift one step ahead and it pops up the fig from the beginning of the array. Okay. So this is difference between push pop shift and unshift. Now if you want to know the index so previously by calling the index we are able to print the value present in the array. Okay. Now I will give the value. Now tell me in which index it is. So there is a method called index of. Now in this array give me the index of cherry. So that means 0 1 2 cherry is present in the second index.

20:01 So output will be the two. So index of method is used to tell the number of the index. But if you want to get actual value then use array of index and the value will be printed vice versa. This is how it works. And this method will come very handy when you want to solve some logic. Do remember that. Now if you want to remove element with index. So you saw how to remove in the beginning with shift method. How to remove and with a pop. But in the middle if you want to remove splice. This is the method which will help you to remove. Now I want to remove the element present you know um probably at first index. So if you simply give splice of index

20:47 and then let's say one, banana will get removed. So apple is at zero, banana is at one. So this gets removed. So let's say from this index if you want to remove the next one. Now we can put like this index comma 1. So that means from this onset place which is banana. Now let's say index one. So that means from this index it will move one step ahead and deletes the cherry. So like that not only exact index from that index value let's say if you want to shift one position forward and make a delete that also you can do by giving like this. So this goes from index one more step ahead whatever you give in second argument. Now if you give two here so it comes to index one and move two steps ahead and

21:35 it deletes date. So like this you can remove any element with exactly giving the index or from index you can travel also by giving how many steps you want to proceed from that exact index and delete. So you can delete anywhere now right in the array you know how to delete in the beginning at the end also in middle anywhere by providing this splice method. So how many of you know there is a method called splice in JavaScript which does that right now this is the answer and you know simple iteration if you want to iterate over an array you can do it using for each block an array dot for each and when it iterates in the first iteration index will be zero in the second iteration

22:22 index will be one and third iteration you know the index will increment now fruit. So in zero what is there? Apple is there right? Apple will gets printed and the second time it iterates banana is there in the fruit banana will get stored and banana will get printed. So like this you can iterate if you want to print all the values present in an array. Very simple use for each and then that's it. Fruit will iterate and print the index value and this is index number. So this is how you can iterate over array. Okay. So these methods are enough guys especially to answer questions related to arrays. So don't worry in the upcoming uh topic we will do one exercise also combining all

23:07 these. So that way you will see a practical problem on solving using these methods. But before that you should be aware of all these methods like shift splice and pop push. Hope this help. So is JavaScript asynchronous? Of course it is asynchronous. That's how we answer right in interview. Prove with an example. Hm. Here where it goes tricky. So let's try to understand with an example what exactly as synchronous means. So we all know theoretically JavaScript is asynchronous. But what exactly a synchronous means? Now I have a six steps here where they are printing. I'm the first, I'm the second, third, fourth, fifth, sixth. Great. So if I just run this code, what happens? It

23:54 will all run in the sequence. See first, second, third, fourth, fifth, sixth. So synchronously they are executing in the sequence. Then where JavaScript is a asynchronous okay let me show you now for this fifth program. Let's do one thing. You know what in JavaScript there is a function called set timeout. How many of you know this? Okay. So basically this set timeout function take two arguments. First argument is the set of code or any function or execution thing and second argument it take time 2,000 milliseconds. That means 2 seconds. So that means whatever you write in the first argument that will

24:41 execute only after 2 seconds. So first of all it reads the second argument it will see what is the wait time. So whatever wait time you give it waits until the time before it executes the code present in the first argument. Okay. So in the first argument I have to write a sample code saying hey I am the sixth program. Okay. So for that I'll write one function. You can write function also as an argument anonymous function. Pretty straightforward. Okay. Inside this I'll write console dot log same format I would say 1 2 3 4 5 done right I'll remove fifth one from here and I'll write inside this okay I'm

25:28 just saying I am the fifth program and now if I run what happens technically if it is synchronous like Java it has to go in a sequence now what happens is it reaches here and then it says wait 2 seconds because that's what this function set timeout means. It will wait whatever time you give here before it executes what present in the first argument. But what JavaScript does is it will wait. But that doesn't mean it it waits here. It will continue its execution. Once the waiting is complete, it will come back and execute this. But that does not mean that it will block here before proceeding it next. That's what asynchronous means. In asynchronous there is no hard wait on any step by

26:15 default. If it is 2 seconds wait that's okay. The remaining program will get executed and then it will come back after 2 seconds is done to print this. But it won't wait here or it won't block here before proceeding next. It will continue. Now let's see. So 1 2 3 4 5 6. Previously everything is good. Now what I have added for fifth program I added a function where it will wait two seconds before printing this step. Okay, let's see. Here you go. You see it's waiting 2 seconds and then it printed fifth. But before fifth, it printed sixth. So that means it did not wait. I mean it came back later when it is ready. Okay. But it continued it execution. So 1 2 3 4 6 and then came five. That's what asynchronous means. Okay. It won't

27:01 synchronously wait on each before each step is completed. it just continues and then come back when something is ready again for execution. This is a problem right uh especially you know in test automation or any API building right you need to fetch data now if you want to fetch data from API it will take 2 3 seconds if you don't wait until then and if you proceed without data how will you execute next steps so that's where you should have some mechanisms to handle this asynchronous in JavaScript okay so how you handle there are next interview questions coming up after this question but you understood Right? When I say JavaScript is asynchronous, why? Prove them with this example and I'm sure they will be satisfied with

27:51 it. What are callback functions in JavaScript? A call back functions are a functions that are passed as an argument to another existing function. Okay. So this process is used most oftenly for asynchronous operations. This is theoretical definition and everybody can answer it. But what is the practicality behind it? That's let's try to understand now. Okay. So by looking at the definition it is clear that these call back functions are passed as an argument to another function. I have two functions here. Fetch data. Okay. which fetches the data let's say from server

28:37 I'll just write it in comments fetch data from server this is what this function does right and there is another function called process data whatever data is fetched and whatever it returns I'll process that data somehow I'll make some modifications all that that's what process data function does theoretically what you do you just call fetch data So data will be written and then you send that data to process data to process the data. Let's see this is how you usually start assuming that it returns data. Okay. And then first you call this fetch data like this and it have a data here

29:23 and then you will call process data of data what that fetch has been written. So that way the data will be fetched and processed here. But problem is JavaScript is asynchronous. So that means if you ask to execute in this order firstly fetch data will start fetch data might take few seconds to fetch data from server. Now you make a API call right you you you might see 2 3 seconds to get response. JavaScript does not wait. it will just continue in the further steps without waiting until the data is got from the server. So immediately it executes process data but this data is not ready yet. The data is you know we

30:08 are fetching from the server and it take 3 seconds and JavaScript is asynchronous. It won't wait. It will immediately come to the next step. Data is not available here. What it will process? So everything will go for a toss. Okay. So how to handle this scenario? When you know that one of the function may take time to get the data and that data probably required down the line somewhere then somewhere you know logically you have to program in such a way that you have to wait until the data is being fetched. So you can then only this should execute. So there are different ways to handle this. one is a call back mechanism and now in the recently promises also there let's see both the concepts so that way you can

30:55 answer any interview questions surrounding call back functions and promises now what we can do is so how to fetch the data from server now let me take one very special function called set time out it basically take two arguments so first argument and the second argument second argument is called timeout note. So when you give this that means it will wait 2 seconds before executing the first argument. Okay. So that's how we are holding the first argument to wait in the first argument. Let's say you want to fetch the data from server. Okay. So let me write one function. In the argument you can write function also like this

31:40 anonymous function. Right. And inside you can write whatever function you want to have you can have inside it. But you can write it very better if it is anonymous function you can do like this also you can put two brackets like this and put fat operator. Okay. And it's it's also same. So in this anonymous function you have to write something. So I have a data already here. Now it is clear right this simple function one set timeout function in this we are waiting 2 seconds and fetching the data okay now I know that after fetching the data only I have to execute this process data step right then only I'm able to process the data after data is fetched here so what we

32:27 can do in that case is you can pass this function as an argument to fetch data function so when you pass function itself to another function Instead of directly calling this process data name here, you can also say call back. The moment you say call back, this fetch data know that okay, someone want to execute their function after I am done with my work. That is what signal when you send as a call back. Okay. Now um so now I'll call like this. I'll just call this fetch data. I'm calling this function but inside I'll send process data here. This is how I execute. So these are two functions

33:13 and I'll to run this I'll call this fetch data and inside I'll send process data. But here I'll put generic call back. At runtime this process data will set in this call back. The moment this process data function send as an argument and attaches to this call back then this function know that okay let me execute my stuff first and then I will execute whoever sending me call back here. So after my steps are executed the data is fetched here right then I will say simply call back data. So I got a data here right like this. So when I say call back of data that's nothing but process data of data you are calling this function that's it with this data par values okay so you might be wondered then why should

33:59 I do all this stuff why can't I call directly like this simple problem is solved why this all call back headache all that right because ultimately what are you doing you are waiting until something is retrieved and you are calling this function right you can do like this only no call the function name inside this why to put call back name and again use call back of data like this. See we are making this generic. Now let's say tomorrow there is another function uh process data or modify data. Okay. Now even this function also have to wait until uh fetch data is being done. Now what will you do? Now if you hardcode with this process data you cannot use this function for modify. Okay. So again

34:44 you have to create another function. In that function you have to send modify data in this step. So somewhere generic thing is missing. But if you put call back off like this this looks generic. So that means this is saying no matter what function you send me. I will make sure that execute after I am done. Now what I can do just like fetch data of process data. Let me call that function again. But this time I will send call back of modify data. So like this I made it generic. Now I can call multiple functions which I think that I'm dependent on this fetch data without duplicating. So every time the function will fall in the call back and after all the execution whatever fetch is complete

35:30 you can call call back when you call this this will eventually execute the one what you are sending. So in the line number 23 process data will get execute will that replaced here in the call back of data. So that mean this function will get execute. Now when you run 24th step modify data will be sent here modify data of data and this step will get execute. So I can say modify processing and modifying data here. So like this to make it generic. Now read the definition again. Call back function is a function that is passed as an argument to another function. That clear right? another function and it is executed after some operation has been completed. That means after fetching data operation is

36:16 completed, this call back function will get execute. So send me as an argument. That is what the definition is saying. So I told you two cases. What if you simply execute in a sequence without all this stuff? Then JavaScript is asynchronous before fetching the data from server. Let's say if it takes 2 seconds then things will mess that before it get execute it will proceed to next step even without having a data in place. So that's why we are forming some linkage and when we are forming linkage I don't want to hardcode by giving the function name directly here. So I cannot use it for another function. So that's why I use the concept of call back. So the any function can come at runtime as a generic and then it helps us to solve asynchronously. That's the goal of the

37:02 call back mechanism. So here no return data is required now cuz everything is taken care by calling this function. Now let me run this code. Let's see how it will run. Okay, first data fetched. You see there is a slight weight of 2 seconds before you give the answer. So this is how control will start by calling the first function process data. Okay, data fetched and then processing sample data. So whatever you are sending in the data, sample data will be loaded here because you are calling process data. That function will be called here and the data will go here processing sample data. Now again you are sending call back as a modify data. Again data will

37:48 be fed but this time this function will get execute and you are seeing modifying sample data. So that's how call back work and we use this to make synchronous when the things are in asynchronous operations we will use call back so that things will fall in place as expected right now what are promises in JavaScript and now let's see what are the difference between callback functions and promises obviously with an example here so what is ultimate goal of using call back we the only Reason is we want to data being fetched first and then process it. So because JavaScript is asynchronous, we are doing all this call back data stuff, right? That's the

38:35 only reason why we are ending up doing this because we want to wait until this is done. But JavaScript is not waiting. So we can do that in another way um than call back. And this is the latest way of doing it which by using promises. Okay. So let me do one thing. I'll create another file so that won't conflict with our existing stuff. Right? New file concept five. So the same function what I have I'll place it here. You are familiar with this that it is using timeout function. It will wait 2 seconds and it will fetch data. So once the data is fetched we can process the data like this.

39:21 Okay, I want to tell like this. It will start first executing, right? It won't be done. It is still in the fetching mode and JavaScript immediately will go and try to execute it, right? That is going to happen every time. So I want to somehow tell my execution that wait until this data is written before you execute this. So something like this uh fetch data right if you want to call this function to execute this is how you call right fetch data. So I want to link somewhere that after executing fetch data only execute process data. I want to link my execution like

40:07 this. So when you say JavaScript is a synchronous it when you start executing in a sequence first it executes fetch data right? It is still in process. The data is not written. But it won't wait. It's immediately going here. But here I want to tell did you get the result from this guy? If you don't get wait don't execute me. What I will process when the data itself is not there for me. That is how I have to yell to JavaScript. So that means smartly somehow I have to tell like this um fetch data execute um something inside this this is how I have to tell it that's my ultimate goal and inside if you need uh I will execute this process

40:54 data okay so this fetch data will get execute then you will get data this is returning data right the data take and then process here. So I want to link like this. So that way when JavaScript is hurried up, it can't execute process data now because the way I handled it is wait until this data is written then take the data then only do this. That's how I'm putting a link. Awesome. So this is called promise. But you know you cannot write directly like this. Here there is so much concept behind it. I'm telling you the overall idea. This is how we will end up. But here you have to handle that with a promise. So that means basically when you see this step you are telling that you are resolving

41:41 the promise and then processing the information. Okay. So first to make this happen first we need to create a promise object and wrap within this. Now let me show you in instead of sending all this we will send a promise object like this. See I'm creating object of the promise and I'm wrapping all this code inside this. See what I'm doing here. We know this set timeout everything is there right now return of promise object. Now what happens is fetch data. Now previously I told wait until it gets data and do this. But how JavaScript will know whether this is this operation is done or not. So this linkage is fine

42:27 and I'm telling wait until this is done and proceed. But who will tell JavaScript this is done. So for that JavaScript depends on this promise state. Okay. So there are three states for this promise. Resolve pending rejected. So that means if something is fail within this it will tell that I am rejected. So when this is rejected it won't go inside. It will go only this then will activate only when promise is resolved. That means successful operation is being done. Then only this will activate. When promise came as a pending. So that means data is still fetching right. The server still did not send the data. So that time the

43:12 state of this promise will be pending. If fetch data is pending, it won't execute this because then keyword will activate only when promise is in moves to resolved state. If it is rejected then also it won't move. Okay. So that means this process data will never execute until uh promise moves from pending state. If it is in pending or rejected state, this will never execute. But that is what we want. Right? If this is pending that means data is not there. What is the point of executing this? If this is rejected, let's say it failed to send the data. Okay. When data is rejected, then what is the concept of going to this function? So this can be executed only when this is successfully executed. That means the promise state moved to resolved. Okay. So now what we

43:59 can do here is in the set timeout you got your data. Assuming you got your data, then there is a resolve property and then you resolve this data right like this. Okay, you are sending a signal to this your object that I am I am resolved. Okay, once you send a signal of resolve then promise will move to resolved state. Okay, and the moment it's the resolved state and then it will proceed and then execute process data. That is how we are making sure the operations go in synchronous way without randomly executing. Okay, this is new way of doing. Now this is not even required right only one step right processing

44:44 I'll write here only processing the data I can get rid of this also okay all the processing data code I'll write inside this function after it is resolved so same thing previously we have done with a call back of having two functions and you call that one function with function argument now here I'll keep it very simple you just have one function and it will tell when it is done simple as it is asynchronous. Once it will tell that it is done, then only we are proceeding. Okay, this is how it works. Now when you run this code immediately it calls this function it will take some time to fetch data. So what is promise state here? Pending is pending dot then no not allowed. It won't go inside it will

45:30 wait. It will keep on searching. The moment it sends I'm resolved this move to resolve status then immediately this will be notified. Hey, I'm in resolve state and then it proceeds to execute. So that's how also you can actually manage and handle than using call back. Okay. So our ultimate goal is to handle a synchronous operation making sure that process data is done only after data is being fed from server. There are multiple ways of doing it. You can do either with a call back or you can do like this with a promise by uh sending resolver data. Now let's say it return null data. Okay then you can simply send like this also reject I mean you can write one if condition that if data is sending null then send status like this

46:18 I'm rejected okay then this will be activated with a reject status and once it sees reject status it will never go inside it and your test will be completed without even going inside it there's no point right okay so you can send resolve reject all that as long as the execution is progress it automatically keep status to ending you explicitly need not write. So this is how you can handle promise and um call back. Now another cool thing is there here that awaits. So how many of you know awaits? So same thing we can handle it very simple manner. If you don't want to write dot then all that put await and fetch data and collect the data like

47:04 this. Okay look at this step now. Same thing it is doing. It is waiting until data is processed. And now you can write console.log processing. Yeah, same step you can write here. So either you can write this way or this way. This is more simple, right? Await. So how exactly this work? Yes. Instead of you know um calling that function and seeing whether it is resolved and then function doing all this syntax if you put await keyword this internally takes care and it wait until the promise is resolved. Okay. And whatever data it is giving back. Now it is giving us data right resolve of data.

47:50 So that data it will send back and it will push into one variable and then you can use same step again in the sequence. So line stops at line number 21. It won't move further when you have await keyword in place. It will make sure it will wait until this method promise comes to resolved state and then collects data and then only it moves forward to the next step. So await keyword is used to handle a synchronous operation or you can do this also. All this comes under promise family only. So that's why uh when you deal with a cypress or playright you call a method page.get text. Okay. And in playright particularly for every step you put await keyword because all the playright UI automation methods are returning

48:37 promise. Okay. You need to wait until that promise is resolved. Until you collect the data from the browser, right? If you don't write await keyword, everything will go for a toss in. It won't wait until the data is being returned from the browser. It immediately goes to next step. So that's why with prefix with the await keyword, so it will wait until data is nicely written and then you can further process it in the down the line. Or you can just say fetch data then and write like this. These are different ways you can handle promise and callbacks in JavaScript especially to handle these asynchronous operations. I hope you have understood the differences in this. So create inheritance relationship between parent and child classes. So in JavaScript so how inheritance

49:24 relationship is found between parent class child classes and how we invoke parent constructor from the child class. See the interview questions can be formed in multiple ways in this object oriented principle concepts like creating inheritance relationship. How we can invoke parent constructor from the child class. Okay. And create another file where you call a parent class methods from child class object. And then how to utilize super and this keywords to achieve the solution for all that. Okay. So everything comes as a baggage. You can expect multiple interview questions from this concept of inheritance on how to invoke parent constructors. What is super keyword,

50:10 this keyword and how they are exactly used in this relationship. Right? Let's try to understand all of them in one single go. Okay. So there are two classes guys. Person class, student class. So basically person class hold the details of that particular person like what is his name and what is his age. Now this is the class right in this class person there is a method called get details where the details of the person will be retrieved. Okay. So here constructor is used. So that means whoever using this class they have to send name and age to invoke this person class object. Okay. So name of the

50:55 person age of the person you need to send details. So you know it will be stored in its local instance variables and it will combine and send as a get details method. This is just a class where it exposes a name and age. Similarly there is a student class. So this class only talks about grade basically. Okay. But whose grade we are talking about? We need a person name, person age and their grade. But here name and age for these two things we already have another class called person. So why can't we utilize here instead of again uh creating name and age what we did is use use a keyword called extends. So that means we are inheriting the methods and properties of

51:43 person class into student class. So that way we can get access to this name, age, details, all that in the student class itself. Again instead of rewriting it, duplicating right. So for that you need to have a keyword called extense. So that means inheritance. This is parent, this is child. Using extends keyword you set that inheritance. Okay? So the moment you set it now you need a details of that person right I mean his name and age. So there's already a method here. So from your child class you can simply call that method like this super do.get details. Super refers to your parent class. Okay. Automatically when you say super dot get details it will check in

52:30 its parent class whether if there is any get details method is there. If it is there that method will be executed and it retrieves at this point. So this way instead of rewriting that get details method again you can inherit it from the parent class using this extends keyword and solve the things. Okay. Now there's a main.js file. So I'm creating the object of the student class. So basically this is the method I want to call guys. Get student details because this has everything. It has a parent class details like his name, age are storing in the parent details, right? coming from the parent class and the child class grade also is there specific to this class right everything I'm able

53:16 to grab from get student details now what I can do from my class I created object for this student class so this is how you create object with a new operator new of student okay and you need to send details because the student class if you carefully observe in the student class constructor is there this respect takes three arguments. So you are forcible to create a class object with these three constructors. Okay, without these three constructors, you cannot create object. Okay, so if you end up writing like this, it won't work. It will throw an error because the contract of the student class says that you can call me and create object of me

54:04 with these three attributes present. That's the goal of this constructor. Constructor is basically invoked when you create object. If it is invoked with a partial data, test will fail here. So you are forced to send name, age, agenda to activate the student object. So that's why here name is there, age is there, grade is there. So like this you have initialized student object. Okay. So once you create object, what happens is automatically this constructor method gets executed. The moment anyone create student object right the class students constructor will be activated. So that means this name age and grade these three details will exactly fall in this place. From here they will be assigned

54:51 to its local variables. Okay. Because this is a scope of this block. If it falls in this place there is no use. I want grade to use here which is coming from test. But the scope of constructor you see the braces are here to here outside of this there is no scope. So that's why we are attaching this grade to the local class instance. If you attach to this keyword this keyword will have access to entire class. So that's why the grade what you got from your test you are attaching to this this keyword here. So this grade you can call anywhere now because this has access to global and this got activated with the grade what is coming from this main.js.

55:37 This is how you form a connection overall. Now there is one interesting thing here. What is the super of name of age? Okay. So name age basically these two are used to invoke parent class constructor. So what happens is as a student when you are inheriting from your parent class your first duty is that before executing your own constructor you have to execute your parent constructor that is the primary goal and that should be the first step in your constructor method. Okay. So when you are inheriting somebody you also have to invoke their constructor right. So you you cannot

56:23 write again here. It is mandatory that that first line of your constructor code should be invoking the constructor of your parent. That's the objectoriented principle rule. Now how you can invoke that constructor? See to invoke student constructor what we did is we just created object. When you create object automatically that class constructor will be invoked. So that's how uh this got activated student.j JS this got run. Now inside you have to invoke parent right if you want to invoke any parent constructor just use keyword called super and then make sure what are the arguments it is expecting you have to respect it. So just like how stu initializing student constructor you

57:09 send all the three details what student constructor is expecting. Similarly, when you call your parent constructor, you have to first see what are those arguments. Name age. So, you have to send it from your um constructor step. Super of name, comma, age. When you say super parent class constructor and name age you already got from your actual main.js, right? And the scope of those will be within this block and within this block only you are calling them. So, this dot is not required because you are inside this only. No, right? Right? Like this name, age will be gone at runtime and this dot name this age these name age what you are saying will be attached to this keyword. Okay. Because of attaching here later here when you

57:56 call get details method right the attached this keyword will be fallen here name and age and it will be sent. See how all these are connected. Okay, one controlling step you are simply calling object of your class what you want. Okay, internally this has to take care of calling its parent constructor, initializing its parent constructor with its values and then you can happily call your parent methods. All this is happening using super keyword. Okay. Now when I say uh where are exactly super and this keywords are used for creating inheritance invoking parent constructors then you can explain like this. Super is used to call parent

58:42 constructor and parent methods and if needed parent properties also you can call but you have to use super dot and this is valid only in child classes. You cannot use anywhere only class which is extending its parent you can call those with super keyword. How about this? So this is in class instance which have access to entire file. Okay. So when you receive a values from your main.js to your constructor, the scope of that values lies within this block only. How you will expose this name, agenda and grade and distribute to your entire file here for all the methods. For that we use it this as a middleman because this has access to entire class as it is a class instance. we are feeding those

59:29 with by attaching grade this dot grade is now new variable grade is one variable this dot grade is another variable now okay so our actual value what we got we are attaching to this keyword and that's how this is used everywhere so to tell in simple terms um the constructor values if you want to access in methods using this keyword I'll make it possible right so this is how all these three are connected and this is how you can achieve inheritance with extends keyword and making things work with super and this keyword. Okay. So that concludes this question. So what is difference between equality operator of having double equals and triple equals and this is

1:00:15 also a famous interview question which will really help interviewers to understand how much practical on day-to-day knowledge hands-on knowledge you have on the JavaScript as a QA automation engineer you will be encountered this very frequently because you compare this with your expected and actual output to assert the s right so you should be having very familiarity on how double equals and triple equals work now let's see console.log log right if I just say 5= to 5 what happens so double equals now I'll convert this five into string so when you put two equals it

1:01:00 does not care about what kind of type it is now here five with a quote is a string type and five here is a number type so instead of considering the fact of the type it will convert one of the type to the other type and compare. Now here string five is there right? Internally it will convert to integer five number five and you know it compares. So type check it won't do it only checks visually the characters are same or not. Okay. So here output will be definitely true. But if you want type comparison as well strictly and then the same console.log log you can write with five triple equals and the output will be

1:01:48 false because number cannot be compared to string. So not just the values it will also compare types if you put triple equals. Okay. So now let me just run this test so you will know that how these are handled. Node concept 8. See first one is true and next one is false. So having three equal operator make sure your type also should match exactly. So how are you validating assertions? And the next interview question could be like how do you put assertions in your test? Do you use double equals or triple equals? You know there's no standard answer for it. All I would say is it depends. Okay. It

1:02:35 depends on what my requirement is. what I am really validating there. So based on that you can make a check right if I really want to just grab the text from the browser and compare right then obviously text will come from the browser and I'll also have text so type also should match so I put triple equals or if I want to grab something from a table okay so table sum should be 100 so expected 100 but in the output when I am grabbing they came as a string right so the 100 get text will return me 100 that is a string format in that case I'll put double equals or I'll convert that again to integerparint but again you know it depends in which scenario we are talking about but ideally I would prefer having

1:03:23 triple equals so we have a consistency on the way we are matching the comparison including the typing okay next what is difference between null and undefined in JavaScript so sometimes we see null in the output. Sometimes we see undefined. What exactly these are? See, you will see only null only if you explicitly write like this. Let a equals to null. Okay. And now when you try to print console.log of a and now you see the output what it gives us null because as of now you are saying I have not given anything. It's a null value and later you have a requirement to fulfill this value. So you start with a null. If you don't have anything to

1:04:09 initialize, see some variables demands initialization in the beginning itself. Some may not really need to initialize. So you would initialize with null in the beginning and later you will initialize with actual value. Okay? If it does not go to the loop of actual value, then it won't get initialized and your output will be still null. Okay? Now if you want to see what type it is, you know in JavaScript you can get type of any variable by simply uh writing like this type of a and you can print that in the output console.log. If you ask like this type of a it will tell you what kind of type it is. So I'll run this again. This is an object. So null also

1:04:57 is an object. Okay. So the reason why I'm saying is null and undefined are two different things. So this is like a number string. It's a JavaScript object which is do not have any property values. Simple an object which is not yet feed with values and we have told it as a null. Very good. Now I'll write like this. Let B I have not yet initialized it. Now what happens when I do this console.log B. So if you initialize with either value or null, it will tell that object is right now empty. It's waiting to feed. But if you don't give anything and if you live like this, you will get output as undefined. See defining with the null is also fine. That is definite defining something. But if you don't define anything, then it comes as undefined. Now I'm curious to

1:05:45 see what is the data type for this undefined. And here you will see that data type is also undefined. So this is the difference. So most of the students will say they are almost same. No almost same that word from you itself tells that you don't have clarity on what exactly how they differ. This is how they differ. They initialize. Null is also a JavaScript object which does not have any property values. But undefined is something which you have not defined at all. Okay. So you can talk about these examples and show them how they are differ and especially the operators double equal triple equals here there is no typing and here you have a nice typing

1:06:32 check. Okay, hope this helped to talk better in interviews. A classic programming interview question that involves JavaScript objects and array methods. Let's see. So this is the program. create an array of objects representing students with their names and scores. So basically first you need to create an array in JavaScript. That array should hold a JavaScript objects. Interesting. And that object should hold names and scores property key values. Great. Let's do that. So after you create that array of objects and you know they were willing to get the below result with an

1:07:18 optimized solution. So firstly we have to filter out students student JavaScript objects who passed in the exam with score more than 36 and then update past student name to uppercase. Initially they could be in any case lower or upper. It's not streamlined but in our code we have to first find out the past students who have more than score of 36 and then update their names to upper case and find out the total score of all the passing students. This is the problem you need to solve. This is a very good example that you can use filter method map and reduce in core array methods and then we will also use JavaScript objects. Okay. So this one

1:08:04 example will help us to hands on multiple things. Let's start from scratch very quick. So first create an array. How do you create an array? So let me start like this. Um students con students equals to array. Array in the sense I would keep a square brackets like this. Okay. So here where the array representation in JavaScript. Now inside array what they want? They want array of objects. So that means how the JavaScript objects are defined just with curly braces. Right? So this is one JavaScript, and this is another JavaScript like that you can write multiple JavaScripts objects. Okay? But this JavaScript objects should hold

1:08:52 um each object should represent a student basically. Okay? So that's how it becomes array of students. Each object is a student. So in that they need a name and score of a each student. So that means inside a name is one key probably you write something like allies is a name of the student and then they also want score property. So score equals let's say you know 45. So like this we need to create key value pairs. So I have some set of pairs instead of we wasting time I can directly copy paste. So this is fine right? You created an array array of student

1:09:38 objects where each student have key value pair of name and scores. So this is first the data you know data what you created to execute your program. Now from this data you need to filter out students who passed in the exam in getting score more than 36. Okay. So let's do some modification probably we'll put this as 25. So that's how now two students should fail David and allies right they have less than 36. So how do you filter? Students is an array right dot there is a filter method in JavaScript right now here where you can put a filter. So now what this filter method does it will iterate

1:10:24 through each and every JavaScript object okay out of this array. Now when iterates in the first iteration first guy will be retrieved. So that guy will get into the student they will get stored into this student object. So using this now you can write a particular function what you want to execute there. student and what do you want to do? Student dot score is greater than um equals to 30 five. No, I would say 36. 36 is a pass mark. Okay. Now look at this. What did we just do? So this filter method we

1:11:09 know that it iterates through array and every iteration first it iterates and picks the object. Okay, in the first iteration this is picked and the whole object is stored in the student variable. Now student dot score that means 25 will be retrieved. Is 25 greater than 36? No. So that student data will not be collected. Again the loop iterates in the next iteration. This guy will fall into the student object and student do. 55 will be retrieved. Is 55 greater than 36? Good. It gets shortlisted. So that means it filters. It filtered Bob guy. And again Charlie Charlie condition also met Charlie also will filter and next David when David object falls into this David.

1:11:54 Score 35. Now this condition is not true. So that will be not filtered again e. So like this except these two people these two are filtered out from the game and these three are collected. So all the collected guys collected JavaScript objects we can place in one variable past students like this. Okay. So now using one simple filter method we were able to map the condition and retrieve the filtered array. So now let me print out this in the output console.log and past students. Okay. So the whole goal here is for interviewer to check if you can use filter method effectively in one single

1:12:40 line to get the custom array based on your condition. Okay. So this filter method is all about iterating and checking the condition. If condition is true then it creates a new array with all that condition matched guys. So node concept 6 here you go you see it exactly filtered Bob Charlie Eve and left Alice and David because they are scoring less.

…