JavaScript Scenario Based Question and Answers.

dear friends long time ago in a JavaScript interview the interviewer asked me one question how to implement live search suggestion functionality in your application for example you opened google.com and when you are typing you are getting automatic suggestions like this right so how to implement this feature now maybe you think that this is a Google level question and you will surrender yourself right but in reality this is a very simple but indirect and scenario based question the answer is very simple just by handling the input event of the input control and that's it if I asked you this question directly like what is input event then maybe many of you know the answer it's simple right it's just like any other event like click event Mouse over event but uh in the indirect way it's slightly difficult the whole point is sometimes interviewer asked question indirectly and in a tricky way and we were not able to link the answers so today we are going to see 10 tricky and scenario based questions in JavaScript and here is the list of the questions some are scenario based questions and some are short and indirect questions let's start with the first question and yes I will be providing only the high level code only okay because implementing the complete functionality will be very time consuming so I will give you the shortest answer with the idea and the main points all right 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 And subscribe the channel just subscribe and post a comment whenever you get the job share your success story and that is my motivation and remember keep giving interviews and never ever give up I am 100 sure you can crack the interview alright now let's start foreign how to validate the user input as the user type in a form let me show you a video here for example if there is an input field like this and the user is typing something inside the input then you can see that the validation message in the console are keep on updating so whatever the user is typing is also continuously and parallely validating now first think by yourself all right the one line answer is by using event handling or event listener on input events this is possible here is the code first you have to get the reference of that input element like this then you must attach the event listener for the input event this input event is used for capturing the user keyboard typing for input field element okay then you have to get the changing value of the element by using the event object Target property okay now whenever the user entered some character inside the input field this input event will be fired and the value will be captured in this target dot value at the end you have to perform the validation logic as per your requirement in this case if the input is a string length is less than 3 then this line is locked otherwise else line with this line will be else will be logged okay so the main thing here was the input event on which the event will be fired and attaching the event handler to it that is the answer of this question how to handle asynchronous operations in JavaScript simple by using promises or async await mechanism here is a sample code for async await this is just the sample high level code not the complete one okay 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 how to implement pagination for displaying large sets of data the answer is by using the slice method or pagination libraries like react pagenate View pagination here I will show you how to do this with the slice method in the JavaScript for example you have an array of numbers from 1 to 15. first you have to declare three variables the first is items per page which is how many items per page you will display okay the second is page number which page data you want to display okay and the third is the start index of the page so if the page number is 1 user will click page number one then here the logic as per the logic 1 minus 1 equal to 0 and start index will be 0 at first right so now let's calculate the paginated data by using this slice method so the slice method will get the result from the start index 0 to start index plus items per page uh what is items per page it's equal to which is 10 as end in index index right and if you remember element at the last index 10 will not included for the slice method that is the slice method okay so elements from 0 index to 9 index will be the output for the first page here is the output next time if the user will click page number 2 then start index equal to 2 minus 1 which is equal to 1 then multiplied by 10 equal to 1 multiplied by 10 10. now in the slice method the result will be from the start index 10 2 and enter index 10 plus 10 equal to 20 but since we have a total of only 15 elements in the array therefore the result will be displayed from 10 to 15 only again the element at index 15 will not be included so that's the logic of the pagination used in every programming language how to store key value Pairs and efficiently access and manipulate the data for key value pairs the best way is to use either objects or maps for example here is a person object and you can see it can store both the key and the value now in order to access the value you can use the dot notation to access the value of the key like this person dot name and if you want to manipulate the value of the existing property then just assign a new value to the property and the that's enough how to implement drag and drop functionalities for elements on a web page you already know what is drag and drop right for example you have a div element like this now you want to hold this element by the cursor and drag it in the web page how is it possible for this drag and drop functionality of an element on a web page two main settings are required first by setting the draggable equal to true for the element in the HTML file here the HTML code of the div element and the drag up draggable property is true the second step is to add an event listener to the drag start event in JavaScript here is the JavaScript code where first we are getting the reference of the div element that we want to drag and then we are adding the event listeners to this event drag start so like input click hover drag start is also an event okay then in the logic of the event listener function we can get the ID of the target element by using the event object so this is like the basic code which will enable the dragging okay but now where you want to drag and what you want to do with the that element that depends on the requirement and for that extra code is needed but yes this is the basic idea and the primary things are draggable equal to true and this drag start event how to iterate over elements in an array and perform a specific operation on each element answer is by using array methods like for each map or for off Loop suppose you have an array number like this now you can use the for each method here and inside the method you can pass each number one by one as the parameter and use the arrow Arrow operator to modify each element like this and just logged it final output is like 2 4 6 8 10. each element is modified right but remember this will not modify the original array we have just performed some operation on each element and locked them that's it how to implement a feature that allows users to search for specific items in a large data set for example in the code we have an array of words like this now suppose we want to find the word that has this search term double b in this case we know the output word should be happy for that first we will use the data dot filter filter method like this where we will pass each word of the data array as an item as the parameter one by one the filter method will extract only those elements in this array for which this includes condition is true okay so that is the requirement of filter method and then those elements will be added in a new array which is filtered data now this includes method is checking whether the search term double p is present in the array item or not so if any item will contain that search term double P this statement condition will be true and the item word will be added to filter data if it doesn't contain this state this condition will be false and the item will not be added okay so finally we will have this happy in filter data because it contains the search term right final answer is search functionality can be implemented by using the array methods filter and includes what method is used to retrieve data from an external API the answer is we can retrieve data from external API by using the fetch API method if you see the code here then we are passing the URL of the API as a parameter inside the fetch method now if we receive the proper success response then this then function will be log the log the response data or but if we receive the error then this catch function will log the error that's the answer how to implement a feature that allows user to perform live search suggestion as they type very important question on live search for example on many websites like Google you have noticed that when you start typing Google immediately start giving you hints like this right so how is it possible basically Google is continuously capturing the keys you put inside this input field by using Word by using the input event okay if you can see the code here first we are getting the reference of the input element on which user is typing then we are attaching one event handler to this input event so that whenever user type something inside the input field an event will be fired okay now whatever the user is typing inside the input field that will be captured by this target dot value property of event object and then continuously it is sending the search text to the server to get the relevant hint results for sending to the server and getting the result we can use this fetch a method or API of the JavaScript so where we can pass the server URL right and then receiving the response and continuously displaying and updating the response to the user like this the short answer is we can enable live search on any input element by using the input event on the element and the fetch API to retrieve the search suggestions from the server that is the answer of this question how can you create an infant infinite scrolling feature using JavaScript when a user reaches the bottom of the web page okay very good scenario based question it is nowadays when you open any e-commerce application on mobile then you can scroll and scroll and more products will be loading right this is better than a pagination technique from user experience point of view right because in pagination you have to click page numbers to navigate right that is not user friendly now let's see how to implement this here suppose this is a method load more content that will be called automatically as the user scroll okay and here is the body of this method where we are basically getting more data fetching the data from the external API okay now the last and the most important point is adding the event handler to the scroll event of the window object so here inside you can put the logic for example how much the user should scroll to call the function load more content okay so that logic depends like the length of the Mobile screen size all but this is the high level idea and the most important thing here is the scroll event so for that you have to code to achieve this functionality of scrolling and loading more content on your web page 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

Channel: Interview Happy

Views: 16,531

Keywords:

Id: 1cO6kfr2ctg

Length: 15min 20sec (920 seconds)

Published: Sat Oct 07 2023