JavaScript Mock Interview | Part 2 | Interview Questions for Senior JavaScript Developers

[Music] hello everyone welcome back to another round of duty mock interview series i'm jose a tech leader today and i am from montreal canada and at twittering i work help them hire the best engineers help with the vetting process and i have more than 17 years of experience and my expertise lies in javascript and today we come with this second part of the javascript interview uh i'll be interviewing law for an experienced javascript developer okay this is the part two if you didn't uh if you haven't seen the part one i will put the link

down in the description section below you can go there and watch and then then come back to this video or you can watch this video and go there after okay so uh hello how are you doing and so let's move on right so how are you doing today i'm doing great uh just had uh like prepared for this interview uh let's see how it goes oh nice okay so uh my first question for you is so uh what's the difference okay uh between new and undefined okay and how how could we uh go about checking

if one of these states no and undefined okay for undefined let's say uh you are trying to access a variable that is never declared so uh if you are trying to access a particular variable in your code that uh or lets say any object value that doesn't exist in that case you will have the undefined uh like basically that represents the absence of that particular value or that it doesn't exist and for null uh like it can be uh assigned by the user or let's say it's a primitive data type from javascript so it always

represents that it is set intentionally as null so let's say if you are trying to uh set particular sort of data and you are not like it's a conditional statement and if there is no data you don't want to set anything there so in that case you would use null instead of undefined so that will make sure that it is set to a null intentionally and it is not left as undefined which is unintentional yeah i think i got that so uh what do you understand about hoisting in javascript uh i would uh say i

have read that but i don't recall at the moment so i like i have read javascript hosting somewhere but okay i will explain you okay uh house hoisting happens in the first phase of javascript which will get all variables that use the clearing var or in every function that you use with the keyword function and with variables they will get that variable and put in the top of the next execution okay and they will assign the develop undefined into it so uh it doesn't matter if you create a function and create a var inside that

function that variable will become a global global variable javascript will put that in the top of the execution the next execution and assign the value undefined okay with function it happens a little bit different because uh javascript will get the whole function okay the the yeah this side natural the function and also the body of the function and but at the top of the next execution and that's why um that's why you create a function at the the the body of the page or at the bottom of the page and then you can call that

function inside the body so because with functions javascript will hoist the entire function it's like create a function at the bottom javascript you put at the top and then you execute that centimeter sense yeah that makes sense all right so uh no that's okay i uh and this is this is um this is fine because i don't expect you uh to know everything okay that's totally fine okay so uh could you explain me how jsonp works and i mean uh and how it's it's not a really uh ajax for example okay for jsonp i would

say let's say you have a script and like uh that is hosted somewhere and that particular clip needs to be executed and after then you have some callback so but in particular let's say whatever the like for jsonp scripts you will have where parameter which mentions a callback so as soon as your particular javascript has been loaded or whatever the initial operations needs to be made by that particular script is done uh you will have that particular callback triggered so that your like you are using that javascript externally in your system so your system will

come to know and that particular callback will be triggered uh from your system of from your sort of code so that uh you can come to know that this uh functionality has been loaded uh that has happened some issues so that you can uh check uh if required and if there is uh i think i have used it uh for facebook scripts or somewhere which allows uh trigger a callback as soon as that particular script is loaded so that uh you will have idea that script is loaded now if there is any operation needs to

be done uh you can just perform those operations and like basically for ajax calls uh those are synchronous calls so like when you insert a script tag uh jsonp calls are like uh always asynchronous in nature so like that's the first difference and in ajax law ajax calls you will have some response coming back from your event handler so let's say if you are calling an eject you are making an ajax call you will have some response either error or either data but in this jsonp you will have still the callback triggered so that like

uh you will come to know that if that particular callback has triggered with uh uh like you won't be knowing that callback has triggered with success state or false state it will just trigger that particular callback as soon as the script loading and execution has been finished got it yeah got it all right so i'm talking about best practice okay so uh what what what tools could be used to ensure a consistent code code style first like different kind of javascript methods like you can use uh keep it super simple case uh another is like

you can use what was that i forgot the acronym but uh like those are the some sort of functionalities that you can use uh first to like avoid duplication or keeping the code super simple so that your fellow developers can understand your code or whatever you have been writing in that particular function uh next is uh another one was dry i guess yeah uh next is like you can use a different kind of uh prettification tools to prettify your code so that uh like your code looks readable uh any other developer or someone who is

reviewing your pr or your code can understand uh with that particular formation so like if everyone is using the same format everyone will come to know that uh how the code has been written uh you can use eslint to analyze your code like if you are having undeclared variables if you are using a lot of console logs uh if you are having uh let's say if you are using a weight uh for a function that is like that don't needs to be awaited so like in that case you can use eslint which can gives you

