Create a list of URLs from these links

- [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 this 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 JS Bin 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. All right, so here we are with my super simple solution and I'll just show you the HTML, just to show you that I do indeed have an element right here with an ID of links. So you may get some HTML like this, and then I have no CSS. I'm not really interested in that for this project. And in JavaScript, I had this very simple solution. Notice that the output isn't all that exciting. I'm not really worried about the style of this, just the output. And as I mentioned, I don't really need to have an ordered list. I just want to see the structure of how you would approach this problem and which methods you use to solve it. So the first thing that I would notice about how I solve this problem is that I'm using querySelector. 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. So I would ask why did you choose querySelector 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 querySelector and get element by ID. And also perhaps the also available querySelector all which gives you a list type component instead of a unique element like this. So querySelector 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 sort of 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 for loops. You could use this for each statement or perhaps you can 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 like for each, I would defend this by saying, I could have used a for loop here but I really liked for each 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 callback 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 parentheses 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 callback notation is just fine. You may also see something like encapsulating this as a separate function. If I thought it 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 use like a push statement to sort of 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, right the item being this element. And then I have used inner text just because I thought it was more straight forward 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'm coding for video examples for 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 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 like it prefer this, which is not my thing, and actually is the way that 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 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.