Top 100 JavaScript Interview Questions and Answers

Hello friends I always wanted a course that I can easily revise later just before my interviews because after doing the whole course or tutorial and later not being able to answer the questions any interviews is a very bad feeling if you cannot use your learning to crack the interviews then what is the purpose right then I myself created this tutorial whether you are a dotnet developer Java react angular or whatever developer JavaScript is a must to have a skill in your resume also JavaScript is the most popular language in this world now let me show you the structure of this tutorial here are the 11 topics from which we are going to cover 100 interview questions topics like JavaScript Basics variables operators conditions arrays Loops functions strings Dome error handling objects and events the more important the topic the more questions we will cover here are the features of a sample question mostly I will explain with the help of the diagrams for the better understanding okay then code screenshots for practicality you can code them in any code editor and you will get the same results and finally the simplest definition for remembering the important keywords in interviews because if you remember the technical keywords properly then it is very easy to explain the answers right now before starting I wish you all the best for your career and interviews my videos help candidates in getting the jobs but many candidates do not like or subscribe the channel just subscribe and post a comment whenever you get the job share your success story and that is my motivation remember keep giving interviews and never ever give up I am 100 sure you will get the job all right now let's start the first chapter what is Javascript what is the role of JavaScript engine first and very important question whenever as the user you open any website on your system for example you enter the URL google.com in the browser then this request will go to the Google server and the server will send three things to you HTML CSS and JavaScript HTML is just for displaying the static content and elements on the web page nothing else ESS is for styling them like the font color size font size all are dependent on CSS but now when you enter something in the search input field and press enter Then how will the browser respond and how this static page will interact dynamically with your request that depends on the JavaScript code or program which is also sent by the Google server and is written by the JavaScript Developers so basically the idea of JavaScript is Java Script is a programming language that is used for converting static web pages to interactive and dynamic web pages okay now the question is we receive only the JavaScript code from the server but how is the browser understanding that code and executing it that is because every browser has a JavaScript engine inside it okay JavaScript engine for example V8 is the JavaScript engine inside the Chrome browser spider monkey a JavaScript engine inside the Firefox JavaScript core is for Safari and chakra is for the edge browser so the definition of a JavaScript engine is a JavaScript engine is a program present in the web browser that executes JavaScript code now from coding point of view normally the HTML code is inside the index.html file like this right and if you want to make this HTML page Dynamic and interactive then you have to add the reference to the index.js file here and put all the JavaScript code in a separate index.js file I yes you can also put the code inside the script tag inside this index.html file itself but that is not the preferred way for big and Enterprise level applications okay because that will mess up the thing that will a mixing of HTML and Java script and that is not good great now you have the answer with you and you can easily answer this question what are client side and server side let's quickly revise or understand with the help of diagram these are the clients laptop mobiles and desktops all these have browsers to run web applications right and here is the server which is connected via the Internet whenever you type the URL and open the website on browser the request will go from your client machine to the server machine where that website is hosted okay so servers are also the system only machines only but they have heavy processors and are able to process billions and billions of client requests at the same time now the browser on your client machine is a software only okay and it can run three things HTML JavaScript and CSS similarly on the server the code can be written in any of these languages like c-sharp Java PHP node or any other server side language okay that is the idea finally the difference between them is a client is a device application or software component that requests okay and consume the services or resources from a server whereas a server is a device computer or software application that provides Services resources or functions to the clients so this is the short story of the client and server what is scope in JavaScript this is the very important concept related to the accessibility of variables in JavaScript there are three types of Scopes first is global scope where we Define the variable at top of the program like this then in function scope variables are defined inside the function and third is local or block scope where the variable is defined inside an if block or an else block or any other block okay now the difference is all three variables can be accessed as per their scope for example all three variables will be accessible inside the if block meaning at Block Level all three variables are accessible but only function and Global variable are accessible inside function the block variable is not accessible outside its own block okay then only Global variables can be accessible everywhere and function variables are not accessible outside their functions okay that is how Global function and blocked variables are defined and accessed finally what is a scope scope determines where variables are defined and where they can be accessed okay now you know the concept of scope now sometimes in interviews the interviewer will not ask the direct question but they will ask the question indirectly like a scenario based tricky question for example like this question what is the type of a variable in JavaScript when it is declared without using the where let or const keyword so for example here is the code you can see one variable without any where let or const keyword right now we are trying to access the variable outside the if block so the question is will it give some error or what will happen so this is an indirect question so the answer is by default what is the type of the variable the answer is where is the implicit type of the variable when a variable is declared without where LED and const keywords so in this case it will consider where as the type and therefore accessible outside the block as well and finally give 10 as the output got it so it's simple right but sometimes we ignore these kinds of short questions and it can impact our interview results hi here is a quick notification if you are a kind of a person who do not want to miss anything then here is a full JavaScript interview course with 200 questions here we will cover additional questions on Advanced topics of JavaScript and also we will cover 50 scenario based questions and coding questions in JavaScript also the link of this PowerPoint and PDF book with all the codes is present in the description for revision okay many students were able to crack the interviews via my courses all right let's continue again with our next question what is hosting in JavaScript first of all it is not related to website hosting or server hosting it is different there is one extra I here twisting sorry for my pronunciation but it is hoisting let's see the code first for example this is the code here function is called first and then we are declaring and defining my function after calling the function now the question is how is it even possible to call the function first even before declaring and defining it this is possible because JavaScript code will be executed in top down approach then this should give an error exactly but this is possible because of Hosting when you run this code the JavaScript engine will automatically move the method declaration to the top of the scope okay so the code will be rearranged before execution okay JavaScript engine will itself do it and it will therefore work one more example this code where a variable is declared at the end will work and give the output again hosting will move the variable declaration to the top of the scope at the compile time so it will also work but remember the output with the let keyword will be different and that is because it does not allow hosting okay so you can try you can see the difference finally the definition of hoisting is oysting is a JavaScript Behavior where functions and variable declarations are moved to the top of their respective Scopes scope remember during the compilation phase okay I already explained the X scope in previous question that is the answer to this question what is Json the definition is Json which stands for JavaScript object notation is a lightweight data interchange format okay what is this and Json counter consists of key value pairs for example here you can see one sample Json format that is used to exchange data between web apis so basically if you see this diagram here whenever we send data to the API some request to the API that API mostly receives the data and send back the response data in word format in Json format so basically it's a language by which the UI and the web API will communicate basically and there are other languages also like XML but nowadays Json is very popular because it is very simple to understand so mostly we go with Json only congratulations on completing the basic section now we will go deep into every one of the basic concepts maybe we will repeat some questions from the basic sections again but that is only only for making the connection and for the sequencing purpose you can skip those basic questions if you already understand them hundred percent okay in this section we will see six questions on variables and data types primitive non-primitive data types null undefined differences then type of operator and what is Type coercion Concept in JavaScript let's start with the first question what are variables what is the difference between where let and const keywords very important question the simplest definition of a variable is variables are used to store or hold data for example here 10 is the data or value and we used the where keyword to store it similarly other than where we can also use the let and const keyword to store the data the scope of where variable is inside the whole function whereas the scope of let and const variable is inside the block only like an if block a while Loop log Etc now let me show you the differences between them with the help of the code here is the code example for the where keyword here we have one function example and inside that we have an if condition that is always true inside it we are using the where keyword to assign the count in number value of 10. when we print the count inside the if block the output will be 10 which is expected but when we print the count even outside the if block even there outside it will print 10 as the output like this the point is where creates a function scoped variable meaning that even though you defined the variable where inside the if block it is still available outside the if block because it is a function scoped and not block scoped and in the programming World block scoped variables are considered a better way because they give clarity about the life of the variable therefore as the solution the better way of defining the variable is now using the let keyword here is the same code just I replaced this where count variable with the let keyword now this let variable will work only inside the if block and if you try to access this variable outside the if block then you will get the error count is not defined error so the reason is let's create a block scoped variable not a function scoped variable okay therefore a variable will be available inside the same Block in which it is defined inside the curly braces this keyword LED is more popular because it will not create confusion about the scope of the variable all right the next keyword is the const keyword which purpose is slightly different from the where and let keywords here in the code you can see we assigned const Z equal to 10 and then we are trying to assign a new value to Z but then our program will throw an error while logging the reason is cost can be assigned only once and its value cannot be changed afterwards therefore use const when you do not want to change the value of a variable after the first assignment okay it's used is different from the let and wire keywords great now you know all the differences between these three keywords and like your favorite movie or song you are not going to forget this ever what are data types in JavaScript very basic question for example here we are assigning a number value to a variable right so JavaScript will automatically identify by looking at this value that the data type of this age variable is a number okay you do not need to write the number or integer here explicitly immediately here you can see we have more data types and in all cases by looking at the type of value the JavaScript will automatically identify the type of the value whether it is a string type Boolean type and undefined Type R or a null type now all these are primitive data types and we have two categories of data types primitive and non-premitive for now just remember that primitive data types can hold only one and single value like I have shown here in these data types and non-primitive data types like objects and array can hold multiple values which I will show you in the upcoming questions so finally the simplest definition of data type is a data type determines the type of a variable and now you will never forget this what is the difference between primitive and non-primitive data types very important question here is the list of data types in JavaScript first of all primitive and non-primitive are the categories of data types the actual data types are number string Boolean undefined Etc which comes under primitive data types similarly object array function date and regex are the data types that fall under the non-primitive category these two categories were created because they have some fundamental differences let's talk about primitive data types first and here is one primitive data type number the first point about primitive data type is primitive data types can hold only a single value which is why we also call them simple data types second point about them is primitive data types are immutable meaning their values one assigned once assigned cannot be changed for example if you change the value of a number which is a primitive data type like this we assigned a new value to H then from outside it looks likes the variable value is modified but internally a new variable age is created by the memory of the JavaScript and assigned a new value to it what happen actually is for example this is the memory managed by the JavaScript engine inside the browser when a new age variable is created for the first time a new memory is Echo occupied by this variable and the value is stored there in the memory address but when the variable value is updated or modified to suppose 30. then again a new memory is assigned with a new address like this and now the variable age age is assigned to this new memory address with a new value grid right so that's why numbers string and all primitive data types are immutable because their values are never changed immutable English meaning is a thing that cannot be changed or modified right all right this is all about primitive data types now let's check out non-premitive data types and here is our first non-primitive data type which is an array and here is one another one which is an object I will cover them in detail later but here you can identify the first point about non-premitive data types non-primitive data types can hold multiple values and second point they are mutable and their values can be changed so if you modify this 3 to 4 in the same array then it can be done in the same memory at the same location or at the same address great now let's conclude the differences between them the first difference is numbers string booleans non-defined null are primitive data types and objects arrays functions dates and rejects are non-primitive data types second primitive data types can hold only single value whereas non-primitive data types can hold multiple values and methods also the third difference is primitive data types are immutable and their values cannot be changed whereas non-perimitive data types are mutable and their values can be changed and the last difference is primitive data types are simple data types whereas non-primitive data types are called complex data types why because they can hold a list of students single values function arrays anything they can hold that's make them complex right now you are not going to forget this two differences between them ever what is the difference between null and undefined in JavaScript let's first understand the conceptual differences between them suppose you have a variable value of 0. this is something like a stand on the wallpaper with a paper holder so that's an example this means there is a very valid variable with a value of the data type number that is clear if the value is empty then it means it is a string data type right but if the variable is assigned a null that means there is just a stand on the wall with no holder means there is a valid variable with a value of no data type in future you can assign any number string or any data type value to it and if the variable is undefined that means there is nothing on the wall this means it is an incomplete variable which is not assigned great now let's understand the differences with the help of the code here is that undefined code as you can see here we have declared a variable but no value has been assigned to it and then we are printing the variable and the output is undefined simple this is undefined which is never assigned a value the definition is when a variable is declared but has not been assigned a value it is automatically initialized with undefined on the other hand here is the code for the null here we are declaring the variable and assigning the null value to it and then we are logging the null variable and output is as expected null no surprises the definition of knowledge null variables are intentionally assigned in null value now the real question is when in your applications will you use undefined and when you will use null the answer is undefined can be used when you do not have the value right now but you will get it after some logic or operation then null can be used when you are sure you are not going to get any value for the variable soon so that is the differences between them what is the use of type of operator dot question let's see the code first here we have different variables assigned to numbers string booleans objects arrays and function now the question is how can we get that type of them or that purpose we use the type of operator something like this before the variable name just put this type of operator and you will get the actual type of the variable in the output like this you can get all the types of all the variables by using type of operator the definition is type of operator is used to determine the type of each variable in real applications also type of operator can be used to validate the data received from external sources or apis for example if you are expecting a number value from some external API then after receiving the data from API you can validate the type in your JavaScript application by using the type of operator if it is the number then fine but if you received a string from the external API or something else something else data type then you can show the error that is the purpose what is Type cohesion in JavaScript as always let's see the example code first here we have defined some variables with types like string number Boolean value and so on and here is one code what we are doing here is adding a string plus a number inside the console log how is it possible to add a string to a number it is possible because of type cohesion type coefficient will do the automatic conversion of the number to the string and then concatenate both the strings the result output will be 4 2 4 2 like this definition of type coefficient is type coefficient is the automatic conversion of the values from one data type to another during certain operations or comparisons another example is like this here is the Boolean value true will be automatically converted into a number 1 by type coercion and the output will be 42 plus 1 equal to 43. similarly we can use type coercion with the comparison operators like this the output will be true because type coefficient is converting in number 42 to a string now the question is what are the uses of type coercion in real applications first uses type cohesion can be used during string and number concatenation second is type cohesion can be used while using comparison operators that's it congratulations for completing the last chapter in this chapter we are going to cover questions about operators and conditions here are the eight questions difference between unary binary and ternary operators what is short circuit evaluation operator precedence type of condition double equality and triple equality operators and finally the difference between spread and rest operators all right let's start by revising the basic first question what is operator precedence very short and simple question if you remember the board Mass rule then you already knew this here is the code as you can see we have three variables a b and c now how will this expression will be evaluated till we do a plus b first or a minus B inside the bracket first the point is as per operator precedence operators with high precedence are evaluated first and the Precedence is that the first bracket will be resolved followed by division then multiplication addition and lastly subtraction so here first inside the bracket a minus B will happen then multiply finally the ADD and you will get this as an output this is operator precedence what is the difference between unary binary and ternary operators here we have three operators unary binary and ternary they are operator based on the number of operands okay so for example here is the code for the unary operator here you can see that this minus is applicable to this single operand a so that's why we call it unary operators because it is applied to the single single operand and the output will be like this minus 5 and then the second increment operator plus plus a it is also single operand so it is also unary again so this is unary operator the second one is binary operator you can see the code here we have two operands X and Y here this plus operator is dealing with two operands that's why we call it binary operators very simple right the third one is ternary operator which consists of question mark and colon for this we have three operands first here is this condition which will result in two true or false that is the first operand second is this yes yes just before the question mark the second operand and the third operand is the one which is after this colon this no this is the third operand so here we are dealing with three operands that's why we call it ternary operators and it is the most important one also what is short circuit evaluation in JavaScript the term short circuit terms comes from the electricity you know we light a bulb by a cell something short circuiting and then if we connect the plus and minus directly before the bulb like this then a short circuit will happen because the electricity will take the shortest available path to complete the circuit so the whole circuit will not be completed because we now have a short circuit short short way similarly in JavaScript also sometimes the whole operation will not be completed because of short circuits let's see the code here we have a variable result 1 which is equal to this expression here we have used the and or logical operator and we know that as per the end operator if any one of the left side or right decide condition is false then and will return the false result in this case the left side is false so now and has no need to evaluate the right side operand because we already got the answer from left side the short circuit that's it what we call a short circuit okay when we get the result only by doing the half operation in another example is here we are using the or condition and as per the on candy or condition if any one of the right or left or right variable a value is true the or will always return true so again R will only evaluate the left side expression which is true dot path dot circuit will happen and therefore the right side function will never be evaluated but yes if left side is false then short circuit will not happen okay and or operator will evaluate the right side to get the final value finally the conclusion is dot circuit evaluation stop the execution as soon as the result can be determined without evaluating the remaining sub expressions now you will never forget this concept for the rest of your life what is operator precedence very short and simple question if you remember the board Mass rule then you already knew this here is the code as you can see we have three variables a b and c now how will this expression will be evaluated till we do a plus b first or a minus B inside the bracket first the point is as per operator precedence operators with high precedence are evaluated first and the Precedence is that the first bracket will be resolved followed by division then multiplication addition and lastly subtraction so here first inside the bracket a minus B will happen then multiply finally the ADD and you will get this as an output this is operator precedence what are the types of conditional statements in JavaScript very important question in the history of any programming language we know conditions if condition 1 is true true they do this but if it is false do something else or run another condition something like this right new conditions can be handled in different ways in programming and here are the types of conditional statements you can use anyone to evaluate conditions in your applications first the most important and the most common one is if else statement here is the code example in this example we have a variable x equal to 5. then with the help of this if condition we are checking that X is greater than 10 or not in this case as x equal to 5 so this condition is false and the execution will not go inside the if block then it will go to the llcif condition and check if the x is lesser than 5 which is again not true so finally in this case it will go to the else condition and it will print 3 as the output this week we call if else condition the second type of conditional statement in JavaScript is the ternary operator here we have a variable y equal to 20. now we will create a new variable Z or Z which will first check whether Y is greater than 10 so this is the condition in this y equal to this case y equal to 20 so the condition is true and if the condition is true then the first value just after this question mark will be the result right now it is 1 here but suppose y equal to is equal to 5 then 5 is greater than 10 will will be false this condition will be false and in that case the value next to this colon symbol which is 0 will be the final value of the Z that is a ternary operator then the third type of the condition is the switch statement here you can see we have a variable a equal to 5 now inside the switch statement we will accept the a variable value like this and we'll check it Case by case if a is equal to 1 which is which it is not right therefore it will not execute this case code then the next case is true because a equal to 5 which is true therefore execution will go inside this case and print 2 on the console then this break statement will exit the code from the switch statement listen carefully if we do not put the break keyword here then then this next case or the default statement will also be executed and in that case the output will be 2 and then 3 also so that's it and yes here the last default will be executed when none of the above case statements are true or fulfilled that is the difference between these three types of conditional it statements in JavaScript what are the types of conditional statements in JavaScript very important question in the history of any programming language we know conditions if condition 1 is true true they do this but if it is false do something else or run another condition something like this right new conditions can be handled in different ways in programming and here are the types of conditional statements you can use anyone to evaluate conditions in your applications first the most important and the most common one is if else statement here is the code example in this example we have a variable x equal to 5. then with the help of this if condition we are checking that X is greater than 10 or not in this case s x equal to 5 so this condition is false and the execution will not go inside the if block then it will go to the llcif condition and check if the x is lesser than 5 which is again not true so finally in this case it will go to the else condition and it will print 3 as the output this week we call if else condition the second type of conditional statement in JavaScript is the ternary operator here we have a variable y equal to 20. now we will create a new variable Z or Z which will first check whether Y is greater than 10 so this is a condition in this y equal to this case y equal to 20 so the condition is true and if the condition is true then the first value just after this question mark will be the result right now it is 1 here but suppose y equal to is equal to 5 then 5 is greater than 10 will will be false this condition will be false and in that case the value next to this colon symbol which is 0 will be the final value of the Z operator then the third type of the condition is the switch statement here you can see we have a variable a equal to 5 now inside the switch statement we will accept the a variable value like this and will check it Case by case if a is equal to 1 which is which it is not right therefore it will not execute this case code then the next case is true because a equal to 5 which is true therefore execution will go inside this case and print 2 on the console then this break statement will exit the code from the switch statement listen carefully if we do not put the break keyword here then this next case or the default statement will also be executed and in that case the output will be 2 and then 3 also so that's it and yes here the last default will be executed when none of the above case statements are true or fulfilled that is the difference between these three types of conditional it statements in JavaScript what is the difference between double equal to and triple equal to very important question here you can see the code for double equal to which we also call it lose equality the reason is that as you can see here one is the number and the other one this is a string but double equal to operator will convert this one number to a string first by using what you remember type coercion yes by using type question and then double equal to will do the comparison and it will give the result as true and in the second line too this true will be converted to 1 first and then it will be compared and again the result will be true the point is lose equality or double equality operator Compares two values for equality after performing the type question whereas here you can see the code for this triple equal to we could also call this a strict strict equality because it will not use any type question before comparison okay and the values will be compared as they are as they actually they are and here is the result will always be be false if the values are from two different data types okay so the whole point is strict equality operator compare two values for equality without performing the type coercion that is the difference between the two in real world application normally triple equal strict equality or triple equal to is preferred to get more accurate comparisons okay so that is more logical right right I think now the difference is fixed like a stamp in your memory what is the difference between spread and rest operator in JavaScript today I will clear the confusion between spread and rest operators which looks same three dots right let's first explore the spread operator here is the code the spread operator is denoted by these three dots here you can see one array and then we are using the spread operator to expand to expand the array to individual elements one two and three so here the output is a list of individual elements not an array the definition of spread operator is the spread operator is used to expand or spread elements from the iterable into individual elements so iterable means array string which can be spread okay into individual elements now we can use the spread operator for three purposes basically the first purpose is for copying an array so in the code you can see we are using the spread operator to Breaking the original array into individual elements and since this is inside square brackets therefore these elements will be converted back into an array which is assigned to the variable copy Direction the next use of spread operator is merging arrays here you can see how we have two arrays and how we are putting both of them inside the square brackets with spread operators and finally we are getting the merged array right the last use of spread operator is passing the multiple arguments to a function suppose you uh you have an array with the multiple elements like this then while calling the function you can pass this array with the spread operator and in the function body you can receive the individual elements sent by this spread operator okay so this is the whole story about the spread operator where we are just spreading the a single array to multiple individual elements and mostly in most cases we use spread operators but sometimes in very few cases we also use rest operators okay so let's quickly explore all them also uh here you can see we are calling a function display with few arguments here now in function body we can receive the argument in a partial way partial means here you can see the first and second parameters represent 1 and 2 and this parameter uh rest arguments with these three dots will be considered as the rest arguments rest of the arguments three four five okay these are the rest of the arguments right okay so that's why its name is also rest operator because it represents the rest of the arguments which are left finally the definition of rest of operator is the rest operator is used in function parameters to collect all remaining arguments in an array remember it gives the rest of the arguments in an array so that's the whole story I think now the difference is very much clear to you now and one is to spread the array into individual and element and the other rest is for represent the rest of the elements congratulations on completing the last chapter this is the fourth chapter of this course and it is a very important one arrays here mostly we will cover questions on the method of the arrays index of find method filter slice push concat pop shifts splice map and for each methods we will compare all of them and see when to use which one in our applications then we will explore array destruction array like objects Concepts also okay all right let's start by revising the basic first question and you can fast forward or skip it if you already know it what are arrays in JavaScript how to get add and remove elements from arrays very basic and important question here is a simple array holding the array elements and below is the index of The Elements by which we can access those elements right and like this code we can declare an array in JavaScript here Roots is an array data type and it contains multiple elements inside it like Apple's bananas oranges Etc so the definition of array is an array is a data type that allows you to store multiple values in a single variable now the question is why do we need arrays in our projects or applications we have a lot of data and without arrays the data will look something like this unstructured unstructured data here different data is stored in different variables and it is very difficult to maintain this but we can structure this unstructured data with the help of variable arrays like this here different types of data will be in very few arrays which is all which is also very easy to maintain so that is the advantage of arrays to structure the data in a better way the next part is how to get add and remove elements from an array and here is a list of the methods of the arrays to do all these operations get methods are there to get any specific or particular element of any array add methods are used to add more elements to an array remove methods are used to remove or delete elements from an array then modify methods are used to modify the elements of the array for example if you change the spelling of Apple element by using the array modify methods right then there is a list of other methods also that can be used for different purposes I will discuss all these methods in one by one in upcoming questions but here is a quick summary of some important methods the push method is used to add given elements at the end of the array the unshift method is used to add the given element at the start of the array then the pop method is used to remove the last last element of the array shift method is used to remove the first first element of the array then we have the filter method which is used to filter the array based on the condition the map method is used to modify each element each element of the array and the concat method is used to add arrays into single array great now you know what is an array why we need it and what are the sum of the important methods of it right what is the index of method of an array it's very simple suppose you have this array now here the first element of the array will have index 0. then the second element index will be 1 then 2 and so on now to get the index of any element in the array we use the index of method something like this here the index of will accept the element as a parameter and get the index of that specific element in this case the index of the element 3 is 0 then 1 and 2 so what is it it is the output is 2. the conclusion is index of method gets the index of a specified element in the array what is the difference between the find and the filter methods in Array very important question here is the list of get methods that are used to get elements from the array okay find filter and slice method let's check out the differences between the find and filter method first suppose we have an array as a variable that contains a list of numbers assigned to it now the use of the find method is find method gets the first element that satisfies a condition condition let me show you how here you can see that the find method will accept all the elements of the array one by one in this num parameter by using the arrow function so that is Arrow function Arrow function are like normal functions only and they do accept parameters like normal function then inside the find method there will be this condition like this and the find function will return the first element of the array remember listen carefully the first element of the array for which this condition is true in this case for element 2 this 2 percentile 2 will be equal to 2 0 right because if you divide 2 by 2 then the remainder will be equal to 0 therefore 2 will be the result element of the find function which will be stored in the variable C again now this condition is also true for this next Four Element also but remember with the find function you only get the first element that satisfies the condition great this is fine then we have the filter function of the JavaScript this is used very very frequently in many application and it is very very important suppose you have the same array at this now the use of the filter function is the filter function gets an array of an of elements from an array that satisfies the condition so basically the find function will find the just the first element but the filter function will get all the elements that satisfies the condition Theta code and here the logic is exactly the same as find function all the elements of the array will be accepted as the parameters one by one and inside there will be a condition now the difference is that for whatever element this condition is true all those elements will be added to the result array and that array will be finally assigned to this variable D got it so this time you will get 2 and 4 in the result array because both elements satisfies the condition remember the result will be an array this time with the filter method not a single element okay so that is the difference between them all right the way I explained it I think this difference will remain in your mind forever what is the slice method of an array here is the list of get methods that are used to get elements from the array find and filter I already explained in previous question now let's explore the slice method suppose you have an array of letters like this now the use of the slice method is the slice method gets a subset subset of the array from the start index to the end index okay start index to end index but remember the end element will not be included okay so let's see the code here first the slice method of an array will accept two parameters the first is the start index and the second is the end index then it will get all the elements from this start index to the end index but remember again the element on the end index at the end index will not be included so Sub in this case one is the start index with element B and 4 is the end index with the element e right so the result is BCD again the last element e the E will not be included by the slice method that's all about the size method and it is very frequently used in JavaScript what is the difference between the push and concat methods of an array basically we have two methods for adding elements to an array and they are push and concat methods let's see the push method first suppose we have this small array now if you want to add more elements to this array then you we can use the push element method like something like this and finally new elements will be added at the end of the original array like this so the point is push methods will modify the original array itself okay now let's see the concat method if we have an existing array then we can use the concat methods to add new elements to it but remember by adding the elements you are basically creating a new array which is then assigned to this array 3. so when you log this array 3 it will give you the modified result that's fine but if you log the original or old array 2 like this then the original array is still unchanged and not modified and that is the difference the point is that the concat method will create the new array and not modify the original array whereas the previous the push method will actually modify the original array right that is the difference what is the difference between the pop and the shift methods of an array both these pop and shift methods are used to remove elements from the array okay let's start with pop for example here is an array of numbers now if you will use the pop method on this array then the pop method will get the last element of the array as the result see and if we log this bobbed variable the output will be 4 and now if we will print the original array what's the output will be 1 2 3 the point is op method will remove the last element of the array and that's it the next method for removing the arrays elements from the array is shift here is the array and now we will apply the shift method to it like this and the in the result we will get the first element of the array so when we printed the shifted number it will be the first element which is one in this case and if we print the whole array we will get elements 2 3 and 4. the reason is shift method will remove the first element of the array so one is removing the first the pop is removing the last and that is the difference between them what is the splice method of an array uh I will say this one is the most important function of the array first the definition yes the splice method is used to add remove or replace my elements in Array so it's like a very you know can do multiple things see this is the normal splice method where we accepting start index as the first parameter and delete count as the second parameter meaning the numbers of elements to be deleted this delete count resembles the number of elements to be deleted okay and after that there can be a multiple parameters for elements which are going to be deleted let me show you the code example for example this is the array we have then we can use the split splice method to add elements to this array like this here we are adding X and Y ladders from the starting first index of the array and we are not removing anything from the array that's why this delete count is 0 right now as a result X and Y are added starting from the index 1 like this this is how the splice method is used to add elements to an array the next used use of the splits method is to remove the elements of the array right right now our array is the last output okay this array and in this code we are removing one element from the start index 1. so this x at index 1 will be removed from the last output and this will be the final new array output here if this delete count is 2 then X and Y two elements will be removed okay that's how the remove by the splice will work okay that's it now we will use the splice method to replace the elements in the array so what was our last output array was this one now like with this code we will replace the element in at index 2 with Q letter remember replace is not a direct operation here uh in reality what will happen first one element will be deleted from index 2 which is the letter B here then the Q element will be added at index 2. so that's how replacement is working like add and remove works with array okay first it's like not directly it's indirect at the end you might ask when we have single array function to add a remove or replace ointment of array elements in an array then when we have separate functions right we have then why do we need other functions in arrays to add or remove like why we have this splice function see this splice function minimum requirement is the start index okay so if you have the start index with you then you can use it okay then you can use this splice function but many times we do not have it the start index then we can use the other array functions to perform different operations okay so now you will remember this concept and you will remember when to use it when to use the previous functions right that's it what is the difference between the slice and splice methods in of an array first of all both methods are completely different just because there are some some similarities in their names that's why this is asked in many interviews so the slice method is used to get a subset of the array from the start index to the end index where and is not included whereas the splice method is used to add remove or elements replace elements in an array based on the start index okay so completely different purpose but yes their name has some similarities that's why it's an important question what is the difference between the map and for each array methods of an array if we have an array and we want to iterate each element and modify each element of the array then we have these two methods map and for each okay that is the similarity between them first suppose here is an array containing the numbers 1 2 3 and as an output we need this array 2 4 and 6. basically every number has been multiplied by two or that first we will use the map method something like this here we are passing each element of array 1 as the parameter e by using this Arrow Arrow operator then the parameter will be multiplied by 2 for all the three elements of the original array one by one and as the result array will be stored in a new way array variable map array okay and we will get the expected output so the definition of the map method is the map method is used when you want to modify each element of an array and create a new array with the modified values okay that is map on the other hand if we see the code of the for each method here you can see we have an array and we have used the for each method and the logic is all same same like map method only and output is is also same right but there is one difference here you will get not get an array an array as a result of this operation okay but we will get a list of numbers 2 4 6 they are individual numbers not an array we do not have those brackets of array here see so this for each method is written a list of numbers not the array the definition is the for each method is used when you want to perform some operation on each element of an array without without remember this what without creating the new array here even if you log the original array array to see it is still the same it has not been changed and that is the difference between two now you will always remember you have to use the map method to modify the or modify the elements of the original array but use for each method to modify the elements and get a new list of elements without without modifying the elements of the original array that is the difference between the two again a very short question how do you sort and reverse an array if we have an array like this then by using the sort method of an array we can get the sorted array like this and we can also reverse this array by using the reverse method like this so this is the output the array is reversed okay the final answer is arrays can be sorted or reversed by using the sort and the reverse methods of the array okay now remember this sorting method this sort method will not work with the directly with numbers there you have to put some logic will I will explain that is a scenario based question so it will work with the strings the characters but not with numbers directly what is array D structuring in JavaScript good question if you remember when our application had lots of unstructured data that could take multiple and different type of variables to store right without arrays then what we do we use arrays to structure the data which is a very good practice right but sometimes we have to destructure the array data back into the variables and that is called restructuring the definition is array is already structuring allows you to extract elements from an array and assign them to the individual variables in a single statement the second point is arrayed structuring restructuring is introduced in Akamai script 6 es6 let's see the code how to do it in code suppose we have an array of roots like this now destructuring means assigning this fruit array to a constant like this this assignment will assign each element of the fruit array to these individual variables first fruit second fruit and third fruit now the question is what is the benefit of doing all this so basically when you do this you can get individual elements of the array by using individual variables directly see the values of variables are now the individual elements of the arrays all right now I think you got it what is the array D structuring in JavaScript what are array-like objects in JavaScript very good question and very important question also this is a very misunderstood concept for example in this piece of code we are assigning a string to a variable Str and then logging this Str then we are logging the string dot length and then logging the first element of the string by using 0 0 as the index okay finally we are getting the proper output as well right but if you notice here the behavior of this string is something like an array only because it has this length then it has this index element it is similar to array right in Array also we do like this but this string is not an array so what's what is it what is it we also call this array like objects array like not array the definition of array like object is array-like objects are objects that have indexed elements and a length property similar to arrays but they may not have all the methods of arrays like push pop filter so all those methods are not there in the array-like objects similar to Strings we have like arguments HTML collection or they are also array like objects okay the first one here is arguments suppose you call a method something like this bypassing this one two three now in the function declaration you are not mentioning the parameters but still you can receive the arguments by using the arguments keywords in JavaScript which is basically an array of the arguments received from the above function only and then you can use the length property of this argument keyword as well which will give you 3 as the output and similarly you can use the index to get the first element of the arguments very similar queries right but again you do not have the push and pop methods with this arguments so these arguments are also array-like objects but they are not the arrays the next one is HTML collections here in the code you can see when we get Elements by class name we we get a collection of elements in the boxes variable having same classes name right then we can use also use the access like by using the index on this HTML collection right and we can also check the length of this HTML collection again this is the array like object that's why we how we can do it so this is the answer what are array like objects what are the examples and how they are different from the normal arrays how do you convert an array like object into an array that is the next level question of the array like objects for example suppose you have this custom array like object this is not an array because we have the q key value Pairs and it is inside the curly braces not the square brackets of the Aries right and here these three techniques there are three three techniques to convert area light objects into an array the first one is by using the array Dot from method just pass the array like objects as in parameter here and this will return the new array when we print the values from the array it will be an array of only the values from the original array not the keys just the values another way is to convert is by using the spread syntax and here is the code again you have to write these three dots which we call spread syntax in front of the array like object and again in the result you will get an array of values values only the Third Way is by using array dot prototype dot slice dot call method in this code this method will also accept an array like object as a parameter and return the result as an array of values only this is slightly a longer way therefore normally I personally prefer the first two ways to convert the array like object to an array great now here is the fifth chapter of this course and that is Loops here we will cover questions on the types of Loops like while loop do while loop break continue statement for Loop four off and foreign Loop and most importantly we will compare them and see when to use which Loop in our real world applications so let's start exploring them what is a loop what are the types of Loops in JavaScript very important question let's quickly see the loop diagram see when the loop starts and the condition is true then code inside the loop will execute and the counter will be updated again if the condition is true then the code inside the loop will be executed again and again that's why we call it a loop once the condition is false the execution will exit the loop simple definition is a loop is a programming way to run a piece of code repeatedly until a certain condition is met in JavaScript we have four or five types of loops or while do while far off and foreign Loop here is the simplest for Loop code example in a single line we are using the four keyword and then inside the bracket we are first initializing a variable then setting the condition for the loop and then incrementing the variable I one by one all set and then inside we have a set of code that will execute repeatedly until the above condition is true and in this case the incremented values of variable I will be logged one by one that's how the for Loop works what is the difference between while and for Loop or you can say when we should use while loop and when should we use the for Loop in our projects or applications see the code for the for Loop in one single line we are initializing the variable setting the condition and then incrementing the counter also all in one single line and inside we are just logging the value whereas if we see the while loop code here we are initializing the variable outside the while loop in a separate line at the top then setting the condition with the while loop and then incrementing the counter inside a separate inside this separate line but you can also use the while loop just with a condition like this here there is no dependency on initialization of numbers or increments just a condition is enough but be careful this will keep printing the output because the condition is always true in real world applications we use break statement to break the while loop in such circumstances okay you got it right the difference between them is for Loop allows you to iterate over a block of code a specific number of times this means that in case of for Loops this I will always be the number maybe it's array length or something but it always evaluates as a number which has to be initialized first and then to be incremented also but in the case of while Loops while Loops execute a block of code while a certain condition is true true it does not depend on any numbers so when to use the for Loop four Loops are better for conditions with initialization and increments on numbers because they can be set just in one line enough code right whereas a while loop is better when there is only one condition no initialization and no increment is required then the while loop is the right choice great I think now you will remember these differences like a beautiful song what is the difference between while and do while Loops a very important question asked in many interviews we already know the while loop here is the diagram the definition is that a while loop executes a block of code while a certain condition is true but if the condition is false Loop will not execute even a single time right now here is the diagram of the do while loop here the do while loop is similar to the while loop except that the block of code is executed at least one time even if the condition is false meaning the do block will execute at least the first time and then after the second time its execution will be dependent on the result of the condition only let's see the code here is the code for the while loop we already know and here is the do while loop code here the initial value of K is equal to 0 but our condition K is greater than 1 which means condition is false if it is a while loop it will not execute inside the code but do while will definitely execute the code inside this this do block first time even if the condition is false first time so here do block code this console log will be executed and the value of K which which was 0 will be logged like this and now after the increment K will be equal to 1. but from the second time onwards do while execute as per the condition like a while only therefore now the do block code will not execute because the condition is false now so that is the difference between 2 and now you will remember the differences forever what is the difference between break and continue statement very important question see the code here we have a for Loop and we are printing all the values 1 2 3 4 5 inside it but before that we put one if condition here and inside that we will put the break statement this says whenever the value of variable I is equal to 3 then it will encounter this break statement we will just which will just stop the execution here itself and exit from the loop so the output will be just 1 and 2 because at 3 the loop is stopped and exited from the loop due to the break statement now if we have that another code like this here I just replaced break with continue keyword only rest of the things are exactly same Air instead of breaking the loop the continue statement will just stop then skip the rest of the code and send the control back to the start of the loop again so here in the output after 1 and 2 the values three the value 3 will not be logged and escaped but 4 and 5 will be locked the final difference between them is the break statement is used to terminate the loop whereas the continue statement is used to skip the current iteration of the loop and move on to the next test iteration got it what is the difference between 4 and 4 off Loop in JavaScript for Loop we already know if this is the array then we can use a for Loop like this to lock all the elements of this array here we are initialization initializing then condition and then incrementing also whereas if you see the code for this for Loop or of sorry for off Loop this is a bit simpler and shorter right initialization and incrementing the variable is not required here here this valve variable is not a number it refers to the single element of the array and it is used with the off keyword to iterate all the elements of the array one by one and here is the output as expected so you got it the difference between them is for Loop is slightly more complex having more lines of code whereas power off is much simpler and is better for iterating arrays now the question is when we have the simpler one why we need the for Loop Okay the reason is for Loop is a journal way of iteration which can be used to do any kind of iteration with anything okay whereas power off Loop used in is is limited its use is limited to arrays and objects iteration only it cannot be used for anything okay so it's more specific and for arrays and objects only so that is the difference what is the difference between far off and foreign loops all right again a very good comparison we know the far off Loop if we have an array like this then we can easily iterate the array by using the far off Loop like this the definition is or off Loop is used to Loop through the values of an object like an array or a string second point about four of loop is it allows you to access each value directly without having to use an index okay no index is required now if you see the code for the foreign Loop here we have this object with its keys and their values right it's like a key value pair so to iterate over this kind of key value pair objects we use the foreign Loop like this here by using the foreign Loop we are iterating over the object okay and then we can use the key as an index to log the value of the particular Keys okay so finally getting all the values of the of the object in the output the point is the foreign Loop is used to Loop through the properties of an object and also it allows you to iterate over the keys of an object and access the values associated associated by using keys as the index so that is the difference which we have learned by heart now what is the purpose of for each method compare it with far off and foreign loop again a very very important question in short orange is a method that is able to do both the things which for off and foreign Loops can do for example if this is the array then this is the far off Loop to iterate on it right the same array can be iterated using a for each method like this and we will get the same output here this array dot for each method will accept a parameter which is an anonymous function if you remember a function passed as a parameter is called a callback which I will explain explained in my previous videos but again I will explain in upcoming videos and this function accepting each element of the array as the parameter one by one and then performing some action on each element okay so the output of both for off and for each method is same but here for each method is slightly more convenient short right because we do not have to declare one extra variable like we did with the far off Loop that is one advantage and many times we use the combinations of Arrow operators with the forage method to keep the code shorter and simpler but sometimes for each will not work and we have to select far off Loop which I will explain in the upcoming question the next comparison of for each method is with the foreign Loop here you can see one person object and then here is the foreign Loop to iterate the properties with the help of key value pair right but the same can be achieved with the help of a for each method something like this all the values of the object person will be iterated one by one using the for each method and hence all the object values will be printed like this if here if we replace this object dot values with object dot Keys then all the keys of the object will be printed here for each is capable yes but I normally prefer foreign because of its short syntax in this case uh so finally here is the conclusion about for each method porridge is a method available on arrays or objects that allows you to iterate over each element of the array and perform some action on each element that is the answer of this question when to use the far off Loop and when to use the for each method in applications all right we already know for each is a great and short method to iterate arrays or objects is that mean we do not need far off Loop the answer is no we need for off Loop for some cases for example suppose we have an array like this first we will use the far off Loop to iterate the array and inside the far off Loop we can use statements like break or continue like this it will work completely fine and will give the proper output but but but if we try to iterate the array using the for each method yes it will iterate but if we we use break and continue statements inside the forage methods then it will give this illegal break statements error and that is the limitation of the for each method the reason is for each method is designed to complete all the iteration of all the elements of the array and it is not designed to be interrupted okay so the answer is power off Loop is suitable when you need more control over the loop such as using a break statement or continuous statement inside the loops whereas the for each iterates over each element of the array and performs some action on each element so if you if you are sure you have to iterate over each and every element then only go for for each method otherwise better use the other Loops like far off Loop great after Loops we have functions and I think this is the most important topic in JavaScript you will see many types of functions in good applications named function Anonymous functions Arrow functions callback and higher order functions then some questions on parameters and arguments as well next we will cover first class functions pure impure functions function carrying and then call apply and bind methods in JavaScript in short everything about the functions we will cover let's start with the first basic question first what are functions in JavaScript what are the types of functions very basic and very important question let's first see a simple JavaScript function function code and the parts of it here is the simple function first we declare the functions by using the function keyword after that we put in the function name and then inside the round brackets we put the list of parameters now inside the curly braces we put the function body and our function is ready then we call the function by passing the arguments list which matches the which should match the parameters list and finally we get the result like this so that is the structure of a normal function in JavaScript the definition of function is a function is a reusable block of code that performs a specific task now in JavaScript we have many types of function and here is the list of functions named functions Anonymous functions function Expressions Arrow functions iif callback functions and higher order functions in upcoming questions we will compare each and every function all of them like the differences between them we will see and when to use which functions in real world applications that also we will see what is the difference between named and Anonymous functions when to use what in applications you already know about named functions here is the code and this is the most basic type of function the definition is named function have a name identifier so we have this sum as the name of the function and that that's why we call them named functions on the other hand we have Anonymous functions in JavaScript like this one inside the console log here we have one function but is it does not have any name that's why we call it Anonymous functions Anonymous means without name okay here the anonymous function is accepting the parameters A and B and from here we are passing the values 4 and 5 for these two parameters A and B and finally we are getting 20 as the output the definition of anonymous function is anonymous function do not have name identifiers and cannot be referenced or called directly by the name like we can call named functions right now the question is when to use what in our applications the answer is use named functions for big and complex Logics okay or use it when you want to reuse reuse one function at multiple places on the other hand use anonymous functions for a small and simple logic use it when you want to use a function at a single place only so that is the difference and that is the purpose of the named and the anonymous functions what is a function expression in JavaScript here is the code and you can see here that we have one Anonymous function and we have assigned this Anonymous function to a variable now we can call this variable a method something like this and it will give the expected output of 8. so this is an anonymous function expression because we have used an anonymous function and assigned to a it to a variable so what is anonymous oh sorry what is function expression a function expression is a way to define a function by assigning it to a variable now there is one another type of function expression and that is named function expression like this here you can see we have one named function sum and we are assigning this named function to the add variable then calling the add variable in the same way but this approach is not giving any benefit because you can directly use the function name sum to call it right so mostly function expressions are used with the anonymous functions only I hope it's clear now what are Arrow functions in JavaScript what is its use nowadays Arrow functions are very important part of any programming language it is used everywhere in JavaScript applications and arrow function is just a shortcut way of writing the normal functions like in normal functions we have a parameter list and a function body right similarly in Arrow functions we have round brackets Arrow operator and curly braces so inside the round bracket we will put the parameter list and inside the curly braces we put the function body so simple right so for example suppose we have a normal function code where we have an add function like this and then we call the function add like this by passing the parameters now the same thing can be done by using Arrow functions also see here you can declare one add variable and then after equal inside the brackets you can pass the parameters X and Y in normal functions also we pass parameters right in Arrow function we pass like this if you do not have any parameters then leave this brackets empty now after this Arrow operator we can write the code statement or the logic which we normally write inside the curly braces of normal functions great now compare this one line code with the previous one which was the traditional function approach we have removed four lines of code in a single line right so the arrow function will make the code shorter and simpler even in this case you do not have to write this written keyword with the arrow function Arrow function will automatically understand that okay so finally the definition of the arrow function is Arrow functions also known as fat Arrow functions R is simpler and shorter way of defining functions in JavaScript that's it now I think this concept is permanently fixed in your memory what are callback functions what is its use again a very important question here is the code and you can see we have SIMPLE normal function add here now we can call this add function by passing two parameters and then getting the result in the result variable right here the names of the parameters are not necessarily the same as the name of the parameters in the actual method at the end we are logging and displaying the result but in real application instead of this one lines console log statement we can have many lines of code to display the result right then better we put all those those lines of code in a single method display like this and call it like this and here we will put the complete code of the display method here you already know X and Y they are the parameter but what is the operation here yes the operation is the Callback method only when we were calling display method then we were passing this add function as the parameter here which we are receiving in the operation here so finally the definition of the Callback function is a callback function is a function that is passed as an argument to another function I hope you got it right one more thing this display function which is receiving a callback function as a parameter is called a IR order function now the question why we did all this what is the advantage of using this callback function and higher order function this is the question now the benefit is that if you have more methods like add multiply subtract divide Etc like this then you can pass them all like this inside the display method as a callback and it will works perfectly another benefit is all the display code will be inside a single function as a result the code will look more cleaner and more structured right in big applications where functions are large and complex these kind of things are very helpful so that is the importance of the Callback functions what is a higher order function in JavaScript all right we already know the Callback functions now we call a function higher order function if two things take it if it takes one or more functions as arguments or it returns a function as a result let's focus on the first case see we have one function Hof which is accepting func as a parameter so basically a callback function has the parameter so a function which accept one or more callback function is a higher order function this is the first time and I hope you already know that now the second type of higher order functions which returns a function as a result see this function the create Adder function is a higher order function here because inside it we are returning the result of this function which is just adding the value of the value and the number and this function is anonymous but can it can be named a function as well that is not a problem so when a function returning a function as a result is also a higher order function now the question is how you will use this create Adder higher order function so using it is a two-step process the first step is to pass the parameter 5 in the create added method and get the result function in the add 5 variable okay so then use this add 5 variable as a function and pass 2 as the parameter okay so something you know we are using function expression here getting the result of the function in the variable and returning it so now thereafter the internal Anonymous function will accept this value to here okay and the create Adder function will accept 5 as the number parameter now you have both the value and number parameters with you and finally you will receive the output is 7. great this second higher order function this type second type is not so popular but yes it is also the higher order function only what is the difference between arguments and parameters tricky question sometimes even experienced candidates cannot answer this question here you can see the function body and here are A and B parameters the point is that parameters are the placeholders defined in the function declaration like this okay then this is how we can call the add method right and while calling the matter method the actual values we are passing 3 and 4. that are arguments so the answer is arguments are the actual values passed to a function when it is called or invoked so that is the difference in how many ways can you pass arguments to a function all right this is a question about arguments the most common approach is this one which we call positional arguments you already know this then we have two more ways to pass the arguments one is named argument and another is argument object in the case of the Nema named argument suppose we have an object person like this with keys and values now rather than passing the individual keys we will call the method greet and pass the whole object person and inside the function we can get the values of the object like this this is called named arguments as we are passing the complete named object at once then we have one more way to pass the arguments to a function and that is arguments objects see the code here we will pass 1 2 and 3 as the arguments but look at the function sum we do not have any parameters here in the function right then how we will receive the arguments we will receive the arguments by using the arguments objects like this here arguments 0 will point to the first the first argument one and then one will point to the second argument two so on and so on okay now if you have three arguments then the maximum value you can use with the arguments object is 2 only so above then that you will get the error okay index Out Of Reach so that is the answer of this question how do you use default parameters in a function one more question on parameters and arguments here is the code of a function with a default parameter name what does this mean it means if we call this a method grid like this without any argument then the default value of the name parameter will be set to happy so the output will be hello happy but if we pass the argument from the method something like this then the default value happy will be suppressed or you can say ignored and the paths are going past argument value will be considered and we will get the output as hello Amit in short the answer is in JavaScript default parameters allows you to specify default values for function parameters okay that's the answer what is the purpose of event handling in JavaScript wow very important question which is used in every JavaScript application suppose we have a button on our web page with the ID my button now whenever a user clicks some button or takes some action on a web page that is what we call an event now the question is how to perform some action whenever some event will happen or occur for that purpose we use event handlers first we can get the reference of the button by using this get element by ID method then we can call the add event listener method of this button reference okay that this method is very important and here we will pass two parameters inside it first parameter is the event name so what is our event click event the second is the logic or the action that we want to perform on this button click event okay here we have passed one function which is just calling the alert now as you can see here we passed a function as the argument of this add event listener method right so this is also a callback function also this function has no name so it is a Anonymous callback function right and yes we can also pass the named callback function here see if the logic is too big then we normally prefer name named callback function but that's the choice so finally the definition of the event handling is event handling is the process of responding to users actions on the web page second point is the add event listener method is a JavaScript method that allows you to attach an event name and the action or function you want to perform on that event got it so now the question is how many types of events are there okay apart from click here is the list of the top 10 events like click event Mouse over events key down key up submit Focus blur change load and resize events there are other many more but these are the most used one and we can use and event listener to handle this events right now when the event is triggered or happens you can write some codes to handle it as per your web web application needs okay so now I hope now you know what event handling is and how the Callback functions helps in event handling right that's it what are first class functions in JavaScript first of all this is not a special type of function let me show you the definition first a programming language is said to have first class functions if functions in that language are are treated like other variables uh like we can do several thing with variables first we can assign variables to another variables then we can pass variables as arguments and also we can return variables from the function similar things we can do with functions also and that's why we call functions as first class functions in JavaScript and here you can see the code we are assigning a function to a variable same we can do with variables right the second example is that we can pass variables as arguments in other functions similarly in this code we have a function called double which we are passing to another function as an argument like a variable so this is a callback function right the third thing we can do with the variable is we can return the variables or values from a function similarly here we can return one function from another function now you know how functions in JavaScript can do many things like a variable can do right so that's why we call them first class functions what are pure and impure functions in JavaScript you know the meaning of pure and impure right for example this is a normal add function when we call this function with some arguments it will give this output now even if we call this function 100 times with the same arguments every time it is going to give the same same output the definition of the pure function is a pure function is a function that always produces the same output for the same input now let's see the impure functions here you can see we have a total variable outside the function and this add to Total function is adding some value from the parameter with this total variable now when we call this function like this the output will be total plus 5 and total is 0 so 0 plus 5 equal to 5 right now the total variable value equal to 5 but here is the twist if we call the same function again with the same parameter 5 this time the output will not be the same the parameter value is the same as 5 you can see but because total is a global scope variable it it has maintained is its last state okay and its value was uh is 5 from the past action we yes therefore now total equal to Total plus 5 which means total equal to 5 plus 5 equal to 10. and the output is different this time so this is an impure function the definition of an impure function is an impure function can produce different outputs for the same input so there are two more differences between them which we just noticed first pure functions cannot modify the state right but impure function can modify the state like we modified it is the state of the total variable right the next difference is pure functions cannot have side effects whereas impure function can have side effects what are side effects side effects are like any external changes made by the function RSI defect for example in this example the impure function add to Total method the it the external variable total value has been modified to something else so this this is like a side effect of executing this add to Total function so basically we are executing a function but it is you know modifying something which is external to it this total variable was external so that was like a side effect okay so great now I think you can explain this to anyone what is function carrying in JavaScript good question suppose you are calling a single normal function with multiple arguments and getting a single result as an output Now by using function curing you can break down that single function L2 multiple functions and you can pass single parameter separately for each function that is what function carrying let me show you the definition first and then the code the ring in JavaScript transforms a function with multiple arguments into a nested series of functions each taking a single argument now here you can see the code of a regular function that takes two arguments and returns their product or multiplication now here is the carried version of the above multiply function this is the nested function approach how to call this first we will call the outer function carried multiplied with or one argument like this and get the result function in a variable then we will call the variable like a function and pass the argument as the parameter and finally we are getting the multiplication of a and b now if you compare this with the definition we given so then we have transformed a function with multiple arguments into a nested series of function each is taking a single argument right now my next question is what is the advantage of doing this because as humans we do not have to we do not do anything until it has some benefit right so the benefit of this is reusability modularity and specialization how because big complex function with multiple arguments can be broken down into a small reusable functions with fewer Arguments for example in this code you can see we can call this variable double like a function multiple times anywhere in our application similarly we can use the same current multiply method and create a variable triple which can again be used like a reusable function anywhere so now create multiply function is also been using at multiple places multiple times so this is reusability and that is very much needed and required in big applications and that is the answer of this question what are call apply and bind njs good question let's see the code first here you can see one method say hello inside which we are logging the method and this dot name okay this so here message we will get from the parameter fine but from where this dot name will come this will come from the object like a person okay so that is the context which will worry vary with the different objects okay so the say hello function will run differently with the person context and it will run different differently with some other object context okay so here this keyword will represent the context only which is person in this current case now the question is how to invoke the say hello function with a person object context because right now they are separate with the no connection right the first technique is to use the call method with function name say hello like this past object name and the string argument as the parameters this is the normal approach and you will get this as an output the second technique is used apply method this is same as the call method except in second argument instead of passing a single value we have to pass an array this time that is the only difference and here is the output the last technique is the bind method here we are passing the object as the parameter and getting the result in a variable and then we are passing the argument in the variable so basically it's a two-step process now you have a good idea of all three of them right finally the conclusion is call apply and bind are three methods in JavaScript that are used to work with functions and control how they are invoked and what context they operate in so maybe this is slightly difficult to remember this definition so we have a simpler definition also like these methods provides a way to manipulate this value okay so this is the context right so manipulating this is the uh job of these three methods and pass the arguments to the functions now as you can see all these three functions calls are we are using this keyword inside say hello method to resolve the context right great now you are ready to shoot great your progress in the course shows your dedication to your career and goal here is the seventh chapter of this course is strings we have only six questions here template literals string interpolation string operations and the string immutability so let's start slowly with the first very short and simple question what is a string very simple and you can see the code here we are storing a value in a string the definition is a string is a data type used to store and manipulate the data mostly we use string codes to define the string what are template literals and string interpolation in strings very important question and if you see this image a template literal is a combination of a template which is a placeholder for a variable whose value is assigned at runtime and a literal which means a fixed word or sentence let's see the code now here is the code where first we have a normal string with the value happy and then like this we are putting a statement inside the pack text this statement inside the back takes is a template literal okay now template literals use the string interpolation concept as parents string interpolation the string inside the curly braces and preceded by the dollar sign will be considered as a variable and the value of this value variable will be evaluated at runtime so the final output of this template literal is hello happy also template literals can be used to store multi-line strings like this great finally the definition of the template literal is a template literal also known as template string is a feature introduced in ecmascript 2015 es6 for a string manipulate interpolation and multi-line strings in JavaScript that's it what is the difference between single quotes and double quotes and backticks the answer is simple single quotes are used to define the normal strings similarly double quotes are also used to define the normal strings only but single quotes are more popular basically they are same then we have backticks which are used to define the template literals inside them now template literals can be used with string interpolation like this or the templated literals can be used with a multi-line strings like this that is the answer of this question what are some important string operations in JavaScript as you can see there are some functions provided by javascripts for doing string manipulations now I will explain the course for some of them the first one is adding multiple strings by using the plus symbol like this it will concatenate both the strings the second is using the concat method to concatenate two strings then this third string operation uses the substring method here the if the value of the result is Hello World then the substring method will take the starting index as the first parameter and the end index as the second parameter that is substring from 6 index to 11 index will be stored in substring variable so that will give a world as the output the next operation is result dot length which will just count all the characters of the string result then next we have this two uppercase and two lowercase methods of the strings that can be used to change the case as per their name the next very important method is split this split method is will split a string based on the separator or delimiter also we can say here the separator is space and the result will be an array for example this case hello and world will be the two elements of the array the next important operation is replace method the replacement third of the string will replace the first parameter with this second parameter therefore the result will be hello and world is replaced by the JavaScript now the last method is trim if you will apply it to the string it will basically remove the initial white spaces and the ending white spaces from the string although all right so these are some of the most important methods for the string manipulations which are frequently used in any application what is string immutability very important concept to know we know we have browsers installed on our systems and all these browsers have the JavaScript engine inside them right now the JavaScript engine has the memory to store variables and other things in our programs okay so whenever we create a string or variable like this a new memory has been allocated to the string that memory will have some address and that and data inside it right now if we modify the original strings like this we might think that in the memory the address will remain the same and the value will be changed or updated but but this is not the case in fact for the modified string a new memory address will be allocated and the new value of the new modified string will be stored over there and that is the string immutability immutable means a thing that cannot be modified or changed and strings are not modifiable and therefore they are immutable every time we change the string internally we are creating a new string in the memory so the final conclusion is string in JavaScript are considered immutable because you cannot modify the contents of an existing string directly now this concept is like a bookmark in your memory right in how many ways you can concatenate the strings for example we have these two strings S1 and S2 now we have four ways to concatenate them first the plus operator then the concat method then template literals and then join here is the simplest one the plus operator S1 plus S2 and you will get the result second concat S1 dot concat S2 same result you will get the third one is template literals where inside the back takes prefixing with dollar sign and inside the curly braces you will write the variable names and that will evaluated will be evaluated at run time again you will get the same result then the last way of concatenating is by using the join method like this here you will first put both strings in an array like this then join all the elements of the array strings using the join method and pass the delimiter as the space between them again you will get the same output and that is the answer of this question congratulations on completing the last chapter now here is the section Doom here we will see questions on the methods that are used to select modify and create the Dome elements okay for example methods like query selector query selector all inner html text content and then methods like create element clone node and create text node in short we will be exploring all the methods of Dom what is Dom what is the difference between HTML and the Dome very good and very important question let's try to understand with the help of an example suppose you are a user and you open the browser and open one website and here is the static code of that website this is HTML right you can read it and this is for you to code and manipulate but inside the memory the computer or the browser will not see this HTML like this the memory will see it as a dome representation like this here you can see that the HTML tag is the root element then HTML has head and body as the child elements and other exact same HTML elements are present here as per the HTML document only right this is nothing but the tree like representation of the same HTML and this representation we call Dome or sometimes a dome tree also now if you add delete or update any HTML element via JavaScript for example if the user adds one more paragraph inside the body element then with the help of the JavaScript one more node will be created and a new paragraph element will be added and finally this Dome tree will again be converted back into the HTML and displayed to the user in the browser got it so basically this Dome tree enables the user to update or add new elements to this structure you can also say that the Dome is like an interface to make your website Dynamic with the help of JavaScript the proper definition of the Dome is the dome which stands for document object model represents the web page as a tree like structure that allows JavaScript to dynamically access and manipulate the content and structure of a web page in short HTML is just a markup language for reading and writing purposes for developers and users in reality memory plays with Dome great now you will never forget this concept for the rest of our of your life how do you select modify create and remove a dome elements good question here is a list of almost all the JavaScript methods that are used to select modify create and remove elements from the Dom or HTML first these methods are used for selecting the Dome or HTML elements then these are used to modify the elements properties and attributes of the Dome elements then these methods can be used to create new elements in the dome or HTML and here these are for removing the elements for from the Dome and then we have some methods for adding and removing event listeners in the dome so maybe you already know some of them anyways in the upcoming questions I will explain the differences and what exactly they do and in which scenarios we have to use them in our applications what are selectors in JavaScript very important question suppose you have a div element with the ID my div in your HTML now here is the simplest selector in JavaScript and that is get element by ID this get element by ID will get the reference of this element and assign it to a variable now we can use this variable anywhere in the program okay and use its properties to access the values of the element my div right and similar to get element by ID we have 4 more selectors in JavaScript those are get Elements by class name get Elements by tag name query selector and query selector all they all are used to get elements from the Dome finally the definition of the selector is selectors in JavaScript help to get specific elements from the Dome based on the IDS class name and the tag name data that's the definition of selectors what is the difference between get element by ID get Elements by class name and get Elements by tag name again a very important question imagine we have a HTML like this here we have some elements some are paragraphs some are elements with IDs like this and some are with classes like my class now in order to access these elements we have to we have three selectors methods the first is get element by ID it is used to select a single single element by ID okay so basically inside the brackets we will pass the ID of the element as a parameter and then we hold it at your reference in some variable like this the next one is get Elements by class name this will select multiple elements that share the same class name so here in the code you will pass the class name as a parameter and you will get the references of multiple elements in the single variable we also call it HTML collection which is an array like object this array like object that has some similarities with array like length and index properties but it does not have push and pop methods of arrays so why that's why it is different from array then we can use a for Loop to iterate the elements of the array like objects one by one like this and the output by using index of each element you can see the text content is one two three for the three elements whose class name the name my class you can see in HTML so that is the get Elements by last name then we have another selector method which name is get Elements by tag name this will also select multiple elements but based on their tag names so here in the parameter we will pass the tag my Dev this will get the first and second elements of the HTML of the tag div again this variable is a HTML collection and array like object and we will use the for Loop to iterate this one by one and log the outputs 1 and 2 which are basically the text content of the first and the second elements respectively all right that is the difference between these three the first one will select only a single element the second one will select multiple elements based on the class name and the third one will select multiple elements based on the tag name that's it what is the difference between the query selector and query selector all methods let's see the code first this is the HTML code here we have multiple divs with the class name my class now first we will use Query selector which will basically accept the dot class name as the parameter and return only the first matching element from the Dom which will be then assigned to the element variable if you look at the HTML the first element of my class is element 1 text content of this HTML will be logged then whereas if you see the code of this query selector all it will select and return all the matching elements here as as per the parameter and then we are iterating this array like object using the for each Loop and logging the text content of all of them as the output all right that is the difference one is for single element query selector and another is for all elements query selector all what are the methods to modify elements properties and attributes suppose you have a HTML like this and inside it you have this div as the element now you want to modify the value of this element or you want to add a new property for this element for that the Dom provides these methods to modify elements and their properties here is the list of the methods text content inner HTML that attribute remove attribute style dot set property classlist dot add so I will explain on all of them in upcoming questions what is the difference between inner HTML and text content very good and tricky question suppose in our HTML we have two div elements like this now we want to modify this hello and world to something else for that we can use either the text content or inner HTML properties to modify the content of Dome elements first text content property can be used to assign plain text to the my element one like this and then the inner HTML property can be used for my element 2 like this and this is the result in the browser here if you notice in the case of text content the exact same plain text has been updated in the element text right but in the case of inner HTML the browser interprets or considers the HTM content as the HTML not just plain text therefore there's a strong HTML tag will make this word happy in bold and a strong HTML format right so that that is the difference basically inner HTML renders content as HTML not just text and that is the difference between how based on the requirement you can use in HTML or the test content how to add and remove properties of HTML elements in the Dome alright suppose we have a div element in our HTML now how do we add one more property to this div or how do we remove some existing property for that we can use the set attribute and remove attribute methods first this is the code for the set attribute method which will accept two parameters first is the property name which is data info and second is the property value which is new value after executing this you will see this body in your browser like this a new Property Data info with the new value has been added for the above my element that is the way to add a new property to remove this property or any property we can use the remove attribute method of the Dome like this this will again remove or delete the data info property from the div element and that is how we can add or remove the properties in the dome how to add and remove style from HTML elements and Dome using JavaScript okay suppose we have this this div element in our HTML then in order to add the style we can use set property and class list dot add methods of that JavaScript here in the code the set property method is used to add the element Style then this element dot classlist dot add property will add the new class highlight to the element like this then with the remove method we can remove the gloss also and with the toggle method we can add the glass if it is not there and if it is there then toggle will remove it that is the purpose of the toggle method finally in the browser the style property will be set to Blue like this and class will be set to highlight that is the answer of this question how to create new elements in the Dom using JavaScript what is the difference between create element and clone node good question this is the list of the methods used to create new elements in the Dom using JavaScript in 80 cases we use create element method to create the new elements dynamically next part of the question is what is the difference between create element and clone node here is the code of create element method first we are using the create element method to create a fresh new div tag element in the Dom and then we are setting the text content of this div element and finally we are appending or adding that element a new div to the HTML Dom by using the append child method okay because all elements are like the child to the Dome only and in the browser we will get the element something like this in the dome this is the simplest way to create an element in the dome or you can also use the create element method to create a child element inside some parent element as well okay uh now let's check out the Clone node method for that we first need an existing element like this now if you see the code of the Clone method here first we get the reference of the existing element parent element in a variable and then copying all the properties of existing element by using the Clone node method and then assigning them to the new variable cloned element here this true parameter means that all the child element of the existing element will also be copied okay so that is the purpose of true then similar to create element we are setting the text content and appending it to the Dome and the final element will look something like this the Clone element will have the same ID as the parent element because why we cloned it right that's why so that's the difference create element is used to create the new fresh element and clone node method is used to create a copy of the existing element that is the answer of this question what is the difference between create element and create text node in JavaScript here are the two methods that help in creating the elements in HTML first we already know create element method which is used to create a fresh new element in the Dom right the second is create text node method for that we need one existing parent element first then we will get the reference of the parent element and also we will use the create text node method to create a text node and then we will append this text node to the existing text node of the parent element by using the append child method finally you can see the output something like this the text node that we created is added after the existing text node of the parent element so the create text node method is used to create text nodes for existing elements okay existing HTML elements so that is the answer and the difference between these two methods now here is the ninth chapter of this course error handling this is short but very important topic in JavaScript here we will go through all the keywords used for error handling like try catch finally and throw and we will also check the best practices for error handling and the different types of errors in JavaScript so let's start with the first basic question what is error handling in JavaScript very important Concept in JavaScript suppose you have a piece of code in your JavaScript program here you know this variable is not defined and it will definitely give some error now you want to handle and manage that error or you can say you want to show a proper error message and log the error in the console or the logs properly for that purpose we use error handling in JavaScript first we use the dry block if any error occurs inside this dry block then that error will be caught or passed in the catch block and here you can log or handle the error in this case the output will be something like this here is the flow of error handling it will start from executing the drive lock if any error occurs then it will ignore the rest of the try block and execute the catch block and if no error occurs then it will ignore the catch block simple so what is error handling error handling is the process of managing errors now you will remember this like a story what is the role of finally Block in JavaScript we already know we have try catch code block like this to handle the errors in JavaScript right now sometimes there is some line of code that we always want to execute in any case irrespective of error for example suppose you are logging some application information here at the end of the drag lock but if the error occurs on the first line then the last line will never going to be executed right and we will miss this logging information now to always execute this kind of code we can have a finally block like this in our code whether an error will occur or not the code inside this finally block will always execute no matter what happen Theta output the code inside finally executed even after the catch block after the error and here is the diagram that shows how finally will be executed when there is no error or no exception directly after the drive log and with exception also after the catch block finally the definition is finally blocks are used to execute some code irrespective of error that's it what is the purpose of throw a statement in JavaScript suppose we have a function user data in JavaScript inside this we are trying we are using try catch to handle and manage the errors now inside user data function we are calling another function validate user age multiple times like this and here is the method body of validate user age function okay the question is if any error will occur inside this validate user age function then how the catch block of the calling function will catch it so how the answer is by using the throw statement see when we are passing the invalid parameter then error will occur inside the inner function because the type of edge is not equal to the number right then by using the throw keyword we will send the error to the catch block of the calling function and handle the and handle and log the error properly so throw keyword is used to pass the error from the called function to the caller function okay so which is the called function and which is the calling function you know right call sorry caller or calling you can say the proper definition is the throw statement stops the execution of the current function and passes the error to the catch block of the calling function that is the definition of the throw statement what is error propagation in JavaScript this is very much related to the throw statement and here is the code of throw statement which is used to pass the error from the calling function to us from the called function to the calling function of the catch block right basically throwing the error means propagating the errors only so what is for error propagation error propagation refers to the process of passing or propagating an error from one part of the code to another part by using the through statement with try catch block that is error propagation what are the best practices for error handling there are some best practices in JavaScript to manage the errors properly the first one is always use try catch block to handle errors appropriately the second one is use descriptive error messages for example your message should be readable and understandable by other Developers the third best practices to avoid swallowing errors okay swallowing means never leave this catch block empty that means you are swallowing the errors because you are not taking any action for the error that means swallowing right because this will suppress the error and continue execution right which can be dangerous for your application data the last best practice is to log the errors properly so that if any error will occur then they are properly if they are properly logged so that later then developers can analyze them properly and can fix that error what are the different types of errors in JavaScript in every programming languages we have errors and here is the list of four types of errors in JavaScript the first one is the simplest one and that is the syntax error here you can see we missed the closing parenthesis and that is an error which we call what syntax error the second type of error is a reference error where we are using some variable without declaring or defining it so this reference error will give this a variable is not defined then the third type of the error is type error for example when we have a number and now we are using a string method with this number which is just not possible so it is a type error because we are using the wrong type method with another type then the fourth type of error is a range error here we have three elements in an array but we are trying to get the element that has the index 10 which is not there so we will get the error what index 10 is out of bounds this is called the range error great now you know some basic types of errors in JavaScript now here is the 10th chapter of this course objects here first we will revisit the basic of objects and then we will see questions on how to create objects how to create modify and remove the properties of objects and then we will check questions on copying and cloning the objects finally some questions on built-in objects like set object and map objects so let's start exploring them what are objects in JavaScript first of all in general what is an object we know variables arrays a string but object is something different object is a real world entity for example in programming World animal is an object car is an object and simply similarly a person can be an object also now an object can have properties like here eyes skin also an object can have actions or functions like eat sleep walk right now in JavaScript the same person object can be coded like this here we have the person object and inside the curly braces we can define the properties of this object basically key value pairs here the name property is assigned a string value and not just a string we can also assign an array as a value for a proper property sorry and this grid property can be assigned an anonymous function as well because an object can have functions as well okay and here is the list of the types you can assign to the properties of an object string numbers arrays functions also you can assign child object to the parent object we call them what nested objects now if we want to access these properties so first we can access the name property like this person dot name then we can access the Hobbies or by the index value on the array hobbies and we will get the value at that particular index then we can also use the object to call the method grid something like this which will basically execute the grid method great finally the definition is an object is a data type that allows you to store key value pairs simple in how many ways can we create an object we have three ways to create an object in JavaScript here is the first way object literal we call it and this is the most common way here we have the person as an object and inside the curly braces we can set the properties and their values like this which are comma separated then we can log the object and in the browser console the object will be logged something like this the second way to create the object is object Constructor here we are first using the object Constructor to create a blank person object and then by using the dot notation we are setting the values of the object properties like person.name and many more the Third Way is where we will first create one parent object by using the object literal way and then leave some properties blank inside here then we create the child object by using the object dot create method so here we are passing parent as the parameter parent object as the parameter and man will automatically get all the properties of the parent object person something inheritance this concept is what we call in oops now we can set or modify the properties of man object like this so basically in this technique we were using the parent object to create the child object and that is the way to create an object also what is the difference between an array and an object let's see the code first here you can see the code of an array and here is the code of an object now let's see the differences first arrays are collection of values so all these elements in the array are values and nothing else whereas an object is a collection of key value pairs right the second difference is that arrays are denoted by square brackets that is the syntax of an array whereas objects are denoted by curly braces like this the third difference is that elements in an array are ordered okay what that mean is array are indexed right 0 1 2 3 in sequence right whereas properties in objects are not ordered now you know and understand the differences between the array and the object how to add modify or delete properties of an object for example like this we have a blank object now in order to add properties to this object we can use the dot notation like person dot name equal to happy also to modify the properties we can use the same dot notation okay so it will basically override the previous property value and finally if you want to delete some property you can use the delete keyword like person dot property name to delete the property from the object so that is the simple answer of this question explain the difference between dot notation and bracket notation for example you have one person object like this now you can use the dot notation to access the properties of the object or you can also use the bracket notation to access the same properties right the point is that both dot notation and bracket notation are used to access Properties or methods of an object but dot notation is more popular and widely used due to its Simplicity because in other programming languages like C and Java also they also use dot notation but yes there is a limitation to dot annotation suppose you are dynamically assigning one property name to a variable like this and then you are using that variable name with the object name and bracket notation inside the console log to access the property it will perfectly work with bracket notation but if you try to do this with the dot notation with the variable property name it will not work that is the limitation of the dot notation in some scenarios bracket notation is the only option such as when accessing properties when the property name is stored in a variable that is a very rare case but yes it is a case what are some common methods to iterate over the properties of an object suppose we have a person object like this now in how many ways can we iterate over all the properties of this object we have three ways to iterate over the properties of this object the first one is by using foreign Loop hereby using foreign Loop we will iterate all the properties of the person here prop is the property name or you can say it's the key and then this person prop we will get the value of this prop key okay so like we get in arrays right one by one all the product properties will be iterated like this in output with the key and the value the second method is to use the object.keys method with for each method very popular way here the object dot key is accepting the person object and then we are using the for each method to iterate over all the properties and then logging the property name and the value then the Third Way is to iterate over objects is by using this objects.object.values method this is very similar to the above one in place of a prop in the parameter we are using value because here we are directly iterating over the properties value of the person object and the output will be values only not Keys okay so that is the main point and that is the answer to this question how do you check if a property exists in an object or not suppose we have an object like this now in the JavaScript code we want to check whether the name property exists or not in the person object for that the first technique is to use the in operator like this name in person so if the name actually exists in the person object then the output will be true if it is not there then it will be false here name property exists in person so it's true the city is not there in the person object therefore it is false the next way to check the property's existence is with has own property method again the output will be true or false based on the existence of the property in the person object then the last technique is by comparing property with undefined so if a person or any property is there then it will never be equal to undefined right so this condition will be true so it's just like opposite but if true if property is not there then person.city will be equal to undefined right and this condition will be false hold condition will be false right so that is the way so and that is the answer of this question how do you clone or copy an object for example we have this or original object with us now how to copy this or clone this object there are three ways to copy the first one is spread syntax here is the code here these three dots are the spread operator and if you will put this in front of the original object then a copy of this original object will be created and that copy can be stored in this cloned object spread okay so that is one way then the next way to create a copy of the object is by using the object dot assign method here the first parameter of the assign method is the target okay and the second is the source so basically listen carefully here this source which is original object will be assigned to this Target and that will be assigned finally to the cloned object assigned variable so that is the process then the third most important technique for copying or cloning the object is by using the Json methods path and stringify and that is for deep copy I will explain the difference between deep copy and shallow copy in the next question but basically so here we will first convert the original object to a string by using the Json dot stringify method and then we will pass the DAT that string back into the cloned object okay by using Json dot parse method which is converting the string back into the object and this is like a most this is like the most popular way of cloning or copying the object okay which basically mostly we use this one only and that is the answer of this question what is the difference between deep copy and shallow copy in JavaScript all right you can identify the difference by their name also one is deep means everything will be copied and one is shallow means something is external is copied but not the whole thing is copied right all right suppose we have an original object like this and if you notice here inside the person object we have another object address that is a normal in large applications okay and now first we will make a shallow copy of the object using the object.assign method here this is the Target and the person object is the source and finally the cloned object will be assigned to the shallow copy variable right now let's assign a new city suppose Mumbai to the address object of the shallow copy object okay now the city is what Mumbai uh now when you print or lock the city of the cloned object shallow copy that will will be Mumbai and that is fine and expected but the problem is that the city of the original person object is also modified and it is set to Mumbai which was Delhi earlier right and that is not expected because we do not want to change the original object address right we just wanted to change the property of the cloned object so this is a shallow copy which will have some problems with nested objects this kind of structure Pro it will give some problem now if we will use the Deep copy method so here we are copying the object in the Deep copy object and then we are assigning Bangalore as the city of the deep copy address city city object now if you will log the parent person object address City then you can get the output as Delhi not Bangalore it is not changed right but if you look at the city of the deep copy object then it is set to the modified City Bangalore so that is what expected Behavior which we are getting from Deep copy so deep copy is basically not impacting or modifying the parent object it is only modifying the cloned object finally the conclusion is shallow copy in nested object cases will modify the parent object property value if the cloned object property value is changed but deep copy will not modify the parent object's property value it will only modify the child the copied object value okay I hope you got it and now you will never forget it that's it what is a set object in JavaScript let's see the definition first the set object is a collection of unique values remember this word unique meaning that duplicate values are not allowed simply okay now this is the way we can create the set for storing unique numbers here we can add values to set by using the add method but if we try to add some duplicate value again then set will just simply ignore it and will not store it finally log the unique number set and here is the result of the unique values only right this set also gives us some important methods okay this set has some important methods to get the number of elements in the set we use the size property if you remember we have the same property like a same similar like length property in the arrays you remember right then if you want to check whether an element is present in the set then you can use the has method okay or if you want to delete an element from the set you can use the delete method so basically this set has its own method like the arrays have their own methods functionality is bit similar but the name of the methods are slightly different now the whole point is a set provides methods for adding deleting and checking the existence of values in the set now you will ask the question why we need set right when to use them basically we already have arrays okay so use one uses that sets can be used to remove duplicate values from the arrays right for example if this is an array with duplicate elements then first we can pass this array as a parameter in a set and a new array my set will be created with the elements of the array but my asset will Ignore the duplicate elements finally you can use the spread operator and angular brackets to convert this uh sorry uh square brackets to convert this my set back into the array and assign it to the new unique array okay so and if you log it then you will see that this new unique array will only contain the unique elements okay that is the great story about set which is now set and fixed in your mind what is a map object in JavaScript maps are like Advanced version of objects okay here is the code to create a map to store person details which is basically key value pairs only then we can have some methods of object like here is the get method to get the key value and then we have the method to check the existence of the key and we can use the delete method to delete the key from the map now the question is what is the most important thing about the map because of which we use maps sometimes because why we need map first is the map object is a collection of key value pairs where each value can be of any type okay sorry sorry each key key will be of any type and each value can also be of any type so here in the code this key can be anything like a string number array function any type second a map maintains the order of the key value pairs as they were inserted okay so you remember object they do not maintain the order and this key will be something a string and number only not just any type so basically with maps you can retrieve the keys in ordered way so these are two noticeable points about map and in the next question I will write down the differences between map and the normal object what is the difference between map and object in JavaScript the first difference is keys in a map can be of any data type including strings numbers objects functions Etc whereas keys in a regular JavaScript object are limited to just strings and symbols the second difference is a map maintains the order of the key value pairs as they were inserted whereas a regular object there is no guarantee the order of the keys okay there is no guarantee about it third difference maps are useful when keys are of different types insertion order is important okay here whereas this objects useful when keys are strings or symbols and there are just simple set of properties nothing specific and special about them so that is the difference between the map and the object in JavaScript great and congrats for completing 50 of the course now we will cover some Advanced sections in JavaScript this event section is like the start of the advanced section here we will cover what events are types of Event Event objects even delegation event bubbling and event capturing and then some short and twisting questions about the event I hope you will like them what are events how are events triggered very very important question let me show you the steps associated with an event first user interacts with the page and click a button then an event occurs that runs a piece of code JavaScript code which is mostly a function and then the web page appearance is updated that is the whole idea of the event now let's see the actual code suppose we have a button on a web page and now we want to show one alert message with the click of this button for that first we have to get the reference of the button by using get element by ID and passing the ID of the button as the parameter once we get the reference of the button we have to attach an event handler to the button here is the event and this handle click is the event handler it is also a callback function okay because it is passed as an argument to another function then inside the function body we are writing this alert message that's how all the requirements of an event are trigger are set now when the button is pressed clink event will be fired and when which will run the handle click event handler and that will execute the function finally the definition of event is events are action that happens in the browser such as button click Mouse movement or keyboard input great now this event will be like a fix event in your memory right what are the types of events in JavaScript similar to click events we have many other types of events in our web pages or JavaScript see the button click code here here as you know click is the event name and handle click is the event handler similarly we can have other events as well for example when you hover the mouse over an element for that we have a mouse over event then when you press the key down in your keyboard on your keyboard for that we have a key down event and for the up key we have the key up event if you press enter the submit event will be fired and some more events are like Focus blur change load resize and there are many more but yes these are the most important ones meaning whatever action you take on your web page it can be an event and that can be handled by the handle Handler function so these were the types of events what is an event object in JavaScript very good question suppose you have a button in your HTML and now you are going to getting sorry getting the reference of that button and adding a click event to this button now listen carefully here in the handle click function you can see this event passed as a parameter what is this event and where did it come from the answer is here whenever any event is triggered the browser automatically creates an event object and passes it as an argument to this event handler function if you need this event object then you can put here as a parameter and if you do not in need it then do not put here okay now the question is when we need it right for example if you want to get some information about the event that is just triggered then you can use it like here you can get the type of the event or you can get the target of the event on which the event is triggered so basically if you see the browser console then this event object will get the event type as click so that is the information you are getting and it will get the whole Target element of the event like this so that is the benefit of the event object okay that is giving you information about the event and here is the conclusion the first point is whenever any event is triggered the browser automatically creates an event object and passes it as an argument to the event handler function the second point is the event object contains various properties and methods that basically provides information about the event such as the type of the event the event the element that triggered the event etc etc okay so that was the whole story about the event object what is event delegation in JavaScript very good question in short if you have a parent element in your HTML then if you handle the event of the parent element then Java Script will automatically handle the events of its child element okay automatically so that is event delegation so basically parent is delegating something to the child so suppose you have a web application with a parent list with three child elements in it like this now when I click this item one item one is logged in the console on clicking item 2 item 2 is logged and so on now you might be thinking that in back in the code we have attached the event handlers to each child elements right but that is not the case if I will show you the code here is the parent list my list with the child items then you can see we are only attaching the event handler to the parent element only no event handler for any child element and inside the function body we are using the event object to lock the target elements text content so that's how we are getting the element information by using the event object right now as I showed earlier in the browser on clicking the child elements I am getting the target element text content of the specific child element and that is the magic of the event delegation we have just added an event handler to the parent element and that have automatically delegated the events to the child elements the conclusion is even delegation in JavaScript is a technique where you attach a single event handler to the parent element to handle events on all of the child elements so great now the concept is fixed in your memory what is event bubbling in JavaScript very important question suppose in your HTML you have one outer div element and inside it there is one innerative and inside that we have this button with ID my button basically nothing but the nested elements right now as per the event bubbling if we click the innermost element of the HTML which is here button is the innermost right then first this button events will be event will be triggered then the next level inner div element will be triggered and then the outer div element will be triggered so that is event bubbling you know bubble it will grow grow okay so like in this diagram the event will be triggered from the bottom to the top of the Dom and that is event bubbling let's see the code here first we will get the reference to all the elements and add the event handlers with all the elements like this okay now here is the function see no extra code or setting is required if you trigger the event of the button which is the innermost then all the parent events will be fired automatically so that is event bubbling the conclusion is event bubbling is the process in JavaScript where an event triggered on a child element propagates up the drum tree okay and the triggering event handlers on its parents elements great now I think in this lifetime you will not forget it how can you stop event propagation or event bubbling in JavaScript for example if we have this HTML with nested elements inside it and then this JavaScript code which will automatically enable event bubbling for nested Elements by default right now suppose we do not want this behavior of event bubbling in our project or application then for that in the Handler function we have to call this stop propagation method of the event object like this okay on so now on the web page if you click the child button only the event attached to the child element will be triggered and the ID of the child element will be logged and that this method will not allow this stop propagation will not allow the parent element event to be triggered okay so the output will be something like this the answer is event bubbling can be stopped by calling the stop propagation method on the event object that is the short answer of this question what is event capturing in JavaScript this is exactly the opposite of event bubbling for example suppose we have nested elements in HTML like this now if you remember event bubbling then as per that if if we click the child element then the first child element event will be triggered then the parent element and so on from bottom to top but in event capturing if I click the button then a first the event of the outermost element will be triggered then its child element will be triggered and so on like this so if you look at this diagram this time the sequence of triggering the events will be from top to bottom which is exactly the opposite of event bubbling now the question is how to code for this Behavior the implementation is also 90 same as event bubbling nothing is specific the only difference is that the last parameter the third parameter of the add event listener method will be true this time so basically this will enable event capturing in JavaScript by default this parameter value is false and that's why it it was doing event bubbling but if you make it true then event capturing will be activated the conclusion is event capturing is the process in JavaScript where an event is handled starting from the highest level ancestor and moving down to the Target element that is the answer got it what is the purpose of the event dot prevent default method in JavaScript for example we have a link on our web page like this now the requirement is that we want to disable the default click event of this hyperlink okay for that first we will get the reference as always then we will attach an event to the click event of this link and then we will call the prevent default method of the event object okay which will the the suppress suppress the default behavior of this link and that's how the click event will be disabled for this link instead of that this next log line will be executed the simple answer is the event dot prevent or default method is used to prevent that default behavior of an event and the link click will be prevented now you also know why this event object is important for us for doing various things right that is the uh one function of the event object only right what is the use of this keyword in the context of event handling in JavaScript if we have a button element on our web page we can get the reference to the button by using the get element by idem ID method right and then we can attach it to an event now in the function this keyword will refer to the element to which the event handler is attached okay so this keyword will refer to the button element in this case the same thing I have written here also so remember what this refers to the element how do you remove an event handler from an element in JavaScript suppose we have a button element on our web page and then we are getting the reference of the button and attaching the event handler to it and here is the handle click function basically we have attached the event handler to the button event right but maybe at some point in our application we do not need the event handler to be fired we do not want to fire the event on this button click at that point we have to remove the event handler and in order to remove the event handler we will call the remove event listener method of the element in JavaScript something like this here we will simply pass the click event which has to be removed and the event handler function name so the answer is remove event listener method is used to remove the event handler from the element that's the answer of this question all right if you reached here and completed all the question and answers then congratulations because where there is a will there is a way my best wishes are with you and if you have any question then feel free to ask me again all the best for your interviews and career and if you want to say all the best to me then do like and subscribe the channel and don't forget to post your success story in comment section whenever you get the job okay thank you thank you

Channel: Interview Happy

Views: 207,139

Keywords: JS, JavaScript, Interview

Id: AUTO7ALJk2U

Length: 180min 41sec (10841 seconds)

Published: Thu Sep 21 2023