some sort of warnings or indications so that you can fix those kind of warnings and apart from that i would say you can use some free commit hooks uh that can be configured with husky so that uh you can just run some checks with pretty er pretty ear and uh yes so that as soon as you're going to commit your code it critifies and make sure there are no uh linting warnings there so that uh if that is yeah avoid this is yeah this is great because sometimes people just don't care about uh inventing the

code or anything else so yeah using uh these kind of hooks could prevent them to push this code on the the code base yeah that's great that's great all right okay like people try to avoid them uh like while committing they just comment out the pre-comment hook or they might use like a different flags no that's that's no verify yeah i see people using this yeah all right so okay so that's great it should be proven uh we should not be allowed to use dash dash no verify and comment down below if you use dash

dash no verify in your code because sometimes i use that for sure i use it but uh i don't use it anymore okay all right so next question so um what do you understand by prototyping in javascript prototyping highly density javascript prototyping i would say you can create your functions as a prototype functions for example the function uh for array which is going to be uh you can create your prototype function by using the uh array.prototype and like you can assign your own prototype function so that function will be assigned to each and every array

instances so that uh you don't need to re-declare that particular function in another component or another file uh if you are like using utility functions that's fine but this way you will have that particular function uh up like linked with that particular error instances and all of that in instances will have that particular prototype function so let's say just consider you have a area of file you just want a function sum that just does a sum of all their elements you can create a prototype function uh you can just call it with uh array.sum it

will just return you the value you are looking for nice and i'll give you one example that i use prototype okay like 15 years ago i was uh creating javascript code for internet explorer and and i will never forget that so i have to update the array in the array javascript in the internet explorer prototype to use index off because like uh 15 years ago uh the javascript that runs inside the internet explorer doesn't contains index off and then i was looking to that function firefox have had that google chrome had that but internet export

doesn't we have to assign that using prototype we need to manually prototype that particular function yeah and then it's solved my problem okay next question so so how would you compare okay users of uh module uh pattern uh uh against a constructor using prototype okay so constructor functions and prototypes that are like ways to implement the classes and instances so like you are going to create instances of a particular class variable or like class you are going to use like constructor functions to like initialize that particular class variables or whatever the methods you have uh

next like for module pattern you will be using different kind of name spaces where like you will have single instance that will act as a store to group all the related functions or objects that are required for your execution and like when you are like differentiating them like prototyping is good but like if you need to like recheck each and every case like if there are like you have array but like you don't have what we say area of numbers at every time and you don't uh you are not sure that it will be area

of numbers every time in that case like prototyping can be a good if it is numbers but if it is containing strings uh that will just sum up uh like it will just append all the data to that particular string and you will have something that you are not expecting at that point so prototyping is good if you are sure of your data and like if you are not sure of the data what will be coming in or you are not handling each use case in that case prototyping might be not the thing you are

looking for got it yeah and also you can create another function and and assign the prototype to for that function to another function right that's called prototyping height test so you will enhance all functions methods anything everything from that other function yeah nice next question so what's the difference between um reference and value okay and is javascript uh passed by reference or pass by value okay so first of all to answer your first question uh like a value is whatever the value you are assigning to that particular variable and reference is like uh javascript keeps

a reference of like what that particular variable is stored at or whatever the like pointer location for that particular value is now javascript is passed by value so like whenever you are passing that particular value to a particular function or let's say particular object it is pass b as an object uh value sorry so now let's consider if you are going to use an object and like objects are basically mutable so if you are going to like use those particular objects and pass it down to the function and it will keep the reference for that

particular object and like if you are going to update that particular uh object's data inside uh like any other key it will just update the whole object so let's say if you are going to update a object with 10 keys there and you are just updating one key it will reflect there as well because it is being passed as a reference there but like if you consider javascript it will still uh be passed as value and like if you are like actually change if you are actually changing the value of that particular object you will

see that changes will not persist it will just uh like four variables if you are changing a variable global variables value inside a particular function and like you are just exiting that function those changes will not be remaining there anymore nice really cool uh all right and how to okay how to deep freeze an object in javascript for deep freezing uh yes i would say like you might have object with like nested objects inside them so like if you are just going to freeze that particular object it will be a shallow freeze so the nested

objects will not be freezed anymore so to freeze all the objects you will need to uh reiterate all the objects like you will need to create a recursive function which calls for all the keys which are considered as an object so that it freezes all the data down the line so that if you have nested objects or let's say nested values inside nested objects those all values will be freezed and those cannot be overwritten anymore with deep freeze um okay so let me see if i got that so to uh to deep freezing an object

