Presented by WWCode Boulder/Denver Event: Monthly JS Speaker: Alison Quaglia
Alison is a career changer currently working as an Apprentice Software Engineer at Pinterest. Prior to coding, she has 10 years of experience working in various creative industries such as fashion magazines, photo shoots, special events for clients like Showtime and Wu-Tang Clan, brand consulting for small, women-owned natural skincare brands and an ethical Cambodian artisan-made jewelry line, and most recently global product development for Le Labo. She also has a BA in Anthropology from NYU.
Check out our JS Monthly Boulder resource repo for neat info such as our awesome past presentations : https://github.com/wwcodecolorado/monthly-js-boulder
đź‘‹Stay in touch with us https://linktr.ee/wwcodecolorado
___ 💻 WWCode Digital Events: https://www.womenwhocode.com/events​ 🔎 Job Board: https://www.womenwhocode.com/jobs​​​​ 💌 Make a Donation: https://www.womenwhocode.com/donate
Great. Okay. So our speaker for tonight is Alison and Allison will be talking about seven JavaScript concepts to learn for tech interviews. Allison is a career changer currently working as an apprentice software engineer at Pinterest. Prior to coding, she has ten years of experience working in various creative industries, such as fashion magazines, photo shoots, special events for clients like Showtime and Lutein Clan, and consulting for small women own natural skincare brands, and an ethical Cambodian artist, an made jewelry line, and most recently, global product development for Le Lebo. She also has a BA in anthropology from NYU where she focuses on world cultures and primatology. Awesome. Alison, we will hand it over to you. Well, Hello, everyone. Alright, let me share my screen. Alright. Can everyone see this? Okay. All right. Awesome. So Hi, I am Alison. I'm really excited to be here with women who code. I'm a really big fan of the organization women code, especially really helped me when I was preparing for tech interviews and my own job search. I went to a lot of algo prep events and networking as well. So I'm really happy to be here and to try to give back. As you mentioned, I'm currently working at my first developer role at Interest, which has been like a dream company in mine forever. So I'm really happy to be there. I am a career changer from a very non tech background, and I'm also a bootcamp grad, so I completely understand how scary and intimidating tech interviews can be, especially when you're first starting out. But one thing that you'll see is that certain topics and questions will get repeated a lot, especially for entry level developer role. And so these concepts that we're going to talk about today are some of them. This is by no means like an exhaustive list. This is just like an entry point. It might be a refresher for some of you, but for those of you just starting out with JavaScript, these concepts might be brand new, but they are all going to be very beginner friendly, so hopefully something for everyone. Okay. So first up, what is the difference between VAR constant and let this comes up in every single interview. So first up, bar constant. Let are all reserved words in JavaScript that are going to allow you to declare a name variables. So for example, let a equal Hello or something like that before as Six, which was introduced in 2015. Bar was the only and so constant light we're introduced later on. So first Savar can declare a variable in any scope. So this could be global function or block scope like for example, like in an if statement. These variables are hosted, which I'll get into later and initialized with an undefined value. So for this reason you could declare a variable with no value at all. So you see in the example here, are there's nothing there but it won't throw an error. So with VAR, you could also reassign or re declare the value of that variable. So if you have a is equal to Remy. Obviously this is rate totems then you wanted to change at an Gueny. That's totally fine. You can go ahead and change the value. And also you'll note that if you Consolo B above where it's actually written, you are going to get undefined and you're not going to get an error even though it hasn't actually been defined yet. Now let is very similar to bar. You can reassign or re declare the values at any point, but with one caveat, you have to omit the words let for reassignment. So you can see here we have let a which is also not going to throw an error similar to bar. And if you go ahead and change a to Remi or change it to linguini, you have to just submit the words and it won't throw an error. But unlike the variable is only going to be evaluated during execution. So we're going to get an error if the variable is referenced before it's written. So you can see here we have Consolo B and it's going to say reference error cannot access B before initialization, since it's written actually below. And you also cannot declare a global variable using what then we have cost. So cost is a bit different. Cost always needs to be initialized with a value. So if you try to do cost a, you are going to get a syntax error. You also can never change or we declare that value. So once you have Costa equals Remy, if you try to change that to Linguini, your vendor saying that it's already been declared one with this cost is like constant like it's unchanging. You can also declare a variable in any scope, including global, which is similar to bar number two. What is hosting, which is something I mentioned before hosting. There are two different phases in JavaScript. So first you have the compilation phase of JavaScript, which is when Hoisting occurs. The code is being read from the top down, and any variables and function names are sort of hoisted up to the top of zero. And then during the execution phase, if one of those variables or functions are referenced above where it's written, you won't get a re reference error saying that it can't be found. So here we have an example. We have a function called exterminator where we have a variable cockroach a that's equal to I'm alive. So you'll notice if you have an undeclared variable inside of a function so this doesn't have a bar on or let it's automatically going to be hoisted up to the top of scope during that compilation phase, and it's going to be initialized as a global variable was kind of like an imaginary bar, but then we also have within that function of bar cockroach fee that on track. So if we call this exterminator function and then we Consolo Cockroach A. It's going to actually return I'm alive. So the reason for this is because the now global variable of Cockage A was initialized was undefined, is now being initialized with its new value. I'm alive. But if we try to call Consolo Cockroach B, it's going to say that it's not defined because it was declared with bar with in that exterminator function scope, so we're not able to print it outside of the compliance of that function. So of course, this means Cockroach A has escaped the exterminator, and he lives, which if you're a New Yorker like me, you're probably not so psyched about it, but good for him. So a little bit of a bonus, you probably won't get access. But what happens to variables with let or cost? So we see that if you reference a variable like above, where it's actually being declared, the variables of lead and cost aren't going to give you a reference error saying not defined like it can't find it. Instead, it's actually going to say cannot access A or B before initialization. So we know that these variables are being hoisted up somewhere. Otherwise we'd be given some sort of an error that they don't exist. So we know that they're only evaluated during the ten execution, and they're not given that undefined value like it is with bar, so they're being hosted, but they're not giving you any value. So like, where do they go? It's this really strange thing. It's this kind of purgatory called the temporal dead zone. This is a really interesting concept. It's actually one that not all engineers have heard of before, but I actually wrote a more indepth article about this on medium. I totally encourage you to check it out because it just kind of blew my mind when I read about it. Basically the way to get around the temporal dead zone and all of these potential bugs and issues is to make sure you're always declaring your variables at the top of the scope and initializing there. It's also going to improve your readability as well. So everyone wants up next, what is the difference between double equals and triple equals? So triple equals is going to compare both the value and the data type of the two values on either side, and the values have to be exactly the same in order to return to. So this could include capitalization. It could have empty spaces. They have to be exactly the same. Meanwhile, if we have double equals, this is going to compare the actual value, but the data types can be coerced. So, for example, if you have a string of two and you do double equals two, that's actually going to evaluate as true because that data type is coerced, but that value is identical. So those values still have to match in order for it to return to. So here we have some examples. So as you can see with triple equals, it has to be exactly the same. If we do Hello and Hello two different strings with a double equal, even though they are the same word. The data types are already the same, so there's no coercion needed. But the actual value that lowercase in that upper case is not exactly matching. So it will be false same thing with but if we do the double equals, as I mentioned, like 1999, if the string of 19 Ninty nine that will return true, you could also do a little bit of math. If you did three minus one triple equals two. That is going to evaluate to true because you are dealing with integers on both sides with an identical value. So even though they look differently, it'll still be true. Okay, another one0 double equals empty string. So an empty string and a zero are both considered false values. So even though they are totally different, totally different. They both equate to those false values, and that data type can be coerced. So that's actually going to a true. And then one catch is if you try to do triple equals with two different objects, it's always going to return false, even if you have totally identical looking empty objects because objects are stored in different places in memory. So therefore they're never actually going to be considered the same. It will always be false. Next step, what is function binding? This is another very popular one. So function binding when you're using regular functions, so not arrow functions. The this context. So for example, like this to function or this something longs to the object that invoked it. So this could potentially cause a problem. So there are two different ways that you could go around this. You could specifically use bind to attach to a function, or you could, which is a much more popular way just to use an arrow function which was introduced in as six, and that will take care of the issue for you. So here we have an example. We have an object Hamilton which has some properties right? Like he's running out of time and frenemy, which is Aaron Burr. And then we have a greeting function inside which consoles. Pardon me, are you this frenemy, sir, interpolated in there. So if we call set time out with Hamilton greeting and 1000 milliseconds, it's going to come out to pardon me. Are you undefined, sir? And the reason for that us is because set timeout is a web API. So this context actually becomes the window which comes up as undefined. So as I mentioned, we can do Hamilton greeting bind, Hamilton, and that will return part of me. Are you Aaron Burster? Or the more popular ways to just use an arrow function and that will also do the same number. Five. What is closure? So closure is a feature in JavaScript that is in relationship scope. So a nested function you can picture like a nested function inside of an outer function. That nested function is going to have access to the outer function, variable and scope, but it's not the other way around, so you can kind of picture it sort of like a zip file, so the outer can't read what's in the inside. And this feature is really helpful to keep variables sort of safely where they belong and hopefully avoid bug. Here. We have an example. So this function has city San Diego Burgundy sign off. We have a private bar inside this nested from sign off function that is equal to thanks for stopping by and we have a console us classy city. So Burgundy sign off. Since that's enetan access that variable city to to you stay classy San Diego but within that function saying if we try to consulate private bar, which is within that nested function, this is going to cause a reference error, saying private bar is not defined because that same function is unable to read what's inside that nested function or that variable at least number six. So how does set time at work or which data will console out first? I've definitely gotten this one a number of times. So this one we have a function which first and we have four different console logs. Two of them have set time out attached to them. One of them has 1000 milliseconds and one has zero milliseconds. So the answer to this one should be one, four, three, and two. And the reason for this is because when a function encounters set time out, which is the web API that I mentioned. The brother is going to put that callback function aside for later and start the timer provided in milliseconds while the function execution continues. So even though we have zero milliseconds there, it's still going to be put aside. So we're going to have Consolo one and then four, since they don't have any barriers for execution. And then whichever set time it has the callback, which has the shortest delay, which in this case is three, and then the last one will be pushed from the task to the call stack. And then that last one, which is number two with the 1000 milliseconds. And lastly, number seven. What is event bubbling? They also may ask you, what are the three phases of that propagation? But usually it's in the form of what is event bubbling, but it's really helpful if you sort of know everything else that's going on under the hood. So if you picture an event, so let's say you have a very simple web page with a button on it and the user clicks that button that would be considered an event. So there are those three phases. First, there's the event capturing phase, which moves down from the window, the document HL Bobby, give and button. Then you have the event target phase, which is that actual button. Click right there, and then the event bubbling phase, which goes in the opposite direction, back up from the button all the way up to the window. So in that first phase, you can kind of picture the sort of like a waterfall. Right. It occurs when the event moves down the elements from that top window down to the target. And we rarely use event capturing when handling events. So usually when we're setting event handlers, it's for the target phase and the event bubbling phase for a reason need to use to attach an event handler to the capture phase, you would need to explicitly put capture true at the end or just the true as I have here in the example. Then that second phase, event target. This occurs when that event target element is reached, for example, that button. It's not handled separately like the other phases, because both of that capture and bubbling phase, they will trigger that phase automatically since they finish and begin with that target element. So then lastly, we have event bubbling so this you can kind of picture like bubbles rising up from the water goes from that target and then all the way up to the window. So for example, if you had a button nested inside of a Div inside of a form, the handlers would run them an order button, then dive, then form, and this will continue until it gets to the top of the elements all the way up to the window. And most events will bubble up. But there are a few exceptions, like I went too far. Okay. I don't know if I can go back. That works. Okay. Cool. So here's an example of event propagation. Basically, I put this together on code pen and I can link it for everyone after. But basically I set an alert for the event capturing phase, and then for the bubbling, you were capturing the HTML body form dive, and then that P in the middle and then bubbling P dive form body and then HTML. So I'll link that for everyone so you can check it out. Okay. So those are the seven concepts that we're going to go over today if you want to cash them out. And also there are some other ones in here. I put together a fun Hamilton themed JavaScript Fundamental quiz last year. I was in a really big Hamilton phase at the time. I have no regrets. Music is great, but it's super fun if you want to check it out if you want to test your skills, and yeah, and that's pretty much it. So feel free to check out my other articles on the M. I have a lot of beginner friendly JavaScript articles like big O notation, data structures. I also put together an entire compilation of sort of resources that were helpful for my own job and trying to break into the tech industry, especially as a non tech person. So hopefully that will be helpful to some of you and also feel free to reach out to me on Twitter women Code Slack I'm happy to be a resource and answer any questions that I and thank you so much for having me like what? Yeah.