REAL Front End Interview Questions - Whiteboard

hey everyone welcome back to the channel if you're new here I'm Peter l-bomb I'm a software engineer I was in Raleigh North Carolina the video today is kind of a part two of the very first video I did in this style where I sat in front of the camera and that video was called real front end interview questions from three companies it is by far my most watched video and I never expected that to be the case but I guess it just turned out that a lot of people tend to search for that kind of thing so I thought I would do a part two so I'm back with ten more real front end interview questions and these are from a stage of an interview which would be more like a whiteboarding session or an in-person just a couple of things I want to know all these questions are either questions that I've been asked or have asked people in past jobs not in my current job and I'll admit that in order to jog my memory I did take some inspiration from 30 seconds of interviews which I will link here and below so you can check out 30 seconds of interviews for more example questions it's super great and very helpful this isn't a typical Silicon Valley interview I've never had an interview like that without whiteboarding algorithms this is more the kind of interview that I've had in a normal tech company in my area and what I imagine are many other areas as well so like I said I've got 10 questions for you the first five are more speaking kind of conversationally oriented and the last five are a little bit more whiteboard type questions where you would be solving an algorithm is it were just writing a function to accomplish a task so our first question is what is an iffy and an iffy is an immediately invoked function expression and the purpose by using one is that and if he creates a closure around the code that you're writing so you're essentially just writing a function which is then called but the benefit of that is that it creates a closure so that you don't have to worry about naming conflicts or naming collisions if you are for example writing a library so you see this really often in common JavaScript libraries where you will write things and if he so that way if someone using that piece of code with some other code that happens to name a variable the same thing you don't have to worry about conflicts question number two what CSS frameworks have you used and are you comfortable rolling your own meaning are you comfortable writing all your own CSS by hand and so this is not so much a right and wrong question but more of an experience you'll type question but I think it is important as long as it's true to say that you're comfortable writing your own CSS and so what this question is really getting at is are you comfortable writing breakpoints on your own are you comfortable kind of coming up with your own UI kit and style guide or are you overly reliant on something like a bootstrap or a material UI our third question is what is the this keyword in JavaScript and what does it bind to the basic definition that you'll find is that this is a property of an execution context which basically just means a function it's typically a reference to the object in which it is used when it's not referencing an object it references the global context basically just means the window of the browser something important to note here that would probably get you bonus points is that arrow functions in es6 and beyond don't have their own this they inherit it from the parent and so that is just something that is important to note and of course makes things like writing classes and react and stuff easier that is a brief answer and if you feel a little bit fuzzy of course it's worth looking this up and doing a little bit more reading the next question is what is the difference between absolute static and relative positioning in CSS these are values of the position property and CSS and basically what they refer to is how the position is computed so relative basically means relative to its normal position so the top bottom left and right properties specify how offset the object or box or whatever it is is from its normal position absolute means the item is taken out of the normal document flow and then attaches to whatever parent is relatively positioned and if there is no parent of the Dom tree that is relatively positioned then it attaches to the window and then static is just the default value so nothing changes our fifth question is what are the three parts of an HTTP request and I was actually asked this when I was giving an interview pretty interesting stuff but the answer is number one pre-flight so there is a period before the request is sent stage two the request has been sent and the status is pending and then stage three the HTTP request comes back and it is either resolved or rejected so that's it so we're going to move on to our more whiteboard style questions so like I said these are all things I've been asked in the past or have asked people so the first one is pretty simple it is add two values so write a function that adds two values so you want to take parameter a parameter B and then add those and return them make sure to return them so that is adding two values and returning the results these are gonna get harder as we go okay question seven is filter an array and take out all of the odd numbers leave only the even ones and so the way that we're going to do this is we're going to filter over an array and we're going to essentially do some modulo division which gives you remainders so if we divide modulo by two for each item in this array we only want to leave the ones in which there is no remainder when you're dividing by two so I'm gonna go ahead and write that out here so for each item modulo division and then we want the remainder to be zero if so it'll return true and then we will be left with an array full of even numbers question eight is return an array of numbers but instead of returning the array you want to for each number return the value plus its index value so similar to what we did last time we're going to map over an array of numbers but you may or may not know that you also can use the index value along with the actual item itself so the first argument in the callback is item the next is its index value so we will just return item + index value for each one and then as soon as we're done we will return our array our next question is flatten a multi-dimensional array and this function involves something called recursion which is when a function calls itself and so the way that we're going to start with this question is we're going to reduce the initial array and reduce is a way of returning a single value from an array by calling a function against each element and this function has an accumulator value and the current value until you're able to work with those so the way that we're going to write this is for each item in the initial array we're going to make a determination is this current value in array if so we're going to call the whole function again and if not we're simply going to return the value and can cat it which is a way of adding it to the accumulator value and then at the end the way you end up doing it you return just a single array with all the values in it so that is flatten a multi-dimensional array our last question is to shuffle a list of integers in an array and this could work with anything this is a slight variation on a question that I was asked in real life but I was asked to implement it kind of in theory and it was a little bit different it had to do with matching people up for a white elephant but this is the closest approximation I thought made sense for this video so the standard algorithm for shuffling an array is called Fisher Yeates someone to take you through an implementation of that right now so the way you write that is that you essentially measure where you are in the array so you start at the end and work your way backwards and for each one you kind of get the current index value based on where you are you generate a random number based on that value so that way the number can't be greater than that value and you're able to ensure that you're working your way from right to left and so then with the random number you essentially assign the current index a temporary value so that you can store it there while you're mutating the original one you then mutate the current index and you give it the random indexes value you then give the random indexes value the temporary store value which was the value of the original index and you continue to move through the array doing this as long as the current index isn't zero which means that there are still numbers left to be assigned and so that's pretty much it that is how you would shuffle an array of integers using Fisher gates so that's it guys that's ten real front-end interview questions from the whiteboard kind of stage of an interview I hope you found these helpful if you did feel free to like and subscribe and I will see you in the next one thanks [Music] [Music]

Channel: Peter Elbaum

Views: 8,064

Rating: 4.9597316 out of 5

Keywords: become a software developer, coding, javascript, javascript 2020, javascript basics, javascript essentials, javascript important parts, learn beginner javascript, learn javascript, learn programming, learn to code, must know javascript, programming, react, s0ftware developer, software development, web development, whiteboard interview tips, javascript interview, front end interview questions, javascript interview questions, real javascript interview questions, frontend interview

Id: W2mwbKWyZyU

Length: 9min 37sec (577 seconds)

Published: Sun May 17 2020