JavaScript Interview Questions & Answers | JavaScript Interview Questions

welcome to quespond's youtube channel and what are we doing today today we will be running through 35 important javascript interview questions with detailed answers and code demonstrations it is 100 guarantee that in a javascript interview you would at least get 20 to 30 percent of the questions from this one hour of video and before we move ahead i would like to share two big gifts to you so if you go and if you share this video on your twitter on your linkedin or on your facebook account right we would give you this beautiful ebook and this beautiful ebook covers all the interview questions you know which are covered in this video with source code so each question you know every question what you see out there you know we have a source code and demonstration even the source code you will get it right so go ahead share this video on your facebook on your twitter on your linkedin and once you share it please do send an email at quespondquestpond.com and uh we would be more than happy to share the ebook as well as the source code so let us start with this one hour video right and let us start with the first question from this lesson explain javascript is a dynamic language now when this question comes in many candidates or many developers answer back that javascript is a dynamic language because things can change during runtime things can change during runtime then the interviewer will cross question saying that what do you mean by things can change and then the candidate answers back you know saying that things means the variable values can change during run time and then the interval again cross questions you and says that what do you mean by the variable values can change because the values can always change of a variable and then the candidate answers back says that okay when you say that the variable values can change means the the variable can have a number right and later on the variable can have a string and then the variable can have a boolean now think about this conversation for a minute the interviewer had to ask you almost two to three questions you know to come to the right answer now how good is that the interviewer is not getting extra paid for this interview he is frustrated also must be he has commitments he has project deliveries and he's coming to this interview and he's finding that he has to work more hard you know to understand that you are a right candidate so tip number one be to the point come to the point directly don't hit around the bush so now let us go ahead and try to answer this question to the point right so javascript is a dynamic language means that the data types of the variable can change during the runtime it can change during the runtime means you can see now there is a small example out here so in line number 10 we have this variable x which is defined which has value 0. so in line number 10 and 11 you can see this variable x is a number so in line number 11 the variable x is a number you can see at the left hand side i have used the type of function to get the data type of the variable so it is a number but later on if you go to line number 12 you can see now when i go to line number 12 it's now a string and when i execute line number 13 it's a boolean so dynamic language means that the data types of the variable can change during the runtime so b to the point javascript is a dynamic language because the data types of the variable can change during the runtime and javascript will not complain about it how does javascript determine data types javascript determines data types by looking at the values during the runtime for example you can see in line number 10 there is a variable x out here and this variable x is assign 100. so it says oh this is variable x and this variable x is going to get assigned 100 so the data type will be a number so after line number 10 you can see the data type of the x variable is a number now in line number 12 you know we are saying that x is equal to a string so as soon as you surpass line number 12 you can see the data type is a string in line number 14 we are assigning x is equal to true so after that the data type becomes a boolean so javascript determines data types by looking at the values during the runtime how can we determine data type of a variable in javascript to determine a data type of a variable in javascript we can use the type of function so this type of function actually takes up a variable like for example look at this it is taking up the variable x and if you call this function it gives output that what is the data type like example here it is a number if you see down again this is x so if you give type of out here the data type is a string so to determine the data type of javascript variable we can use type of function what are the different data types in javascript so there are eight data types in javascript and you can divide this eight data types or you can classify these eight data types into two categories one is the primitive category and the other ones are objects so in primitive category you know we have string we have number we have null we have undefined we have boolean we have big end we have symbol and then objects we have objects you know the objects can be like one is the object of the javascript or it can be your own object you know like customer object or supplier object or whatever so we can classify that category just into objects so there are eight data types seven which are primitive and one which is an object now definitely you know naming all these eight data types during the interview it will look very kiddish it will look very bookish so what you can do is you can talk about the most used data type if you look at the most used data type which we used day and night right is string numbers nulls undefined boolean and object i repeat it string number null undefined boolean and object bigint and symbol you know they are important data types you know but they are used under specific situations only one of the tricks you know which many of my students use for this question is to remember the acronym snub snub the word snub with a double n right so where s stands for string n stands for nulls n stands for numeric u stands for undefined and b stands for boolean now i can see many many seniors out there you know raising eyebrows are you serious you want to use these acronyms right i'm a senior person you know i have cracked so many big projects uh so here is a second p be prepared yes you can be a senior person you can be one of those rock stars you know who has made projects successful but let's agree must be to disagree that we do not keep revising data types now and then working in a project is different and preparing for interview is a different ball game so i would suggest be prepared a prepared developer has more chance of cracking a javascript interview than an unprepared one everything is fair in job and war what is undefined in javascript explain undefined data type so undefined is nothing but you know it indicates that the variable has been declared but it has not been assigned a value for example you can see out here on the screen we have this where y so y has value 10 right we have where z so z is declared and it has been assigned a value shift so it has value shift but look at line number 12 where we have declared var x but we have not assigned any value so if you if you move your mouse you will see it is undefined so undefined is a data type which indicates that the variable has been declared but the variable has not been initialized it has not been assigned any value what is null null is a data type which indicates intentional absence of data null means it is not an empty string so when you assign a null value it means it is not an empty string it is not zero it is null null indicates an an absence of data intentional absence of data differentiate between null and undefined undefined indicates that the variable has been created but it has not been assigned value i repeat this undefined indicates that the variable has been created for example you can see we have said here where x but we have not assigned any value so that's why the data type becomes undefined but in case of a null we are assigning the value the variable has been created we are also assigning the value null and null indicates it is neither 0 it is neither empty it is null it indicates an absence of data explain javascript hoisting javascript hosting is a mechanism where variables and function declarations are moved to the top of the scope before the code execution so while the code is executing it moves the variables and function declaration to the top of the scope means what for example you can see here in line number 11 in line number 11 where y is equal to 10 we have created a variable y which is assigned the value 10 right but if you look at line number 10 if you try to refer y variable in line number 10 you will see that y is undefined it is undefined and what is undefined undefined means the variable is declared but it is not initialized means we have where y but it has not been initialized with a value right so javascript what it has done is during the execution during the runtime it has moved the variable declaration at the top of the scope right and please note one more cross question can come over here does hoisting move the initialization values no you can see out here again it has not it is not saying y is equal to 10 it is saying y is undefined so it has not moved the initialization value until this line number 11 executes once the line number 11 executes yes then y becomes 10 right so i i repeat this answer remember be prepared for interviews uh because i have seen many seniors you know they know what is hoisting but sometimes when it comes to explanation they are not able to explain it so let me let me just revise this answer hoisting is a javascript mechanism where variable declaration is moved to the top of the scope before the code executes explain global variables global variables are those variables which are accessible throughout the web page or throughout the document for example you can see on the screen i have created a global variable called as x so this x will be accessible throughout this web page throughout this html document and also it will be accessible inside any function so it's so globally variable means it is accessible anywhere throughout the web page now the problem with global variables is that it can make your application very hard to debug and buggy so for example think about it you have a global variable here like x and it is getting manipulated through many functions it is getting manipulated from many places and on the top of it javascript is a sync so that's why it becomes very hard to debug and it can make your application very bug what happens when you declare a variable without the where keyword what is the implication of declaring a variable without the where keyword when you declare a variable without the where keyword the variable becomes global for example you can see here i have this function fun one and i am actually assigning this value y equal to 100 and i'm not using the var keyword so what will happen now it will create this y variable right you can see that the y variable is created y equal to 100 but you know it is also accessible outside you know so if you are thinking that this y variable is only accessible inside this fun one then it is quite wrong if you go and if you check this y is also accessible outside so the y variable has become global so if you declare a variable without the where keyword it will become global and once the variable becomes global it becomes very hard to debug it makes your application very buggy what is the use of use strict keyword ustrict is a directive which says that strictly check if the variables are defined using the var keyword or the let keyword i repeat the answer you strict when you say when you define use trick at the top it strictly checks if the variable is defined using the var keyword and if the variable is not defined using the var keyword it will throw up an exception for example you can see in line number 14 we are saying y equal to 100 so the variable y is not defined by the var keyword so what will happen is if you run this it will throw up an exception you can see out here there's an exception out here saying that y is not defined right so u-strict strictly checks if the variable is defined using the var keyword or the let keyword how can we avoid global variable issues first point global variables are needed in a project so it is very difficult to avoid global variable but we can avoid global variables i repeat this sentence we cannot avoid global variable singular but we can avoid global variables as a best practice what you can do is point number one we can put global variable in a proper common name space so that it is not polluting all across the page you can see here rather than going and creating individual global variables like connection string and log directory and so on what we can do is we can put them into a name space called as global so that you know we know that where these variables are and what we are manipulating second you can go and you can create closure and you can apply module pattern so module pattern and closure so we can see this is a closure out here we will talk about closure separately in separate chapter later on right for now let us try to focus on this answer let us try to focus on the overall content of this answer for closures we will have a separate session okay so here you can see this is a function inside a function and this is a connection string which is a global which we want it to be global but what we are doing we are manipulating or we are getting this connection from a function so we can create a closure and all your variables are private to the module but they can be accessed through a proper predefined function so summarizing it is difficult to avoid global variables but what we can do is we can use namespaces closures and organize things well explain closures what are closures in javascript now before i start here i want to make a very important statement closures is one of those areas you know where the interviewer can really really take you for a ride so let's try to deal with this question very delicately very cautiously and remember the three p's which i talked about be practical be to the point and be prepared right so let us try to put down a very very simple definition out here so that we don't get into those closure controversial questions right the most simplest definition which i can put for a closure out here is that closures are stateful functions closures are functions inside functions and they make a simple function stateful i repeat this answer closures are function inside a function you can see it's a function inside a function and it makes a normal function stateful now let us try to understand this statement right so you can see here we have two functions one is a very simple function and another one is a closure so you can see the way we write closure we have a function inside a function and this function is exposed in the return out here right now when we call a simple function we can see i'm making a call to a simple function out here it go the the state is it is stateless the state is not remember you can see it goes it executes this where x is equal to zero it makes it one and after that the stack is cleared the memory is cleared now when you make a second call for example i'm making a second call out here to the simple function you can see again x starts with zero right but in case of a closure in case of a closure now look at this this is a closure in case of a closure i can hold a reference i can hold a reference to it and i can say that no don't let go these memory variables that makes the function stateful so you can see here this is a closure function out here and it is exposing out an increment function and this increment function what it does is it increments the variable right so you can see now i'm i have i've holded a reference you can see i'm holding a reference to the closure right and now if i go and make a call so this x becomes 1 and because my reference has still not been released and if i again make a call you will see that the the value is remembered and now x is equal to 2 so here now the function has become stateful so putting down very simple words so that we don't get into those controversial questions of closure closure is a function inside a function and it makes a function stateful it makes a function stateful the next connected question which will come around is what is the need of closure what is the use of closure the only one goal of closure is to create self-contained functions to create self-contained code to create self-contained module and when you create something self-contained you have a self-contained state and when you have a self-contained state that means you are avoiding global variables remember i discussed about the problems of global variables how it makes your code messy so one of the biggest benefit of closures is that it helps you to avoid global variables it creates self-contained functions and self-contained state so you can see here this is the closure function right and you have this where x now this var x is only available within this function right and if you want to go and manipulate this where x then you have to manipulate why are the functions of the closure for example you can see by calling increment you can go and you can increment x if you want to get the value you will use this function get x value to get the value right there is no other way you can go and you can manipulate this variable so you can see that now we are creating self-contained code the other big benefit also of closure is that it helps you to expose only what you want because when you say self-contained functions right you you want to have control saying that see i want to make only these methods public so you can see here we have three functions here increment get x value and init increment and get x value is made public so you can see in the return i am saying that yes anybody from outside can call the increment and get x value but you cannot call in it in the return i have not exposed out in it so this is again one of the biggest benefit of functions of closures abstraction show only what is needed to the external world right so this init is called from the function right but it is not available outside so you can see out here uh if you see this code if we try to run this so i'm going to go and so you can see now increment so this is the this is the closure this is the varex now if you want to go and change values it is only via the increment function right if you want to go and get the value it is only via this get x value you can see a get x value right and we get that in the alert i have incremented twice so that's why it is saying two now this init function is private to the closure you can see this init function is private to the closure because i have not specified it in the return so what will happen is when i try to make a call out here i am expecting an exception so if i make a call here you can see init is not a function right so by using closures you know you can write better code you can create self-contained functions self-contained state now in the interview right let's try let's try to put that one sentence before the interview right so that you know we don't try to talk about the whole story here so closures are useful to create self-contained code self-contained functions that leads to a self-contained state and we avoid global variables what is iffy explain if he if he stands for immediately invoked function expression if he stands for immediately invoked function expression remember that sometimes you know if you are not able to say the full form of acronyms it can be very embarrassing right so immediately invoked function expression now let's talk about the definition of iffy so if he is nothing but it is an anonymous function so anonymous function means it does not have a name and it gets immediately invoked it is self-invoking so you can see here we have a function here which does not have a name and you can see this two round brackets here which says that invoke this function immediately so the way we write iffy function without the name curly bracket start curly bracket and and then a round bracket saying that we have to immediately invoke it so you can see here as soon as this function is created it gets invoked you can see that alert out there it gets invoked and the second thing about iffy is that any kind of variable we use inside if it is local to that function to that anonymous function so you can see this y variable was local it won't be accessible out here so the y variable does not spill out as a global variable so you will get an error out here so you can see the error in the console if you see very quickly if i just run this you can see out here y is not defined right so putting the whole answer together if he is an anonymous function which gets invoked immediately and any kind of variable we create inside if he is local to iffy in this section we will try to answer three questions what is the use of iffy what is name collision and how a normal function is different from a iffy now all of these three questions are connected and can come in different forms during the javascript interview so let us first start with name collision because i feel that this is the root cause of all the three questions answer right name collision happens when you name the same variable names or method names in the same context for example you can see on your screen out here we have created a init function and just after this init function at line number 17 we have created a variable called as init so that means that we are trying to use the same name the same function name and the same variable name in the global context in the window context right so because of this what will happen now you will get an error so if you see out here you get an error that init is not a function so what has happened this function in it after line number 17 it has become a variable remember i said javascript is a dynamic language a function can become a variable an integer can become a string a string can become an object right anything can happen in javascript because it is a prototypical dynamic language right so this became a variable and you are trying to still think that it is a function and you have got a error so name collision happens when you have the same variable names or method names in the same context defined and this is the one of the reasons you know why if he exist if he solves the name collision problem so what is the use of iffy it solves this name collision problem why is this name collision happening think about it it is happening because your function has a name so if your function does not have a name that means an anonymous function then you won't have name collision right so what we can do out here is we can go here and we can say that let's not create any function name with the name in it so we'll just say create an anonymous function and write our initialization code in this right and invoke it so you can see now this won't give any exceptions because the variable init is there right and it is not colliding with this iffy out here because the if he does not have a name so if he solves the name collision problem now one of the cross question which is always asked around iffy is that what is the difference between a normal function versus iffy means if i go and if i create a function in it like this right and i call it how it is so different from this as we have seen in this demo right the time you create a function with the name you can have a name collision right so when you create a function with a name you can have a name collision but while in case of iffy you will not have a name collision and that is the only big purpose of iffy to not have a name to not have a name collision explain design patterns what are design patterns and which is the most used design pattern in javascript design patterns are time tested solutions for example if you want to go and create a single instance of object you can use singleton pattern if you want to minimize chatty object messaging we can try for mediator pattern and so on so design patterns are time tested solutions now in detailed discussion of design pattern is definitely out of scope in this video but i would advise to check my architecture interview questions you know where i've explained in more detail on how to answer architecture questions right now which is the most used design pattern in javascript well the most used one and which every interviewer wants to hear is the module design pattern or the module revealing pattern module pattern is the most used design pattern in the javascript community and it helps in two ways point number one it helps you to create self-contained independent components modules namespaces that helps in loose coupling and well-structured code so that is the first point and the second important point is module pattern provides encapsulation means we can control what you want to make public and what not so two things first one self-contained independent components and second one it provides great encapsulation so let us try to understand both of these points uh from this code out here because what i uh you know because what i feel is that you know when you go for a javascript interview this design pattern is one of the most asked one and i'm sure that if you don't see the code right it would be very difficult for you to explain the interviewer what exactly module pattern means module design pattern is a combination of iffy and closures if he helps for creating logical name spaces which further organizes your code and makes it structured and organized while closures you know helps for implementing good encapsulation so through encapsulation we can control what is to be shown and what is to be hidden you can see out here we have a sample code so by iffy we can go and we can create logical namespaces right so here you can see you can see on the code out here we have customer functionality and we have supplier functionality so by using iffy i can now create a namespace you know wherein i can put the customer so what i can do is i can go and i can say here where cust namespace and by using on iffy i can just go and create a name space out here so you can see here by using an iffy i have created a logical namespace in the same way what i can do is i can do the same for supplier as well right for so far supplier i can i can go and i can say this is the supplier namespace and so you can see here we have two namespaces logical namespaces customer namespace and supplier namespace right now and the customer has all the customer functionality while the supplier has all the supplier functionality right now uh by using closures you know we can reveal or we can show only what we want for example you can see we have customer and invoices so customer and customer invoices we want to expose that but we don't want to expose customer validation customer validation is used by customer and customer invoices functions to do validation so this we don't want to expose but we want to go and expose both of this out right so for that what you can do is you can say return and you can say your expose out customer and expose out customer invoices so that's why it is also termed as revealing pattern why because you are revealing what you want right so you can see by using iffy immediately invoked function expression we are creating namespaces while uh by using closures you know we are exposing what we want we are encapsulating you know things which are complicated so module design pattern or module revealing design pattern is a combination of immediately invoked function expression and closures and we have and we get two big big advantages one is logical grouping better structured code and second one is good encapsulation we can control what to be shown and what to be hidden so we can now go and say that from the cust namespace go and create an object of customer this will work right so if you try to run this you can see that there is no problem right but if you go now and if you try to create the object of customer validation it will not work so you will see that we have an exception out here there is nothing called as customer validation why because it is now internal so remember in the interview when somebody will ask you about closure two things should come out better code management because of iffy and good encapsulation because of closures what are the various ways of creating javascript objects now there are four ways of creating javascript objects the first one is by using literal so you can go and you can define a name and a value and you can create a literal object for example you can see here in this line number 11 i'm creating a patient object with the name property and the address property and if you want to go and if you want to add logic and functions you can just say pad.admit that is patient.admit and write the logic whatever you want to write so the first one is by using literal just by using the the the name and the value you create the property and if you want to write a function or if you want to write a logic you just attach it the second way is by using object.create so by using object.create you can create an instance from the current object for example you can see pat is an object from that i want to create a fresh object i will say object dot create and i will create pat new right so by using object dot create you can create an instance from the current object the third one is by using functions or i will say constructor way so in the interview please try to use a proper technical vocabulary so rather than saying functions say constructor so in the constructor way what we do is we create a function and we define the properties we define the methods and then we go and we create the instance and the last one is by using es6 syntaxes so in es6 we have a class keyword so you can go and you can write a class here and then you can go and you can define the properties and you can create an instance of the class right so there are four ways of creating javascript objects literal by using the name and the value and attaching the functions on runtime object.create create the instance from the current object constructor way of creating the object that means by using functions and last one is by using the class keyword which was introduced in es6 no javascript interview is complete without a question on inheritance and prototype so in this section we will try to answer three connected questions around inheritance and prototype the first one is how can we do inheritance in javascript second what exactly is this prototype object and the last one explain prototype chaining how can we do inheritance in javascript inheritance in javascript is done by using prototype object inheritance in javascript uses object inheritance or prototypical inheritance so as compared to other languages you know where we have class inheritance here we do object inheritance now this is a very important statement and i and i and i feel that every javascript interviewer likes to hear this statement right so just make sure that you you actually send a message to the interviewer that yes you know that inheritance in javascript happens through the prototype object and inheritance is object-based it is object inheritance and not class inheritance as compared to other programming languages where we have a class keyword so now let us try to understand inheritance in javascript by a simple example so you can see here there is a function employee here so you can see there is a employee function out here it has name it has do work and it has attendance right and we are creating a manager function out here this manager has a cabin and it it is actually also having to work but his work is to manage teams right so in general we say employee will do basic work but when we talk about manager we say that they will do management of a team right and it also has some extra properties here called as cabin right so now if you want to say that okay manager inheritance inherits from employee or if you want to say that manager is a child of employee what you will do is you will say manager.prototype point towards the employee instance remember i said object inheritance so you can see here manager.prototype point towards the employee instance by doing so you are saying that manager is a child of employee so that means that everything what belongs to the employee out here the manager will get it but he will also add his own properties like cabin and also he will override something you know which is there in the parent for example in the parent we have this do work which does the basic work but when it comes to manager out here that do work is overridden and it is saying manages team so let us try to understand this program by debugging out here remember the whole goal of showing you the demo is that once the demo is understood you can speak very properly with the interviewer you can debate as well right so that's why i'm trying to show the demo out here so you can see here i'm creating the employee object look at this this is the employee object which has name which has do work and which has attendance right and if you say managers prototype points towards the employee object then what happens is look at this so manager has its own features right so you will see here this is manager so manager has cabin it also has do work but you can see there is an object here called as prototype remember that this prototype object is present in every javascript object right so every javascript object has a prototype so if you see here this prototype the in the prototype we are having employee so employee has attendance employee has name employee has do work right so now what happens is manager has the name property it also has the cabin property the name property he gets from the parent cabin property is his own right and when you call the do work function it will execute this do work and not the do work of the employee when you call the attendance because the manager object does not have an attendance it will fall back to the attendance of the prototype object so the crux here is that this prototype object is you know helps you to do inheritance right so if you see here now if i go here and if i say attendance right it goes to the parent you can see it is going to the parent here because the manager object does not have anything about attendance right so this executes great but if you now say do work because do work is present in the manager he will not execute the do work of the employee so if you see here when you say do work it goes to the manager function but not to the employee right and there it is okay so that's how inheritance is done in javascript it is done by using object inheritance it is done by using prototype object so the employee object was assigned to the prototype object of manager and that's what made manager as the child of the employee one of the other debates or discussions which happens during javascript interview is around the prototype object so let us try to see how we can solidify or debate around the same so point number one every javascript object has a prototype object so when you create a javascript literal object or when you create a javascript constructor object it will have a prototype object internally it is a inbuilt thing you know given by javascript so you can see here i have created the employee object out here this employee has a prototype object if you create the manager object it will also have a prototype object point number two prototype object works like a linked list so basically what happens is when you say that this is the employee object and it is pointing towards the prototype object of manager towards the prototype object of this manager object so what happens now this is the manager object out here you can see and the manager object has now a linked list object of employee so what happens let us say that if you go and if you call the name property on the manager right so the manager does not have the name property so what it will do it will say that okay the manager does not have the name property it will go up the prototype chain and it will say okay do you have the name property then the employee object says yes i have the name property and it is used for example now let us look at cabin if you see cabin right it says okay cabin it is available out here he will not go up the prototype chain look at do work the employee also has do work and the manager also has do work so first the do work will be searched inside the manager object if he gets it he will not go to the prototype object and if there are any function for example let us say if i put here one function called as function one so if the function one is not available inside manager first it will try to search the function one inside manager if he does not get he goes to the top level object employee prototype he does not get then he goes to the employees prototype object and there also he does not get it you can see the employee also has a prototype object that also he does not get it it will throw up an exception so basically this prototype object works like a linked list that's why it is termed as prototype chaining prototype chaining so it will first try to search that property or the function in the current object if he does not get it it goes and sees the prototype and tries to find it if he does not get it there it will throw up an exception so prototype chaining means it is nothing but you know wherein one object is inheriting from another object by using the prototype object of javascript and it is like a linked list and that's why it is termed as prototype chaining explain let keyword let keyword was introduced in es6 and led keyword helps you to create block level scoped local variable let keyword helps you to create block level scoped local variable means what you can see here we have this test function right so inside this test function we have two scope one scope is the function level scope from this curly bracket to this curly bracket and the next is a if level scoped from this curly bracket to this curly bracket and you can see here we have created two local variables out here one which is at the function level we say here let x is equal to 10 and one which is at the at the if scope at the if level right where we are saying let x is equal to 2. so because we have used a let keyword right this x equal to 10 this x is local to the test function this x where we said let x equal to 2 is local to the if block level scope so from this curly bracket to this curly bracket right so both of the x are actually different so if you see here i say let x is equal to 10 so this x is equal to 10 is from this block level scope to this block level scope from this function level block level scope till this block level scope but when i go inside this and when i execute x is equal to 2 now this x equal to 2 this x let x equal to 2 scope is from this curly bracket to this curly bracket if i come out again right if i come out again you can see now x is now again 10 yx is 10 because now this let x equal to 10 is applicable so let keyword helps you to create block level scoped local variable block level block level means from you know whichever curly bracket inside which you know you have declared the let is the scope of that variable nothing beyond that are variables with the let keyword hoisted now if you remember in one of the previous questions you know we discussed about hoisting hoisting is nothing but you know wherein the variables variable declarations are moved to the top so if you see a down at line 13 we have where y equal to 10 so there are two parts to this one is where y which is the declaration and y equal to 10 which is the assignation the assigning of the value or initializing the value right so just the declaration that is where y is moved to the top so it is moved before you know the value is assigned so if you try to now access this value y out here it comes undefined so by default you know what happens in where the value of y is assigned undefined it is assigned undefined please understand undefined is a kind of a value so the question here is that what happens for let x equal to 10 in case of lead keyword is the variable hoisted right so the answer is yes the variables are hoisted but they are not initialized with the value please note for where y the y is initialized with a value undefined after line number 13 after line number 13 the y will get a value 10. so in case of where what happens the the variables are hoisted and also they are initialized with the value undefined in case of let in case of let also the variables are hoisted but they are not assigned with any value so what happens is when you try to go and access x it gives you a reference error you can see it see here it's showing a reference error it says cannot access x before initialization right it does not say that x does not exist it says that it is not initialized so yes in case of lead keyword also hoisting happens but there is no default value assigned in case of work where there is a value assigned which is undefined after line number 13 the value becomes y equal to 10 right so repeating the answer in let also we do have hoisting but the value is not assigned so you will you will get an undefined you will get an reference error and it says that it cannot access x because it is not initialized around the same concept of lead keyword and hosting there is another concept which is connected and that is temporal dead zone it is very much possible that interviewer can ask this question as a connected question to the lead keyboard hoisting so let us try to answer this question temporal dead zone temporal dead zone is the period or it is a state of a variable when the variables are named into the memory so they have a name assigned to the memory but they are not declared and initialized with a value i repeat the answer temporal dead zone is the period or it is the state of the variable when the variables are named in the memory but not declared and initialized with a value and during this period and during this period if you try to you know try to access the variable you will get an error so here is the sample code which i'm running so you can see in line number 16 i am saying let x is equal to 10 so now what happens this x gets hoisted hoisted means the variable are moved at the top right so it gets hoisted but it is not initialized with a value so when i try to access this x you know before this statement of before the statement at line number 16 i will get an exception so if you see here i get exception out here and if you read this exception very clearly it says that i cannot access x he does not say that x is not available he does not say that x is not there it says that x is there but it is not initialized look at that that message it is not initialized so temporal dead zone is that state of the variable it is a state of the variable when the variables are there in the memory it has a name in the memory but it does not have a value so when you try to access them it gives an error so for this statement like let x is equal to 10 for this variable the temporal dead zone is from 10 to 15 so from line number 10 to 15 is the temporal dead zone for let x is equal to 10 in the same way you can see i've created a function here called as test so right and in that i am saying let y equal to 10 so the temporal dead zone for y equal to 10 let y equal to 10 is from 18 to line number 21 so before this if you try to access this variable y you will get an error why because the variable is there in memory it is hoisted but it is not initialized so temporal dead zone is nothing but it is that section it is that time you know when the variables are named in the memory but they are not initialized and it's a good feature you know because what is the point of accessing a variable which is not initialized with a value it can lead to a buggy code what's the difference between declaring variables by using let versus declaring variables by using var now this question can be very confusing and with all respect you know specifically for developers whose english is the second language it can be something very difficult to express technically and properly right so let us try to create a focused discussion out here so i feel personally that two big differences should come out or rather i will say every interviewer at least expects two big differences the first one is the way scoping rules are in where and the second one is the way variable initialization happens between where and let so first difference is around the scoping rules and the second differences around the way variables are initialized and declared so let's first start with scoping rules variables declared by where keyword are scoped to the immediate function body variables declared by the var keyword are scoped to the immediate function body while lead keywords are scoped to the immediate enclosing block right or it is more block scope right so let us let me try to explain this so first thing when you say a block what does a block means a block means that when you start the curly bracket and when you end the curly bracket so this is a block so we can see in our code out here there is one block which is this the if condition block another one is the function block right so the start of the curly bracket and the end of the curly bracket the respective curly bracket start and end is one block so when it comes to let keyword let keyword is very very strict it is the variables of led keyword are scoped to the immediate enclosing block means what for example look at this line number 14 out here we are creating a variable called as y by using the let keyword so this y variable is only accessible from this curly bracket to this curly bracket so the immediate scope of this y keyword right of the y variable is this curly bracket so the scope is only from here to here but in case of x for the x variable the scope is the function so this curly bracket or at the function scope so from this curly bracket to this curly bracket this x will be accessible so x will be accessible inside the scope as well as outside but the y will be accessible only within this scope so if you see here this program is running so y is initialized x is initialized and now outside when i try to access x x will be available because x has now been the scope is now at the function level so if you if you run this there is no problem uh you know getting the output the x is 10 right but now if you see y the y you won't be able to access you can see we have got an error here saying that y is not defined right so in other words y scope is only from here to here but in case of x the x went to the function scope so first one is the scoping rules variables declared by where keyword have a function scope while let variables are scoped to the immediate enclosing block i repeat this let keywords are scoped to the immediate enclosing block that's why we say it is a block scope the second big difference between the where and the let variable creation is that how the variables are initialized during the hoisting phase so already we have discussed hoisting the previous part of the questions right we said that hoisting is nothing but when the variables when the is nothing but you know it is a process where the compiler moves the variable declaration at the top so you can see on the screen in line number 16 and 17 we have declared two variables y and x but both of these variables will get hosted in other words you can access them in line number 14 and 15. so hoisting is a process where the variable declaration are moved to the top so hoisting happens for both of them hoisting happens for where keyword also it happens for let also so variables created by both where and let the variables will be hoisted but in case of where the variable will be initialized with the value undefined the variables will be initialized with the value undefined but in case of let keyword the variables will not be initialized with any value and because of that if you try to access a let keyword created variable it will throw up an exception because there is no value right so you can see out here the line number 14 will be successful you will get the value undefined but line number 15 will throw up an exception so if i run this right and if you see you can see out here in the console that is undefined this is coming because of console.x so x is hoisted and initialized but look at why the y variable is also hoisted it is showing up exception here that i cannot access before initialization now please note it is not saying that y is not existing it is saying it is it is not initialized so here what is happening yes the y is also hosts hoisted but it does not have any value but in case of where it has a value undefined so it does not throw up an exception so we can we can think that let is more strict in terms of scoping and initialization you know net keyword is like saying that the variables are created when it is needed i like this sentence variables are created when it is needed right so now let us try to put a right answer from the interview perspective where keyword is a function scope where keyword is function scope right while let is block scope while let keyword is a block scope in var variable in where variables are initialized in hoisting with undefined in case of let variables are not initialized with any value in the hoisting phase so when we try to access the variable it throws up an error so when you're answering this question remember two perspective one is scope and another one is how the initialization happens in hoisting so where function scope let block scoped in where variable is hoisted plus initialized but in case of let the variable is only hoisted but not initialized many times interval can ask tricky questions and this question is one of them this question basically tests basically your knowledge around numerical data types and also the awareness of how unwanted concatenation can lead to buggy code so you can see here uh the first one here we have declared two variables where where d equal to 10 value and we are seeing where d1 equal to 10 so if we say d plus d1 what will be the output now remember that this d and d1 are strings why it is a string because you put the value in the double quote so what will happen here it will actually do concatenation and not arithmetic addition so the output of this will be 10 10 1 0 1 0 right so if you look at the console the value is 1 0 1 0 so what the interview is expecting is that he's expecting that you know that when two strings even though when we do a plus they will do concatenation and not arithmetic addition right now look at uh 13 and 14 if these were numbers right yes then 1 plus i plus i 1 now at this moment they are numbers you know why because we have not given a double quote out here so this will show properly 20 right so this is arithmetic addition and this is concatenation so the interval wants that yes you should know the difference between addition and concatenation and and and the effect because of the data types now you can see one more tricky one which they can give console.log so 1 plus 1 plus plus 4 what will it give right now remember that this 1 and 1 are numbers so it will do arithmetic addition so it will become 1 plus 1 is 2 but look at that 4 that 4 is a string so basically it will do concatenation so it will be 1 plus 1 2 and concatenate 2 with 4 which is actually 24 so actually if you see the output out here the value is 24 right so whenever you are asked this tricky question just remember what is the data type and according to data type then think about concatenation or arithmetic operation so that brings us to the end of part one now in part two we will focus on es6 questions es6 has now been implemented by big browsers and interviewers expect that developers should have knowledge around the same so thank you very much happy learning and happy job hunting and just to reiterate if you go and if you share this video on your linkedin or on your twitter or on your facebook you would get this beautiful ebook for free so this ebook and the source code so whatever source code i have shown in this video even that you will get right so go ahead and share this video on your linkedin or or your facebook or on your twitter and send us a mail at correspondent requestman.com and you get this ebook and source code for free thank you very much

Channel: Questpond

Views: 220,948

Keywords: javascript interview questions and answers, Javascript Interview questions, prepare for javascript interview, important javascript interview questions, javascript questions for beginner, javascript interview questions for experienced, javascript questions and answers, javascript interview, javascript questions, top javascript interview question and answers, interview questions, web development interview questions

Id: Zb4dPi7CANU

Length: 61min 12sec (3672 seconds)

Published: Fri Mar 11 2022