Answering tricky JavaScript interview questions

so my talk is biz buzzkill and we'll talk about that in a second but this is related to the concept of questions you might get in an interview I am Russell Anderson I am a husband and a father I live here in Nashville in Englewood I'm a Christian I'm also a terrible golfer though it's probably my favorite hobby it keeps me humble very humble and I'm real real Russ on Twitter I work for a company called simply agree it's a start-up here in town and we are workflow software for attorneys specifically transactional attorneys at this point I am a front-end developer and I think that you can all glean from this weekend that that that is a like multitude of tasks and tools I've been doing it full-time about five years and I have no sort of outside computer not computer science schooling or anything I'm completely self-taught but really I'm mostly colleague taught I've kind of leaned on a lot of really nice really good people at the jobs that I've been fortunate to have to kind of teach me what I know and I've mostly worked like in everywhere that I've worked I've I've used JavaScript but it's always been in the context of a framework or library back in the day that was jQuery and backbone it's been angular it's been react but it's always been in this context the irony of the picture that I chose here is that if if the apocalypse were to happen I would be not be able to use any of these actual tools I would want to build software and be completely useless but the inspiration for this talk is there's a designer that I followed named Brad Frost and he wrote a post last year actually called why I'm not a JavaScript developer and he basically took a list of front-end interview questions specific to drop in JavaScript that is on the html5 boilerplate github and he sort of took every question and wrote kind of a smartass remark to it so for instance he said why is it called a ternary expression what does the word ternary indicate ternary means it involves three things and strings them all two on one line so it's harder to read and then he said create a loop so this is the the fizzbuzz question create a loop that iterates up to 100 while outputting fizz and multiples of three buzz at multiples of five and fizzbuzz at multiples of three and five so this is a actual kind of standard coding question and his response was that sounds hard and for some strange reason I am suddenly jonesing for dr. pepper and so it was funny I read it and I was like oh yeah that's that's funny but it was like he was funny but then I thought I I don't know that I could answer those questions like I use JavaScript every day and I build software with it but I these seem kind of basic and I don't know the answer to them so and I figured that I'm probably not alone in that like you can actually build a lot of awesome stuff with the tools that you use and not completely understand the tools themselves so I took thought a good talk idea was to take some of these questions and just try and answer them and answer them like succinctly as if I would have to be in an interview and maybe give some real-world application to them but before I jump into the questions themselves they kind of want to address the point of like our interview questions are they a are they a good idea I I think that this is definitely something and if you're a junior developer and you're gonna be you're going to be going to a lot of interviews and you're gonna probably doing a lot of code tests and things like that or if you're a hiring manager looking at it from the other way you should know that a lot of times putting people on the spot with things like this is essentially creating a adversarial relationship with the person that you're interviewing and that really may not not be what you want to do you might want to be in a position where you want a person to feel comfortable with your company with your team so I'm not necessarily a proponent of asking a bunch of arbitrary code questions in interviews but I figured it doesn't hurt to know the answers so let's get started we'll start with this one is kind of a softball and I guess I'll preface this by saying if your senior dev in here you're probably this is old old turf for you but hopefully maybe there's some new things that you hadn't ever known exactly how it works I learned something this morning just from researching this and if you are a junior or beginner hopefully this will sort of answer a couple questions for you but this one is pretty basic but it was one that I couldn't succinctly answer explain event delegation event delegation is JavaScript as it relates to the Dom it basically means that if you attach an event listener to Dom element that listener is not only firing on that Dom element it's actually firing on every children in that so for instance if you have a navigation and so you've got an unordered list and you've got list items and then you've got anchor tags inside that navigation what you have if you add an event listener to the UL in essence you're actually adding event listeners to all of the children as well so it's something to and this happens through a process called event bubbling so sort of the inverse of the idea of delegating down bubbling is when it comes back up so events on an element will bubble up to all of their parents so when you click upon that a you're actually clicking on the Li and you're clicking on the UL and you're clicking on the body ultimately so that that's the concept of event bubbling so how it actually works out in practice ways that I found it useful are for instance if you have live edits to a form that you want to track and you've got to form with a group of inputs in here let me have to go them over here to scroll yeah but you've got all different types of inputs and you want to maybe test when they blew out of one of these inputs or they key up or something like that well you could go through and you could target each one of these individually you could grab all of them by a specific tag and then you could do this the special loop over them in order to add an event listener to every single one so that would totally work and then you'd have one function that would you would probably have to create a different case for what type of thing it is in there but you can bind to it but you can also just simply bind to the parent so just grab the form itself and everything inside of it that can change that can fire a change event is going to fire a change event and so your form would run and then in here you might have some sort of switch based on the name of that element or something like that and this kind of demonstrates for us this wasn't part of the the questions but it's sort of a bonus tip bit you'll notice that when I'm listening to kind of a more Universal event on looking for child elements that would trigger it I want to use event target not event current target and so that's a bonus little tidbit that the difference between target and and current target whenever on an event listener is that target is the actual thing that was clicked whereas current target is what you attach the event listener to so if you've ever wondered what that is I had to answer that question like just last week so so that's that's a little bit about the Dom moving on next question explain why the following doesn't work as an if B well in order to answer that I actually didn't know what an if he was so what is an iffy if he stands for immediately and vote function expression so if you actually ran this code the way that it looks right now you would get a syntax error in your browser and what you would want to do is basically it's the idea of an immediately invoked function expression is basically I write this function and I run it I just want to write it and then run it immediately but you can't do it this way and the reason why is has to do with kind of another related question is the difference between writing a function as a statement or as a definition and writing it as an expression so in JavaScript anytime we they're sort of you have statements and you have expressions expressions result in a value and that's the concept of an expression so if you like assign a variable and try to attach a value to it that will be read and interpreted as an expression and it will create a value this creates more of sort of like a reference but it's not an actual value so you can't just run it in fact if you sort of try to run this code immediately this is how javascript is reading it and it's like this doesn't make any sense to me you wrote this thing and then later on you're trying to call a function that you doesn't have a name this this is weird so instead you need to but there are a lot of benefits and I'll call it get into the benefits of the second of writing it this way how can I write it that way and get it to run immediately well you can make that function at an expression simply by putting parentheses around it so now that this is in parentheses JavaScript is going to interpret whatever is inside that parentheses to be an expression not to be a statement and then it can run immediately so this is called an immediately invoked function expression so I guess that begs the question like why why would I actually need to use this well in a lot of situations and and this is probably if you're working within a framework or something like that you may not need to like you may never end up in this situation but the next time that somebody asks you to build like them a simple web page then this is going to be relevant again you do it in order to control variable scope so if you wrote this function that function is not going to be available the variables inside that are not going to be available outside of that function and actually the guy who's josh mock is speaking right after me he wrote sort of the best blog post that I found on this concept and of like why you might want to control that scope and it used to be I think for software developers it used to be more of an issue because we were writing a lot of things with jQuery and there were a million jQuery plugins that could be in our application and they all had very dumb and plain naming conventions and I was like I want to use dumb and plain naming conventions in my application so so this is how you do it and it kind of relates to another question on this list is that why in general is it a good idea to leave the global scope audible website and not touch it and it's because you can't predict the future so 27 years ago Robert Zemeckis predicted that the Cubs would win the World Series in 2015 and boy was he wrong he was a year off what an idiot but seriously like you don't know especially if you're building that that web page for your friend like what they're gonna want to put pull in what kind of libraries and you want to control your variable names so you never have collision within your scope it also allows you to maintain independence and it makes it easier to write your own code you call things whatever you want because it's self-contained so that's a little bit about scope kind of adding on to that concept is this word which is probably my favorite javascript word which is hoisting explain hosting and before I wrote this talk I actually had no idea like what this was I had observed it but I had never quite understood it it means that all variables that are declared using var so this was kind of a specific problem well I'll get into how it's been addressed a little bit but all variables using four are declared at the top of any given function scope whether you really know it or not whether you sort of like it another or not and this actually includes the functions that are written as statements hold on where were they so the top example this would include those as well those are hoisted so this is kind of an example of what you might see but this is I used to try and do this all the time I would say okay I've got a variable and under this condition I want that variable to be this and in this other condition I want the variable to be this and I would just just be like well I haven't like create this variable anymore I'll create it here and then and here I'll create it and then maybe I have another case where I don't need to create the variable yeah I've saved memory or something thought about myself in my head but if you use a linter or something like this you will probably notice that this chokes this does not like you to write it like this it would say something like action is already defined on line six because this is in reality what is a happening behind the scenes that you don't even know about but javascript is taking that var and it is creating var action up here at the top and then what it's seeing here is that you're trying to declare this variable that's already been declared not only are you assigning it a value again but you're declaring it again and it's like this is what are you doing this is what job scrip is actually doing to your code if you write functions as statements like this those functions are actually all being hoisted to the top the entire function this is sort of why and I had never really understood this but sometimes I would write a function and I would try and call it and it would say that it was undefined but then I would move it in another place in the code and it would work but then other functions didn't seem to work that way well it all boils down to whether you write them as statements or assign them to variables so so yeah Lehner's will kind of bark at you about this because it's sort of not clean code and it's but that actually works in the browser browser hasn't had no problem with it but it means what hoisting means is that technically this works you can have your whole if statement you can assign value to it assign a different value and then declare it further on down in the code and this is totally fine for JavaScript and actually in the browser so this is this is pretty absurd this is one of the reasons why like people say that they hate JavaScript and whatever and we have a bad reputation whatever so in walk this has kind of been addressed with es6 and the idea of constant and lead so constant and let are ways of assigning variables that are not wasted they are actually even more than scoped within the function that you're in they're scoped within the block that you're in so if you're just in this in this if statement you can have variables that are scoped within there that the outside part of the function will have no knowledge of I would say that that this makes more sense like the more that I develop of wanting to control this kind of initially I was like everything can know about everything I don't care but this is really good for kind of performance and things like that to scope things as closely to where you want to use it as possible and it sort of gives you more control and again like I mean your colleagues might not like you but if you want to use like VAR x equals this and VAR y equals that you can and you can use it all over there's a really good article about it by the german doctor axel rauch meyer about this variables in scoping in es6 I would highly recommend checking it out so I guess the question is sort of after knowing these things what do we do with the knowledge of hoisting like does it actually change the way that we write our code and I'm really I'm not gonna touch this one this is like I think that this has been pretty well argued ever since constant and let came out of like which ones you should use but I do see a value in and declaring things as closely to where you're going to use them and I think part of my original intention here this is what I learned about hoisting was hosting constant and let give you block scoped variables and hoisting was basically trying to fake that the whole time so constant and let are basically solving the problem that's existed in JavaScript of we want to do this and we can't so we use hoisting to sort of fake it so I'll probably be writing constant and let mostly but so speaking of I've used the word declare a lot there's another question of like the what is the difference between a variable that is no undefined or undeclared so we'll start with undeclared it is not simply a short live show on Fox anybody ever see undeclared yeah if you like freaks and geeks you might check out undeclared it's not as good but you know so undeclared is basically when you try and use a variable that that you've never sort of used before you've never written out far foo equals or Const foo equals but you try and use it in some kind of manner so that's a pretty simple concept of what is undeclared it's just you you forgot something somewhere or you ripped out some code in my case you ripped out some of your co-workers code and now it's not working so that's undeclared undefined is it's a little bit different undefined means that you have declared it but it doesn't have a value it has not been assigned of value so these are all up here at the top are all kind of examples of ways that you might get undefined so if you just declare a variable don't assign a value if you have an empty object or you try and grab something on an object and it's not there you'll see undefined same goes for like the index of an array if nothing is there or if you run a function and the function doesn't return anything so that which is totally fine to do undefined is not it's not always undeclared is sort of something's gone wrong but undefined you could get for all kinds of reasons though it's not necessarily an indicator that something that's gone wrong the cool thing is with constant is that you can only use constant whoa look at that you can't you are forced with constant to assign a value to it whenever you declare so that may change actually the way that you want to use things because in a lot of situations I don't want to do that I want it to create a variable and then have it changed depending on situations so but that that is kind of nice because you'll never sort of have the problem of a constant being undefined and then you have oh yeah I've got this whole list of important information oh it's also false see which kind of plays into that it's not necessarily an indicator that something's wrong you can definitely use it if in some kind of logic condition if you're looking for false ii know is a little bit different and like it's kind of nuanced but knoll is a value it's just not a value you know no is actually the interpreted as having a value that value is not it's a nothing value it's a way of sort of creating in a placeholder assignment for something that would have maybe other values you see this all the time especially like if you're dealing with an api you you might have something on an object that's returned from your api you might see the key there and the keys value is null and that's that's completely right and if you ever have a situation where you need to sort of zero out a value null is a great tool in order to do that because because the idea of zero as a number well that's actually a value or zero as a string well that's certainly a value so you can use null instead yeah look through my notes here so finally what the question is if you how do you go about checking for any of these states well the first one is kind of easy undeclared will usually find you I say usually but it doesn't always find you because if you're trying to assign a value to a variable that hasn't been declared javascript will totally let you do that and it will go ahead and attach that value to the global scope which is really bad so essentially all that stuff that I talked about about not touching the global scope javascript will let you just do that if you leave off the the word bar so be careful use a linter that's what I would advise for there and this is another one of the reasons why people hate JavaScript about whatever haters now if you want to check for undefined this also kind of sucks because if you check you can use type of it's really handy to check for like if it's a number or if it's a string or whatever if you try and do use type of it will return undefined as a string which is like frustrating because all of a sudden we're dealing with like this information that is in a different type than what it actually is so you can't use type of this inequality checks because you've got this word undefined as a string undeclared variables will also return undefined if you try and type of them now I'm beginning to see why people hate JavaScript and if you so the preferred method would be to use a triple equals to check if something is undefined and not not not in this string by the way even though that doesn't make any sense because that yeah anyway so because if you look for undefined as a string and check it against undefined even though this is what the console spits out it will fail so yes check for undefined with triple equals and the reserved word undefined with null type of null actually returns an object it will say that you have an object this is a bug in JavaScript this is a literal bug in JavaScript that they are not fixing because they have higher priorities and by they I mean me because it's a community like it's all falls on our show all of our shoulders so but you can also use the triple equal with the reserved word null in order to check for no and then finally like this triple equals thing is just it's always a great question but what is the difference between double equals and triple equals and so here's an example foods undefined bar is null and food double equals bar is true yeah yeah that makes sense essentially the what you have when you use double equals is a check for equality and JavaScript sees null and undefined as both sort of having no value and and says that those are equal even though they are not the same type of thing so triple equals is always going to check for equality and type and if anybody here is like done any sort of like recent learning I'm gonna everybody loves audience participation right how many people have been told always use triple equals no matter what you've been lied to been lied to people the reason people tell you that is because they don't think you're smart enough to understand it and use it correctly but you can absolutely use this correctly and if you know what you're doing and you want to use the double equals go ahead and use it and put a little comma above it for the rest of your developers to like not go in and change your PR or be mad at you because you know what you're doing so that's pretty much it I'm gonna I'm gonna skip the event loop because it really deserves its own talk I just had it in there because I thought that yeah nevermind I knew I was not gonna have time for that but just in case so anyway you guys since you're at this talk you were hired hopefully you get a boss just as fun as Kimmy Schmidt boss wherever you go to work and there are a ton more of these up html5 boilerplate I it was a fun exercise for me to just go through these and be like which of these can I not answer quickly cannot answer well but I just want to sort of say at the end of this talk I I've been doing this for about five years and I've am now sort of like the senior guy on my team and everything else but it doesn't really it doesn't really account for a whole lot necessarily that you can answer these questions like super well my encouragement to anybody at this conference who's sort of like me feeling really overwhelmed and really like I just don't know how I'm gonna actually apply this to my application coming the next day I just really encourage you just keep moving forward building whatever it is that you're building just build good software I think a lot of times as developers we focus on the tools that we're using the best way to use those tools the most efficient way which I totally get and it'll totally love to do but we lose sort of focus on like that we're here we're getting paid to deliver badass software and if we just focus on that then the tools we use in the decisions and the learning it's going to come alongside that and happen as well we don't have to like learn all this stuff first and have all these perfect answers or even really know the perfect terminology for what it is that we're doing in order to make awesome software and I am a pretty good example of that because I won't say that I can make software without knowing whatever it is that I'm doing so anyway that's that's the talk the slides are up on my website if you want to have them and then I've got two minutes so I will take questions am i what my brother-in-law is a pilot and I thought that I mean that's admittedly a very douchey picture so I apologize but like the other one that I had was was me inside the head of a dinosaur that was my original picture and yeah anyway I would love to be a pilot because I thought it was I thought it was awesome but other questions yeah right right yeah I mean I think that that is like that's a really key piece is understanding that the question themselves are sort of arbitrary sometimes when you're trying to test and I understand the the desire to use them in order to kind of vet people and but I think that maybe better questions to ask would be like how do you handle a situation where you've you've said that you would meet a sprint deadline and you realize that you're not gonna meet that deadline what do you what do you do in that situation or what do you do when your designer comes to you and you've already had something scoped out and you are already two weeks into a sprint developing something and your designer wants more changes how do you handle that situation like kind of more I think what you can probably dig deep if you come up with sort of clever questions about how a person actually works is hopefully they're gonna use the technical stuff in their answer and that's going to give you the vetting that you need so that would be my hope I think that the thing about the interview questions like that is that yeah I mean it's creating this adversarial situation I just did one recently like a last month and it was with my first initial interview was with two people that were on the dev team not with a hiring manager so I kind of immediately knew of they're weeding me out here and then they had me do a code test and I was like oh man I got this no problem like if they put me up to a code test it'll be no problem and I was like panicky I was like I you know and that's really just not how it doesn't really mimic actual work behavior you'd never be in a situation that you would be under the gun like that so it's not necessarily a good indicator but yeah Ryan was mentioning like a code a code challenge that a prospective employer gave that was was a homework assignment and it was basically they gave you JSON and they gave you you an API endpoint or a blob of JSON and they were like just just make a UI out of this like that could be something really cool as long as it doesn't sort of take so much of the person's time and it wouldn't be worth it for them but yeah yeah that's a great point right right Yeah right totally I think I'm officially out of time but I'd love to continue this conversation with anyone after the session so thanks everybody [Applause]

Channel: freeCodeCamp.org

Views: 36,216

Rating: 4.8888888 out of 5

Keywords: javascript, learn javascript, variables, expressions, javascript interview, javascript tutorial, programming, coding, javascript interview tips, javascript interview questions, fcc talks, nodevember

Id: jh86NGG9jdE

Length: 35min 16sec (2116 seconds)

Published: Tue Aug 14 2018