In this weekly series, senior staff author explores front-end and full-stack coding concepts that every developer should have in their toolkit. Tune in every Tuesday for a new tip.
- [Instructor] Sometimes the questions you get during an interview are designed to test not how we would do something, but why we would do it a certain way. It's why sometimes a chef will give a cooking test, asking people to cook something like an egg. So how you answer the question, and how you defend your positions, is more important. Let's take a look at a simple question, and then take a look at how you would solve that problem. And I'll talk about how I would approach it, and why I did what I did.
So here's a simple problem you have, that array with some objects in it, and you want to display this as a list of elements in HTML. It doesn't have to be an unordered list with list items, and I want you to target an ID of my links. So I'm going to give you a few seconds here to just pause this video, and then pull up something like jsbin, and try to solve this simple problem, and then we'll talk about how I solved the problem, and show you the kind of questions that I would ask, about the code that I see, if you turned it in.
So the first thing that I would notice about how I solve this problem, is that I'm using Query Selector, so that is a specific way of choosing dom elements, that is considered a little bit more modern, and I would prefer to see this, over something like Get Element By ID, which is considered to be a little bit older. I would ask, why did you choose Query Selector to make a selection in the dom, or why did you use Get Element by ID.
It's not that I would knock it, but I would want them to know the difference between Query Selector and Get Element by ID, and also perhaps, the also-available Query Selector All, which gives you a list-type component, instead of a unique element like this one. So Query Selector picks the first element that it notices with the ID of links, or the ID of my links here. So that's the first thing that I would notice. How did they make a document selection? And then, obviously, I would want to look at which sort of iterator they picked to solve the problem.
Now, this could get very complicated, and you could approach this by using four loops, you could use this forEach statement, or perhaps you could use something like Map, and that actually is going to tell you a lot about, not just the developer that is solving the problem, but a lot about the company that is asking for how this problem was solved. So if you see something forEach, I would defend this by saying I could have used a four loop here, but I really like forEach, because it's a very simple way of iterating through elements.
I would also note that I'm not using the arrow functions here, so some people might ask, why didn't you use an arrow function to solve this problem. My defense to that is, I tend to write code that to me is clear, and so I prefer to use function statements or the call-back here, over the arrow functions because I think they're a little bit harder to read, but I do understand how to convert something like this, to an arrow function, which what you do is you would get rid of the word function here, and then since we only have one item that we're passing, you can get rid of the parenthesis, and then you would use the arrow functions here.
I don't really love arrow functions when they're not doing something that is useful, and in this case I think the call-back notation is just fine. You may also see something like encapsulating this as a separate function, if I thought I was going to use this over and over. But in this case, I'm just iterating over a series of elements, and then I am just replacing a dom element with whatever I end up with here. So this is not an instance where I would need to create a specialized function, that's why I'm using a callback, it's not something that I'm going to do over and over, and this is just going to be a single sort of instance of modifying a dom element, or I may create a separate function to handle each one of those instances.
Now the other thing that I've done here, is I could have sort of generated some HTML, and perhaps used a push statement to gather all the HTML together, instead I'm showing that I know how to create elements from scratch, and how to manipulate elements by modifying the different parameters. Here I'm modifying the HREF attribute of the element that I've created, and I've set it to the item link, the item being this element.
And then I have used intertext, just because I thought it was more straightforward than creating another element and then inserting it inside the original element. So there's really no wrong way of doing this, you could have done it in a number of different ways, but how you solve this, and how the company views your choices, I think is going to be interesting. So this could actually start a pretty interesting discussion between you and the employer, to understand how you think of coding.
I would probably and ultimately have to discuss my use of spaces instead of tabs, perhaps. That kind of stuff is really not that important, but it comes down to style, and just so you know, I use two spaces in all of my code, not because I love spaces more than tabs, but since I am coding for video examples, four spaces, it makes my code a little bit too wide, so if you look at any of my examples in any of my courses, you'll see that I tend to use two spaces, I prefer tabs that to convert to spaces so I don't annoy people with hitting space bar a bunch of times, that becomes part of the style and I do prefer these curly braces, at the same time, as the function definition.
So some people actually prefer this, which is not my thing, and actually is the way I used to code, before. But now I tend to do this right here. So I think a discussion of coding style is really important in any coding interview, and in this particular iteration problem, which is something that people do all the time in coding, is a really good indicator of how you approach a problem. Here's some more information about the forEach statement, and some courses where you can get more information about this topic, and other things you should study before your next interview.
If you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn, or just about any social media network, like Twitter, or GitHub, @planetoftheweb.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.