you have to iterate over the object over the keys right and then freezing all of them and also if that key is an object you have to do a requisite function to keep freezing freezing freeze is that correct yes so like you will keep uh reiterating as soon as like you have the type of like type of that particular keys object you will keep reiterating as soon as like type of key is not like not object you will just stop there you will move ahead to the next key you will have okay good i got

it yeah that's this one way for sure and in javascript why uh why is this uh why is this operator inconsistent in javascript okay uh this operator uh i have faced a lot of issues with that i would just explain this to you like uh for this operator uh that is inconsistent because let's say if you have a dome even triggered uh in that case that this object will refer to that particular dom node where that particular event has happened now let's consider if you have a particular function you are calling that a function with

particular object in that case it will refer this as that particular object so basically uh it uh it is not consistent like what data it will continue for dom uh related operations it might have dome node or let's say you have like parent and child events in that case you will still be confused like which dome node is being returned uh like if it is for parent event child event and like if you are calling a function or let's say if you are doing some operations uh while uh for those function calls these might uh

return to that particular object where you have instantiated that particular function so let's say you have my object dot xyz function call in that case uh this will refer to your object that is like my object nice and yeah yeah it's a bit confusing and then i have a follow-up question for you uh regarding this okay what is the difference between uh you create a function of declare function use the keyword function and error functions okay so the keyword functions needs to be bind with this operator like this instance so for arrow functions you don't

need to do those bindings es6 comes with like those bindings pre-done if you are using arrow functions those bindings are pre-configured for you so you don't need to do dot bind dot this which we usually do whenever we are calling that particular function if that is written with function keyword all right and what are the cons of use uh error functions cons i would say you won't be able to access this operator i guess and in that case yeah something like that because this operator will become uh this will be who called the function if

you use their functions this it doesn't matter if you are in a class but if you use the arrow function this will be the color okay and then it might be really confused sometimes that's why we see people doing a workaround and before create a error function they create a new variable called uh underscore self and then assigned to this and inside their function use underscore self did you have you ever heard about this yes i've seen that so that like that self function will allow them to access this operator inside their particular arrow functions

yeah yeah that's that's that's it so now i would like you okay to compare async awaits okay and generators okay uh so how could we achieve the same functionality using a single weight and generators okay so basically i'll just explain both functionalities first and then we can just go okay all right so for generators you will have your generator function your yelled keyword that allows you to get that particular regular value found it will just trigger the yelp function and yell will uh handle that with its uh what we see the next tick or what

is the next method they have so let's say you have a api call uh you have received the data you will just yell those data and the next callback you will have that will handle all the data in async await uh we will just await while the data comes in and like whatever the data we have uh i would say uh async await is just a simple functionality which we can uh directly use out of the box for generators and we need to understand how the generator function works or let's say how the generator value

needs to be yelled by that particular yield expiration and let's say if we want to use generators as async await uh we will need to like yell the values whenever api call is completed so that the next callback will trigger and you will have the data next next steps are up to you like if you're using it with react app you can just store the data or whatever the next operations you need to do and like generator will have always uh value with whatever the data is being written and it will have a done call

done filled which is just a boolean so that will uh allow you to know if that particular operation has been finished or not whereas like a single way it will be kind of promises so as soon as the await call has been finished uh you will just retrieve the data you want to have the next uh call or next uh what we say next call again that will be made to that particular yeah generator will return a iterator that's why you can uh also uh objects a map a set in javascript it's also return uh

iterator so you can go over a map over set using next okay and and like we are talking about generators uh generators also use uses symbol okay symbols it's a whole object in javascript there's a lot of methods there so if you are if you don't know what symbol is i recommend you to take a look at symbol uh and then just search for symbol on google you see symbol is amazing too okay uh so with this we come to the end so i would like to thank you all for this meeting this was really

nice to speak to you so you were really really really a great developer okay so i would pass you for sure for your next step at duty and i'll more than glad to more than have to help you to find a job okay uh and to everybody else thank you for attending uh in this mock interview series until the end and i hope you enjoyed this uh interview as much as i did and we are going to be back very soon with new episodes okay till then don't forget to subscribe to our channel uh like

this video if you enjoy as much as i did comment down below uh with what more videos would like to see in the upcoming video what more uh interview would like to see here if you want to see practical tests as well so till then give don't forget to subscribe give us a like uh uh follow us on instagram facebook linkedin link again go to community.turing.com uh we have a lot of events running there so you can attend those events okay and that's it for today um thank you all and i hope to see you

again okay thank you looking forward to the next stage thank you take care bye [Music] you