He stated, my name is Kevin Langley. I work with HumanMade. At HumanMade, we create WordPress applications for enterprise clients. So one thing I wanted to say just from the start, this is a very long talk, and there probably will not be any time for questions. So if you have any questions that come up, get with me afterwards, and we can go over anything. First, we're going to go over a brief history of JavaScript. So in May of 1995, JavaScript was originally developed under the name of Mocha. It was released in September of 1995 under the name of LiveScript. From there, it was renamed to JavaScript in December, and that was the release of Netscape Navigator 2.0. In 96, Netscape submitted JavaScript to the ECMA International for standardization. And in 97, this resultant in a new language standard known as ECMAScript. ECMAScript is the standard, and JavaScript is the most popular implementation of that standard and also builds on top of it. Other languages that also build on that standard is ActionScript and JScript. But as you can tell, JavaScript is the most popular. We don't have a learned JScript deeply course. ES is short for ECMAScript. Every time you see ES followed by a number, it's referencing an addition of the ECMAScript. So ES1 in 97, ES2 in 98, ES3 in 99. ES4 was actually abandoned. Then we finally got ES5, and this is what everyone is probably familiar with. This is what we had for years and years. It came out in December of 2009. And we didn't have any changes to JavaScript until June 2015 when we finally got ES6. ES7 came in 2016, and ES8 in 2017. Now you're probably wondering why isn't this course called ES8? The reason being ES6 was really where we got the majority of our changes. ES7, ES8, there was only a handful of changes that got added to JavaScript, whereas ES6 was the largest change that we have seen in the language pretty much ever since its release. And ESnext is a term for dynamic references to the next version of ECMAScript coming out. So the TC39 committee is responsible for evolving ECMAScript programming. They go through stages for every single one of their features that they want to implement into JavaScript. It starts with the stage zero of strawman, then the proposal, then the draft, and then the candidate. Without the TC39, we wouldn't be here today. They're the ones that have really pioneered JavaScript to bring it to where it is as modern as it is today and as big as it is because of the changes that they continue to push out in the language. So the first thing we're going to jump into is ES6 modules. So modules allow you to load your code asynchronously, and it provides a layer of abstraction to your code. There's two ways to export from a module. You can have multiple name modules, and you can have single default exports. Here's some examples of these. This is a multiple named export. So let's say we have a function called square. It's just accepting a single value, and we're going to go ahead and square that value. We have another function called add. Again, we're just adding those values. Now, if we export those functions from our bathlib.js and then in our new JavaScript file, we want to use those. How would we use those? Normally, we would just add those. We would somehow include this script. Now, with ES6, we can simply import it. This is probably familiar if you've ever used common JS before ES6 became big. They kind of implemented the same exact syntax for importing modules. So as you can see, we're just importing square and add from mathlib. And then we can console log our square nine and our add four and three, and it works perfectly for us. Another way to do it is single default exports. So with this, you're exporting a single function, and then we can import that function and run it. Very simple. So ES6 tools, there are a ton of tools out there. Mainly transpilers, such as Babel. There are bundlers, such as Webpack, and there are also systems that deviate from that that allow you to use a number of different things. So Babel is one of the JavaScript transpilers that allows you to convert your JavaScript from ES6 into ES5 code. And what this does is it allows it to run in any browser, even older browsers. It gives us the ability to use all the syntactical sugar that ES6 provides us while still having the fallbacks. As I said, Webpack is a bundler. And what it does is it recursively builds a dependency graph for your application, and then selectively includes those areas depending on where you are in the front end of your application. Next, we're going to jump into variable scoping. So everyone's probably familiar with var. You would initialize a variable here, set it to equal to var, and console log it, and you get it. Now, var is function scoped. Now what that means is that if I have a function, it's going to not leak out of that function. But if I have a block, it can leak out of the block. Blocks are specifically the curly brackets that you see. Now, sometimes that comes after an if statement. Sometimes it comes for a loop. But it's not necessary. A block can literally be drawn out at any point if you just create curly brackets. Now, the two new ones that we have are let and const. And these are block scope. Now, as I said, blocks are specifically the curly brackets themselves. So if right here we have this block, and then we create two variables, let or const, and we try to console log those, we're going to get reference errors. Because we're outside of the block that those were actually referenced in. And that really allows us to keep our code encapsulated where we want it to be and not leak where it shouldn't be leaking. Here's an example of blocks. So as you can see, we don't have an if statement here. We don't have a for loop. We don't have anything. It's just we're starting a new block level each time. Now, we start the first one, then the second, then the third. And if we try to access the third variable outside of the third scope, we're going to get a reference error. And the same thing with second and third. And that's with let. But it's exactly the same with const. Now you're probably wondering, what's the difference between let and const? So const variables can only be assigned once. But they are not immutable. And that's a very common misconception in ES6. You can change the properties of a const variable. You can also, if you actually want to change, or if you want to freeze the object to where you cannot change any properties, you can use object.freeze. And if you want to just be able to stop someone from changing the structure of an object, that's where object seal comes in handy. But one thing to keep in mind, as I said, it can only be instantiated once, but it is not immutable. Variable hoisting. So this is where this kind of gets hairy. Hoisting is a JavaScript mechanism where variables and functions get pulled up to the top of their scope before code execution. That means that you can do this with functions and vars. I can run this function before it actually gets to fine, because as it's doing that in runtime, that function is going to be brought up to the top before it even calls it. Same thing over here. What actually happens with vars is right here, if we do a console log foo bar, we're going to get undefined. And that's because when you instantiate a variable with var, what it's actually doing is it's hoisting it up to the top, and it's setting its value and its type equal to undefined. And then finally, when it gets down to the assignment, that's when it's actually assigning it. But in ES6, you can't do that with classes. You can't do that with let variables, and you can't do that with const. They are hoisted, but they're not initialized yet, unlike vars and functions. So if we were to try to run this, we'd get a type error for our class, because it has not been created yet. We get an error that says that foo is used before it was defined. And that's because that's exactly what happens. And it's the same thing with a const variable as well. So that's something that you want to look out for when you're using ES6. Another thing in ES6 is the temporal dead zone in blocks. So this is our block, just a nif statement. And this is where the temporal dead zone starts. So if we create a function here, or a const variable, equal to a function, and we're console logging thing, now where does thing come from? We don't have it yet. That isn't a problem until you try to run that. But if I actually set thing, then our TDZ ends. We're no longer in the temporal dead zone, and now, if we call it, we're not going to get a reference error. But what should I use? There's var, there's const, there's let. When should I use these things? What are their purposes? So the only difference between const and let is that const makes the contract that no rebinding will happen to the variable. I can create a let variable, and then reassign it as many times as I want. If I create a const variable, I cannot reassign it. I can only change properties on that variable. So there's two trains of thought when to use these types of things. Matias Bynand, he's a VA engineer at Google. He suggests to use const by default, only use let if rebinding is needed. And he personally thinks that var shouldn't be used in ES 2015. And that's my personal belief as well. This is still a very opinionated thing that everybody has their own opinions, and that's absolutely fine. Kyle Simpson, the founder at Getify, he says that you should use var for top-level variables. Use let for localized variables in smaller scope. And you should refactor let to const only after some code has been written. And you're reasonably sure that there isn't any variable reassignment going to be happening. Either one of these are totally valid positions. And as we get further into the ECMA standard, and as it gets further solidified in later years, this will probably be more concrete. But as right now, it's kind of up to you on how you want to treat that. So we're going to talk about iterables and looping. When you use var, you actually leak a global variable to the parent scope. Because as I said, var is function scoped. It's not going to be block scoped. So as we're looping through, we have our var i equals 0. As long as i is less than 10, increase i. And we're going to do a set timeout here. And what do you think is actually going to happen here? We're console logging within our set timeout. We're console logging i. We're going to get the number 10 as 10 times. Why is that? That's not what we wanted. It's because what happens is by the time this set timeout runs, and again, this is just an example. Imagine this is an AJAX request or some other long-running process here. By the time it actually runs this console log after the one second, i is always 10. So this isn't helpful at all for anybody. Now, if we use let in a for loop, it allows us to have the variable scope to that block. So here we have let. It's exactly the same code. We just changed var to let. And what's that going to give us? Exactly what we want. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. ES6 also gives us a new way to loop over iterables. So what is an iterable? An iterable is anything that you can loop over. It's an array. It's arguments. It's node lists. Now, there's certain ways to iterate over those objects compared to others. But what this gives us is the availability to do four of the iterable. So we have this constant variable, iterable. It's 10, 20, and 30. And if we do for each constant value of iterable and we console log it, we get 10, 20, 30. Now, this is also handy when you want to loop over something like a query selector. So we go ahead and we do a query selector. We get our node list. And we want to loop over that. Now, you can't just loop over that normally. But in ES6, with the four of loop, you absolutely can. Because it's an array-ish type is what a node list is, very similar to arguments in a JavaScript function. You can also loop over strings, because strings are, again, iterable as well. So we loop over foo, and it gives us each letter individually. Next thing we're going to talk about is arrow functions. And if you've ever worked with CoffeeScript, or I believe TypeScript does some similar stuff, this might look similar. They based a lot of the functionalities of ES6 based on other languages that we're trying to take JavaScript further already. So here we have a traditional function expression, add numbers. And that's going to take in num1 and num2. And that's just going to add the two and return them. Now, what arrow functions give us is a more concise function expression. So as you can see here, we remove the function keyword. And we just do an arrow, start the block, close the block. Looks very similar. But arrow functions give us more than that, too. They also have implicit return. So what is an implicit return? This right here is an explicit return. We're specifically saying we're returning this value plus this value.  And it already knows that as we're finishing the arrow function like this, it is an implicit return. It knows that that's what we're returning. There's a few more examples of arrow functions. You can do things like, I have no arguments in my arrow function. Bam. Just an open, close parentheses, arrow, implicit return. If you have a single argument, you don't need to wrap it inside of a parentheses. You can just have the single argument listed. And if you have multiple, you go ahead and you throw it into parentheses. And now another thing that arrow functions give us is it makes it to where you don't have to do any of this bind or this or that equals this or self equals this. So it picks up this value from its surrounding. So take this example here. We have a function, a person object, and this dot age equals zero, set interval, and we're increasing the age. But right here, this refers to the window. And that's not at all what we want. We want it to refer to the person object. So back in the day, we might do this, var that equals this. And now we can do that plus age, plus plus. And yeah, that works. But it's not ideal. So let's dive in a little bit further. We use an arrow function, and this we're properly referring to the person object now. And we don't have to use any bind, that, or self. When should I use arrow functions, though? It's not always appropriate. Take this example, for instance. We have a button that's equal to our query selector of my button. And then we're adding an event listener for click. And then we're doing this.classlist.toggle. And that looks right, but this is referring to the window because we're not within a scope that tells us what our this is. So if it's going to pick up its this based on its surroundings, there's nothing that tells it what it should be. So of course, it's going to be the window. So for an example like this, it's not even proper to use an arrow function. You would just use a regular function here. That way, the value of this would be your button that you're calling your event on. Another awesome thing that ES6 gives us is default arguments in JavaScript. So here we have a basic function. We're going to calculate the total based on the subtotal, the tax rate, and the shipping charge. So we're just returning subtotal plus shipping plus subtotal times tax. And if we go ahead and rerun that, we get our value. But let's go ahead and add some default into the argument. So this is the old way of doing it. If tax equals equals equals undefined, set the tax. If shipping's undefined, go and set the shipping. But we just added like five, six lines to our function here, and that's not ideal. So this is a little bit better. This is still without using ES6. We're just cleaning it up a little bit. Still better, but not the best. Now here we go. It is, now we're back to the same line length that we had when we had no defaults, but we have our defaults in there. So we know they're always going to be set, even if they're not passed in. But what if I only wanted to pass in the first and the third arguments? Can I just do this? Nope, syntax error. What you're going to want to pass in is undefined. So if you pass in undefined as tax or as shipping, it's going to know, OK, this is undefined. So set it to the default.  If you wanted to actually just leave it off, then that's fine too. If you only passed in 100, the other two would straight default. But if you needed to have it to where it's split in a middle argument somewhere needed to be empty, that's exactly how to define that. The next topic we're going to be discussing is destructuring. So here we have a person object. Kevin Langley, my location is Beverly Hills, Florida. And let's create some variables from that object. So let's create a first, and that's equal to person.first. Let's create a last variable. That's equal to person.last. But with destructuring, we can actually do this. Put it in curly brackets and just say first comma last equals person. And that's going to pull the variables or the properties out of this object that are equal to first and equal to last and set them to those variables. Now we can use those anywhere in our application. That comes in handy a lot. And it also comes in handy with nested properties as well. And you can also rename the variables of a destructured object. So you're not stuck just with the keys that the object gives you. Say I want my variable to actually be fname and lname. But they're going to come from first and from last inside of our object. And same thing here instead of city. A city is the key, but we're going to be naming it location city in our application and location state. And those would be the variable names that we would use throughout the rest of our application as we go on there. So what if I try to destruct your property that doesn't exist yet? So here, an example would be you have a settings object. And we have a color property and a height property. And we're trying to destructure that into the width, height, and color. But we don't have any width property here. So what would that do? That's going to give us an undefined. And that's absolutely fine if that's what you're looking for. But another thing you could do, very similar to the default arguments in a function, you can actually set defaults in your destructuring even. And this cleans up your code so much. So now, if we were to destructure this, width would automatically be equal to 2, because it knows that we haven't passed one in inside of our settings variable. And as you can see, our values have overwritten the defaults here for height and for color. You can destructure arrays as well. And this is nice when you get data coming back from either an API or some other form where it's an array. And it's not really in a clean way where you have the keys and you know what they're linking up to there. But if you know that it's in a specific order, you can go ahead and destructure it. First last website equals details. And that's going to pull in those values exactly like what we would think. So the next topic is we're going to have to dive a little bit in, because spread and rest are amazing and awesome as hell, but can get a little confusing. So before ES6, we would want to run apply to pass in an array of arguments. So let's say we had a function called doSomething. And it takes in an x, y, and z. And we're just console logging. We have a variable here, args. And that's 0, 1, 2. And in order to call this function and pass in these arguments as single arguments here and not a z array we have, normally we'd run apply. But then we have to specify we want null for our this value and our args are going to split up there. And that works. But another way to do it is with the spread operator. So what the spread operator does is almost exactly like what it sounds like. It's going to take this array here and it's going to spread it out to where doSomething is actually 0, 1, and 2. And this is very useful in a number of ways. So you can use a spread operator to combine arrays. Let's say I had two different arrays. And they has one, two, and three, and four, and five. In our array one we could push the spread of array two. And what that does is it adds all the items from array two to our array. And we can also do the same thing. We can unshift it and add those items to the beginning of the array. Or we can also combine arrays at any point that we want to. So let's say our array one is actually equal to two and three, and array two is equal to one. And then we put in the array one. And we spread that out. That is what our value is going to be one, two, three, four, five. It specifically spreads out those values at any point that you want to. And that allows you to just have a ton of control over your arrays. If you need to insert things at a certain area after something else, you just have full control over whatever you want to do with those without having to loop over them, check values here and there. You can also use a spread operator to create a copy of an array. So we know that if we just took array one equals array two, it's going to keep a reference to that. It's not just creating a new array there. So what we can do is we can actually spread array one into a new array. And now, if we push four onto our array two, we have two different arrays. They're not keeping a reference to each other. And you're not going to run into problems where you need a copy and you need to adjust that one copy, but keep the reference to the original. You can also use a spread operator with destructuring, which is amazing. So here's an example. We have players, Kevin, Bobby, Nicole, Naomi, Jim, Sherry. So let's say we want to get, this is the order that they placed. And most of the time, you care mostly about the first, second, and third place. So you can place those places. And the rest of them are just going to go into unplaced. So what that does is that's going to make Kevin first, Bobby second, Nicole third. And unplaced is going to be all the rest of them there. And you can use it with destructuring objects as well. So here, we have x, y, and then just put the rest into z. And as you can see, we have one for x, two for y, and z is a to a is three, and b is four. And you can use a spread operator to expand a node list. So if I just try to loop over document.query selector all, it's not going to let us loop over it because it's not an array. It is an array-like item, but it is not an actual array. But if we throw that into a spread operator and throw it into an array here, now, I didn't have an example here because I don't have any divs on the page, but it would list all of your divs. So the other operator here is the rest operator. And the rest operator is almost the exact opposite. The rest operator allows us to more easily handle a variable number of function parameters. So let's say we have a function do math, and we're taking in an operator, and we're taking in a set of numbers. As you can see, it can be any length. We could add 4, 5, 6, 7, 8, 9, 10, all the way up, whatever numbers that we want to, and no matter what, the second variable will always be an array of all the other variables passed into this function. And that makes it really easy because if you have a number of arguments, but you don't know exactly how many you're going to need, or you don't know ahead of time, you don't want to plan that ahead of time, you want it to be able to be variable, this allows it to be really clean code, but still full flexibility there. So there's some new enhancements with strings as well in ES6, specifically template literals. So we've all seen this. You go ahead and you close off your quote, dollar sign, variable dollar, I'm sorry, not dollar sign, addition sign, and then start your quotes again. And yeah, that works, but am I the only one that's ever forgotten a single quote or something like that, and realize, oh man, it's not going to work, OK. Well, now we have template literals. And what we're using here, that's a back tick. It is not a quote, it's a back tick. And within anything that's back ticked, you can do a dollar sign, curly bracket, and then any expression, it doesn't have to be just variables here. You could literally use any expression in JavaScript. So as an example, you can evaluate any expression. We have a price, a tax, and then our total is equal to a string that says the total price is, and then we're actually evaluating this in our string. And it's going to evaluate that on the fly and tell us that our price is this. Now, obviously, you'd want to shorten that down to two digits. This is a quick example. And it also allows you to very easily create multi-line shrinks. So normally, if we wanted to text across two lines, let's throw a slash in in there, and that's fun. But with ES6, you literally just put a new line in there, and you're done. You don't have to think of anything else. It maintains your multi-lines perfectly with no problem. So we also have new functions with strings. So we can check if something starts with. And we can also check if it starts with based on an index. So here, we're saying, does this string start with deeply starting at index 17? Index 17? Deeply. Yes, it does. There's also ends with. Exactly the same. So ends with, if we don't pass anything other than the string, it's just looking for the last bit there. If you pass in with an index, it's going to start. Starting from the right, it's going to go back 16. And then that's where it ends. We also have includes. And we can just ask, does this string include JavaScript? But one thing to keep in mind is that this is case-sensitive. So our string contains a capital S in JavaScript, but this doesn't. So if we're looking for this, it's going to tell us that it's false because JavaScript with the lowercase s does not exist in there. And we also have repeat. And you can just string repeat. If you do a 2.5, it's going to convert that to an int. If you try to do a negative number, it's going to tell you that's a range error if you fail there. And the next topic is enhanced object literals. So let's say we have some variables here. First, last, and age. And we want to assign those variables to properties of an object. So we create an object person. And we say first is first. Last is last. Age is age. This gets repetitive, especially if you have a really big object with a number of properties. Let's shorten that. Bam. We got first, last, age. You don't even need the keys. But let's say you wanted to rename them. You could. Actually, this part should not say. The example here I was trying to explain was that this could be like this. And you could have two that actually are named keys, and one that is an object literal there. So I'll fix that slide. Sorry about that. And you also can use a shorter syntax for method definitions on object initializers. So this is an object. And we would normally start our functions here. Do a comma, new functions. But now, we don't even need that function keyword. We literally just get rid of the colon as well as the function word. And now we can just start it off with parentheses and then our curly brackets. And it's really just nice shorter syntax that just makes it cleaner to work with. Cleaner to read day in, day in, day out. We can also define keys that evaluate on runtime inside of object literals. So we can create an object. And actually, in our key for that object, for each property, we're evaluating at runtime. And as you can see, it's going to give us foo1 is equal to 1. And then as it increases it, foo2. But again, this is kind of, let's clean that up a little bit. Throw some ES6 syntax in there, looking a little better. There's also some new ray features. So we have a ray from. Let's say we have a variable called headers. And it's equal to query selector for all h1s in our application. And we're going to go ahead and get the titles by mapping all those headers and just getting the text content. Now, as you can see, we're using arrow function here, single argument. So we don't even have to have the quotes around it. And we're using the implicit return here for the text content. And that's going to give us a list of all of our h1s text contents. But wait a minute. Heders.map is not a function. And why is that? Because as I said earlier, document, query selector, all. That's going to return a node list, which, again, is array-like, but it is not an array. It has some of the properties of an array, but the prototypal inheritance is not the same. There's a ton of functions, such as map, that is not going to be on their map, reduce, filter, a ton of them. But now, if we can go ahead and we can do it with the spread operator, as I showed earlier. But that's nice, but it's not the easiest to read. So the new feature is array from. And that just really takes something that is an iterable that is not an actual array, but it is array-like and turns it into an actual array. It gives it all the same properties of an array. And you're not actually mucking up the prototype. It's actually totally clean there. You're just transforming it into a new array. And now you have Heders array and loop through that as you need to. So let's clean that up a little bit. We can actually just put this all in one line. So instead of having to do our map on a second line, we can actually put in, as the second parameter of array from, is a map. So we have our call back here, h1, and then going in and passing back the text content. Cleans it up a little bit, but can we do more? Yes, we can. So we just go ahead and throw it all into one single thing, but we could even make this shorter. Implicit returns. Did I even do it? Looks like I have an extra slide here. Yes? Which one? Right here? One more? It will not. It does not retain a reference. It is just, yeah, yeah. It's essentially creating an array from this array-like object, but it's really just allowing you to access those values. And really, once you get titles, all it's going to be is an array of all the content of those h1s. Exactly, not a reference. Absolutely. So here's a very simple, breaks it down a lot. This could be brought even smaller by bringing this document query selector all instead of headers here. The next feature is array of. So array of is very simple. It essentially just takes in values and creates an array of these values. It would be the same as we could take array of and just change that to just a square bracket and a square bracket. And it would literally be the same array. Another new feature of arrays is find. So we have our variable posts. And let's say this is a very simplified version because there's not a whole lot of room on the screen. So we have an ID and we have a title. And let's say we want to somehow get this object out of this array. So we can't do post.to because there's no key here for our array. We can't do that because, again, there's no key. What we can do is we can do post.find. And what find is going to do is it takes in a function that can go ahead and you return true or false based on whether or not the one that you're evaluating is the one that you're looking for. So it's going to loop over every single post and give us post. And then with that, we're going to check the ID and see if it's equal to two. And then assign that to our post variable there. And that gives us learn JavaScript deeply. Filter, you're actually, correct me if I'm wrong, you would be modifying the array. Here we're not modifying the array of posts. We're specifically finding that. Whereas filter, it's actually going to take your array and you're going to say, OK, post is now equal to whatever this comes back at. So if it comes back as number two, now you're only going to have a reference to the second one and not the entire array itself. And it also has find index, which all we changed here was literally change find to find index. And we're still doing the exact same thing.  The next topic is promises. Oh, this one is a little hard because I will say this is the longest one of my examples. So I needed to create the code space to be huge. And it looks like it's getting cut off a little bit over here. So just bear with me. So we have a post promise. And we're just fetching. Fetch is very similar to dollar sign get JSON, dollar sign Ajax, but it's built in into the browser itself. You don't have to have any type of library for this at all. It's already built in. So we're just going to fetch the JSON API of WordCamp Miami. And we're going to console log that. What's that going to give us? We're expecting all the posts. But it's going to tell us, no, this is a promise. And it's still pending. And now value is still undefined. So what do we need to do with that? Let's bring it back to just the call here. And we're going to add on postspromise.then. So essentially, then is almost like a callback on a click method or something like that. You essentially say, OK, once this completes this fetch, we want to then do this. And it's going to take in the data. We're going to console log the data. And what does that give us? That gives us the response object. So we're on the right track. But we're not there just yet. So it tells us the type, URL, redirection status. There's headers in there. There's the body in there. But it's not really discernible yet. JavaScript, if your application doesn't know what type of data you're really trying to get back yet, it just has this data. So we're going to tell it, OK, run the .json method on that response body. And that is specific to the response object in JavaScript. And we're going to actually chain it then onto that as well, because what this is going to return us is another promise. So then we're going to do another one. And pass in data, which is going to be the data that's coming back from this data.json. And we're going to console log that finally. And now we actually get our posts. Obviously, there's a lot more data to a post, but this is, for example, purposes. There's not much room on the screen. We can clean that up a little bit by dropping each of our then onto another line. And that's exactly the same as it was before. It really just makes it cleaner and easier to read. But if we were to actually just change this, say we took out the A in camp, and now we're getting 404s, because that URL doesn't exist, it's going to give us an error. And it doesn't know how to actually catch that error. So what we need to add is a dot catch. After all of our dot thens, we add a dot catch. And that's going to catch an error. And we're just going to do a console.error on that error. So if we change this to 2019. They're not planning for 2019 yet. We're still having this one. Failed the fetch. OK, that makes sense. And since we have the catch, it's actually going to catch it. If we didn't have this, it would say that it's an uncaught error in the promise. So let's take a look at building our own promises. So promise is just an object that takes in a resolve. It has a resolve and a reject method.  And then eventually, you will either resolve your promise and pass the data back, or you will reject your promise. So this is very simple. You can just call resolve immediately. And it will resolve immediately. If you reject it immediately, it will reject it immediately. And what that means is, back here, if we reject, that's also where it's going to come to the catch. Then only happens if it does a resolve. So then only runs if it hits resolve. Catch only runs if it hits reject. So let's say we resolve it with just a string here. And we're doing p.then, you can't see the p, p.then data console log data. So that's actually going to give us our value back there. If we reject with an error object here, and we're not catching anything, we're just using the then. It's going to say uncaught in promise, error, uh-oh. So then we add our dot catch. Please remember that there is a p here. You can't see it because of the screen. And we are catching our error and console error in that. And now you're not getting that uncaught in promise. It is catching the error, and it's not going to stop your execution. Next topic is classes. So here we have an animal class. There's two different ways to declare classes. You can do class declaration or class expression. Class declaration is literally just class, animal, and then curly bracket, curly bracket. A class expression is you're saying const animal equals like class, and then curly brackets. It's just a little different syntax, no difference there in what it does. It's just kind of up to you on how you want to do that. So let's say we have a class called animal. And we're going to add a constructor here that takes in a name. And we're going to set that to this dot name equals the name that's being passed in. And we're going to have a method on here called speak. And speak is just going to console log. This name makes a noise. Because we don't know what type of animal this is. It just makes a noise right now. Let's say we have a dog that extends animal. And I'll tell you, this really came in handy when I used to be a web developer out of that tech office. So we have a dog that extends animal. And in our speak method here, we're going to console log this dot name, barks, because that's what dogs do. So now we create a puppy called spot and spot barks. And as you can see, we don't have a constructor here because it's going to inherit the constructor of our parent class. But let's say, what if we wanted to have another option in our constructor? What if the dog actually accepted name and the breed? Does this work? No, this is going to fail because we're running the constructor, but we're not calling the parent constructor at all. So you've got to make sure that you call the super and pass in the same arguments that it's expecting for the parent class there. And now we could even check dog. We could say, OK, what type of breed is spot? And we'll be able to see the breed. But if an animal was instantiated, they wouldn't have a breed because they're just an animal. And the next topic is async and await. And this is actually the last topic of the talk. So async and await allow us to, when JavaScript's running and you run a function and directly after that function, you're having it do something else, it doesn't stop and finish this first one before it goes on to the next one. It's just going to keep chomping through as it goes. So if you actually wanted to wait for some data or anything like that, you have to explicitly do that. So here we have a function called resolve after time. I wish there was a way to scoot that over some. So essentially, all it is is taking in a variable time. And we're returning a new promise. And we're going to resolve it with set time out according to the time that's passed in. And that's where we're going to resolve it, resolved after time milliseconds. Now, if we do a console log, start resolve after. And then we do a result equals resolve after 500 milliseconds. And then we do a console log of our result there. And then we console log ending resolve after. What we're going to get is we're going to get starting resolve after, or starting resolve after. And the promise is pending. That's what the result is there. And then we're going to get ending resolve after. That's not what we want. We want our value to come back here. So what do we do? Now, we can add async and we can add a wait here. And what that does is it's telling our function here that this is an asynchronous function. And when we're calling that asynchronous function, we're going to await for the value. So before it goes on to the next line, before it console logs that result, we want it to await when resolve after finishes, and then assign it, and then console log it. But wait. Await is only valid in an async function. It's not valid at the top level scope. As you see, this is not, and it's probably easier to see if you can see the whole screen, but this is not within its own function here. This is just top level code with nothing above it. And then there's just one function here. So what we would have to do is we would have to wrap this. This is async function, async call. And this function is the awaited function, or is the just the regular function. So this is our async function. We're going to start the asynchronous call. Then we're going to await our resolve after, get the result, and as you can see, start async call, resolve after 500 milliseconds. You can even see the difference in the time there, the 500 milliseconds that have passed, and then ending async call afterwards. So it's not hitting this one before the value actually comes back to us. We have the value back to us now. Before we actually move on from this line, we already have the value. And you can await as many function calls as you want to. I can await resolve after 500. Await resolve after 5,000. So as you can see, it is waiting five seconds there. It's waiting a half a second there. And it's resolving in the correct order here. So while this talk has been long, there's a number of things that we have not covered here today. There's things in ES6 that we have not even touched on, generators, symbols, proxies, sets and weak sets, maps and weak maps, and even more that's still in review by the TC39 right now. And honestly, it is impossible to include everything that's in here because of the fact that it is ever changing. JavaScript is going to be continuing to change for years to come. And we need to make sure that we stay up to date as well as we can. Most of these functions here or most of these features here that we have not gone over, I will admit are features that I have barely touched myself. So I find that every feature that I did discuss is the bulk of what you're going to need out of ES6 in order to learn the later things today and just continue on with your JavaScript knowledge. Now what I would recommend, if you are interested in learning more about ES6, I would recommend Westboss's ES6 for everyone course. Unfortunately, he just had a sale that ended where it was like $40, $50 off of the normal price. But this course right here is incredible. This is the course that I took in order to get caught up today on ES6. And it is pretty much the only course I took on ES6 because it's incredible. It's an amazingly well done course with a ton of examples, a ton of real world code examples that are not the foobar-baz stuff that some of the slides I have had been. Yeah, continue on with that. He also has a React for Beginners course, as well as a number of other courses. And I would highly recommend that. Thank you for your time.


Hello? Okay, good morning everyone. Sorry about that. So I think we finished up here last time. So let's, somewhere around here. So let's just start here. Again, remember alkenes are compounds that contain at least one double bond. Here's some examples of some alkenes. Hopefully everybody can see the alkenes, right? The double bond. So you guys see the double bonds in these compounds? So if I were to give you one of these compounds, you were to need to say this is an alkene point for the double bond or whatever. Okay, so let's talk about geometric isomerization or geometric isomerism and alkenes. I think we started this maybe last time. We can do it fairly quickly today again. So geometric isomerization is when different compounds have the same molecular formula and connectivity. This term connectivity, remember, refers to the way the atoms are connected within the structure. So let's look at these two molecules, compare them to each other. So if we start our counting, if we wanted to count carbons, for example, we started our counting at the left hand side here. We would notice we'd have the methyl group, which would be one, then the double bond carbon, which would be two, the other double bond carbon, which would be three, and the last methyl group, which would be four. Okay, so does everybody see that I just counted the carbons in the carbon chain there? So notice if we did that same thing, one, two, three, four, over here, all of the atoms would be in the same positions, except they're arranged spatially different. By the same positions, I say, well, if I follow the bond lines, I can go from one to two, then from two to three, three to four. I can do that one to two, two to three, three to four. But of course, we see that the carbon or the methyl group at position one has switched in a spatial arrangement with the hydrogen atom here at the same place in the double bond. So does everybody see what I'm talking about there? Okay, so what we say is the connectivity of these two molecules is the same. They're connected the same way. Does that make sense? Hopefully that makes sense. They're connected to the same atoms. They're connected to the same atoms. They're just arranged spatially differently. And if we look at an alkene, so put together this molecule, or at least the one on the right there. Okay, so hopefully everybody can see that that's that molecule, that I've drawn on the board, okay? Notice that when I try to turn around the single bond, it's able to turn quite freely. Do you guys see that? Okay, that's able to turn fairly nicely. But when I try to do that around the double bond, what do you think happens? The not easy at all. In fact, it doesn't do it, okay? Why is that? It's because there's these two bonds holding this thing together, okay? Of course, if I were to break one of those bonds, specifically the pi bond, I could rotate it and make the other geometrical isomer. Do you guys see that? So that's what's happening to these two compounds. The reason why they're not the same compound is because they have that double bond in them, okay? So it causes around single bonds, we have this phenomena that you just witnessed, right? Well, we call free rotation. You can rotate around a single bond as much as you want. And in fact, the molecules do. So you can rotate around like that and you have the same molecule, no matter where you're rotating. That's just like me going with my hand, right? Like that, of course I'm the same person if I do this or if I do this, okay? Around a double bond, there is no free rotation. You can't do that. So that means that when the compound is in this form, it's going to be totally different compound than the compound that's here, okay? Even though they have the same molecular formula and the atoms are connected in the same ways, okay? So we call this phenomena geometric isomerization or these are geometric or isomers of each other, okay? When they're on the same side, we call that cis or z, okay? So you can remember it because of this like common thing that people say, z is the same side, okay? So you'll remember z is the same side, right? So since the things are on the same side, it's z. Okay, the other one is called trans or e, okay? So I want you to know all these names for these things. So when I've got the two big groups of the double bond on opposite sides like that, it's called trans. If I got the two big groups on the same side, it's called cis, okay? Does that make sense? So we're going to look at a survey of a few, see how it works. Oh yeah, that's awesome. It's my new eraser, okay? So there you go. There it is written out. The cis isomers have the two big groups on the same side of the double bond. The trans have the two big groups on the opposite side. So notice that when we look at the physical properties of these two molecules, I know it's probably hard to see from back there, but if you look at this table, you can see that you actually have different physical properties. So the melting point is quite significantly different of these two molecules by about 35 degrees Celsius. The boiling point is different about three degrees Celsius and the density is different. So this hopefully proves to you that these are two different compounds, okay? And they can't be changed into each other without a chemical reaction. So here's some more geometric isomers. What I'd like you to do is help me out and figure if we can call these easy trans or cis, okay? So what about this one? Is that going to be cis or trans? Cis, why is that? Because the two big groups are on the same side, right? What about E or Z? What will we call that? Z, okay? So we all cool with that? So notice this compound is a geometric isomer of this compound, do you see that? Okay, so you're going to have to, when I give you those things, you're going to have to recognize that value, okay? Or if I could say draw the two geometric isomers of this compound, okay? Notice here, those are geometric isomers of each other. Do you guys see that? Okay, so which one is this? Or how about this? Which one's the E geometric isomer? The one on the right. What about the trans geometric isomer? The one on the right, okay? So of course the Z or cis would be the one on the left. And what about this compound? Can you tell which one's the bigger group? Where's the double bond? So the double bond is right there, right? That's a cis, right? Cis, okay? And it's geometric isomer is right there. Okay, so these are fairly simple alkenes, right? You can imagine that these molecules can get much bigger. Let's see if I have a, see look at this alkene, how big that alkene is, right? It's got one, two, three alkenes in it. We call that a triene when it's got more than one alkene in it. Look at this one, it's got, you know it's pretty big molecule of alkene in it. This has two alkenes in it, do you see? So what about this one? When we talk about the double bonds, right? We've got two double bonds here. So we're gonna have to say one of those double bonds is this and the other one is this, right? So if I asked you, this double bond here, is that gonna be a cis or trans double bond? Cis, what about this one here? How would we figure that out? How would we figure that out? But what about this one here, right? So this is groups two for this double bond. So let's look over here, right? So there's that compound. Let's figure out how we would mention or how would we designate these as cis or trans. What about this one here? Is this cis or trans? Why do you say that? What's the rule? What's the rule? What is the rule? What do we say was the rule? The two big groups, right? What are we talking about? Big groups are, so you're referring to the bromine and the hydrogen being the big groups or the two chlorines being the big, so how did you decide that the chlorine was bigger than, no, bigger doesn't mean more, right? That's not the same thing, right? Like, how would we decide what's bigger? So you just decided, oh, it must be the chlorines because they're the same thing, right? That's what you've noticed, okay? That's not the way you do it. I said the bigger groups, and so that's the way you do it. Don't make up your own rules, okay? So if we look, how do we decide what's bigger? Well, we've got this huge table here that we've been looking at for the entire semester telling us which atoms are bigger than which other atoms. So you're gonna have to reference the periodic table. So if we look here, are we gonna ask ourselves, well, which one's bigger, chlorine or hydrogen? Well, we look, hydrogen's atomic mass is one, right? Chlorine's atomic mass is 35, so clearly chlorine is much bigger than hydrogen, okay? So we're cool there, so we'll say that. Now we gotta compare the other side, right? Bromine and chlorine, which one's bigger, right? It's not chlorine, right? Because when we look at the periodic table, we can see that chlorine has an atomic mass of 35.45 or an average atomic mass of 35.45 and bromine has an average atomic mass of about 80, right? So clearly, bromine is bigger, okay? So it's not just saying like the two same things are on opposite sides, you gotta look for the bigger of the two around the double bond. So in this case, it's not a trans double bond, right? It's a cis double bond because the bromine is bigger than the chlorine, okay? So it's kind of a trick, right? So you gotta watch out. So now we're going to do these cyclic structures, okay? These are much more difficult to figure out or not much more difficult, but a little bit more difficult. And I'm going to show you how to do it. Right now. So, let's do that bottom one. Well, let's look at this first. Okay, so notice this has two alkenes in it. It's got one there and one there. Do you guys see that? The two alkenes? So if I were to ask you, let's look at this bottom alkene first. Is that a cis or trans alkene? Can you see it? Here, I'll draw it up on the board. So the bottom part, well, the whole thing is like this. So that's what it looks like. So we're looking at this double bond here. So what do you gotta do first to decide if it's cis or trans? So what did we do on this one up here? We looked at one side of the thing and then we looked at the other side of the thing, right? Okay, so let's do that. What is on this side of the double bond? So how many of them? Two, right? How do you know that there's only two hydrogens on that side of the double bond? Hydrogen can only make one bond, but more specifically, what can carbon do? Carbon can only make four bonds, okay? So since this carbon already has how many bonds on it? Two bonds, it needs to make two more bonds, right? And remember, if those two bonds aren't shown, it's implied that it's hydrogen that's making those bonds, okay? So what's bigger, hydrogen or hydrogen? What's bigger? Which one is bigger, hydrogen or hydrogen? Neither one of them is bigger, right? Okay, so if neither one of them is bigger, can we call this cis or trans? Can we call it cis or trans? No, right? Why? Because we have to have things that are different, okay? So if they're not different, then it's not cis or trans, okay? In fact, does anybody remember what we call this type of an alkene? Something that you should remember from the notes previously. A terminal alkene, yeah, this is a terminal alkene, okay? So you guys gotta recognize that stuff, okay? So is this a terminal alkene up here? Is it a terminal? What does it mean terminal? But just not in alkene speak, what does it mean at the terminal position of anything? It's the end, right? Does the terminal mean it's in the middle of something? No, okay? So is this double bond in the middle of something? Yeah, so it's not a terminal double bond, right? So remember, the terminus is always the end, okay? So when we're looking at our carbon chain, no matter where we start, bam, we get to the end here, right? So that's the terminus, okay? So we say that's a terminal double bond. In fact, what kind of double bond is this double bond here? What is it, well, what is the internal double bond, right? Because it's inside of the carbon chain, okay? So you guys gotta remember that nomenclature. Now we gotta ask ourselves, okay, is this an E or Z double bond? Let's try that, or a cis or trans, okay? So on this side, it should be much easier to figure out what's bigger than on this side, I'll grant you, okay? So we've gotta go, well, what's missing on this side? What are we not showing here? The hydrogen, okay? So let's write that in just so we can figure out our double bond, okay? So what's bigger, what's here, what's this thing here? That's a carbon, okay? So the way we need to do this is just like we did it here, except there's no other atoms connecting to these ones, okay? So we gotta watch out what we do. So when we come from here, we gotta say which is bigger? Hydrogen or carbon, okay? Not hydrogen and all of this other stuff, okay? So it's not all of this stuff, it's just that atom there, okay? That's all we're asking ourselves. Which one's bigger, hydrogen or carbon? So which one is bigger, hydrogen or carbon? Carbon's bigger, okay? Okay, so we're cool there. Now we come over to the other side of the double bond. What's this atom here? Carbon, yeah, carbon, thank you, right? Because what did we say when you have, how many times did we say that last time? If there's nothing there, it's carbon or it's a methyl group specifically. Again, I can't remember how many times we said that last time, okay? So let's try this one more time. If it's at the end of a line, what's there? Carbon, thank you, tell me one more time. End of a line, what's here? Carbon, okay, we're all cool with that now, right? It's not hydrogen, let's just say it one more time. It's at the end of a line, it's not hydrogen, okay? So I think I said it just as many times as I said it last time. So hopefully you guys remember, okay? So what's bigger then, carbon or what's there? Carbon, right, that's an oxygen, right? If that were an oxygen, I would put an O there, right? Okay, so let's try this one more time, okay? What's that thing? Carbon, what's that thing? Carbon, so what's bigger, carbon or carbon? They're the same, okay? So what do we have to do now? Okay, well we have to go to the very next atom, okay? So what's the next atom up here? Everybody? The next one from the carbon. So if I were to make a bond to this atom, it would be to what? Hydrogen, right? How many hydrogens are there? Three hydrogens, right? Okay, so I'm not gonna put the other two, okay? They're implied, okay? So let's ask ourselves now. So that's hydrogen, hydrogen and hydrogen. Hydrogen's the biggest out of the, or they're all the same, right? They're all the same. So we can pick whichever hydrogen. So you wanna pick the biggest of those next atoms, okay? Now we ask ourselves, well what is this carbon bonded to? Okay, so what is it bonded to? Oxygen, how many, so how many bonds, okay does this carbon have? Four, right? It's got one to the carbon we're interested in and then three more, okay? What are those three bonds bonding to? Let's ask that question. Carbon, oxygen and oxygen again, okay? So I want you to think of the double bond as doing it twice, okay? What's bigger, carbon or oxygen? Oxygen's bigger, okay? So now what are we doing really? We're comparing what's bigger, oxygen or hydrogen, okay? Oxygen is bigger than hydrogen. So that means that this is higher in priority than this is, okay? So we got that now, right? So what double bond is this, cis or trans? Cis, double bond, okay? So it's just stepwise, you just see the next atom, next atom, next atom, okay? So don't think it's more difficult than that. The only problem is you gotta remember what these structures are representing. Just like if I were to write words up here in English, right, and you didn't understand what the letters meant, you couldn't understand what the words meant, okay? So we gotta remember all of our rules that we're putting together these molecules, these structures about, okay? So I'll let you guys try this one on your own. Tell me what is that double bond, cis or trans, okay? So try that one on your own, see if you can figure that. Okay, let's jump to the next type of functional group. Very similar to alkenes, it's called alkynes. So an alkyne is a compound containing at least one triple bond, okay? So remember that if we have a pi bond in our compound, which a triple bond has how many pi bonds in it? Two pi bonds, right? So an alkyne, it has, does it have a pi bond in it then? An alkyne has a triple bond in it? Yeah, it must have a pi bond, right? So if we say, if it has a pi bond, it's unsaturated, therefore all alkynes are unsaturated, okay? Acetylene here, that's the simplest alkyne. Notice the bond length, you can go back through the notes and look at the bond length of the alkyne, alkyne, and we'll talk about alkynes in a second. And you'll notice that single bond is longer than a double bond, which is longer than a triple bond. It's another good thing to know. Okay, so remember the general structure that we did for an alkyne, or an alkyne like I said, is very similar for an alkyne, except for because the carbon's making a carbon-carbon triple bond, it can only make one more bond, right? So we've got similar terms with the alkyne nomenclature as we did with the alkyne nomenclature, okay? So if we got an alkyne at the end of a chain, it's called a terminal alkyne, just like the alkyne at the end of the chain was known as the terminal alkyne, okay? If we've got an alkyne that's in the middle of the carbon chain, we call it an internal alkyne, okay? Does this make sense? So the hydrogen stops the carbon chain, right? Because can we stick another carbon to that carbon there? Not on, right? We can't do that. Why can't we do that? Because carbon can only make four bonds, okay? That's it, again, if anybody puts more than four bonds to carbon on any one of their structures, it will be automatically wrong, okay? The thing is, I am an organic chemist and the first rule you learn when you get into organic chemistry is carbon can only have four bonds, okay? It's like what's known as the cardinal rule of organic chemistry, if you will, okay? So if you break that rule, you are doing an injustice to everybody who has ever thought about organic chemistry, okay? So make sure you don't do this, okay? Carbon only has four bonds. That's all it can make. Okay, so are we cool with these terms? Terminal, internal. So, here's some alkynes. Let's try to figure out whether these are terminal or internal alkynes. What about this one here? Is that terminal or internal? Internal, right? How do you figure that out? Yeah, because it's, well, it's in the middle of the carbon chain. That's what you wanna think of it like, okay? What about this one? Is that terminal or internal? Terminal, right? How'd you figure that out? Yeah, there's a hydrogen there, right? It's at the end of the carbon chain, okay? If you haven't figured out, when we have these ch-ch-ch-ch-ch-ch of carbons, we call that a carbon chain, okay? So what about this one here? Terminal or internal? Terminal, right? How do we figure that out? Because it's CH there. So notice, you can draw your structures quite differently, right? I can draw my H sticking to my C like that, or I can draw it like that with a bond to it, okay? Or I could draw it like that, right? Is that a terminal or internal? Terminal, how'd you figure that out? Because what's bonded to this carbon here? Hydrogen, what about this one? Terminal or internal? Terminal, so notice here, this is the way you can draw a terminal, this is the way you can draw a terminal, this is the way you can draw a terminal. They all mean the same thing, okay? They're not all the same structure, right? Except for that alkene portion. What about these three? What about this one? Is that a terminal or internal? Internal, right? What's this here? Is that a hydrogen? That's a carbon, right? Make sure that's a carbon, okay? So notice, you can draw it like that, okay? That's an internal one. Clearly, hopefully everybody would say that's an internal one. What about that one? Internal as well, right? And then this one? Internal, right? I know, it's pretty bad, right? Let's go to the next slide. Okay, that's all you need to know about alkynes, okay? Now let's talk about alkanes, okay? So since we talked about more complex structures, now we're going back to the most simple structure so you can think about what's going on here. So an alkane or another more classical term for this is a paraffin, okay? So if you ever heard of paraffin oil, it's an oil of alkanes. So alkanes are hydrocarbons. What are hydrocarbons again? Molecules, right? They're containing what? Only, only carbon and hydrogen, okay? So go back in your notes, look where we've talked about this. We talked about it a few times. Alkanes specifically are hydrocarbons that contain only sigma bonds. What are sigma bonds again? Single bonds, okay? So if you're not one of the ones that's shouting these answers out to me, you guys need to start studying this stuff, okay? Because it's going to come back and bite you and on the final, okay? So alkanes can be represented by this general formula of CnH2n plus two. So this is about the extent of the math that you're going to get in this. So if I said I have an alkane, an alkane, so CnH2n plus two, if I said I got an alkane that has four carbons, you should be able to tell me how many hydrogens it has, okay? So if I had four carbons, it would be C4H, what? Good job, 10, okay? How did I figure that out? Because I just put n, because n, right? Equals four, put n there, n there, right? Got that? Okay, so if I said I have an alkane that has 10 carbons, what would be, how many hydrogens would that have? 22, okay, good. So methane here, that's the simplest alkane as you could imagine. This is natural gas, CH4. Notice the bond length relative to the bond length of the triple and double bonds, you should look at it. Here's the general structural formula of an alkane. So it looks very strange compared to the alkene and the alkyne, but remember, R's are just carbon chains, okay? So it's just something that would be like that, right? And it's just saying instead of a functional group there, we have just a little H, right? In fact, we've got three H's there, right? Remember that. So we can have a couple of different types of alkenes, or alkenes, we can have a normal alkane, or we could have a branched alkane. So remember, notice, these are structural isomers of each other, right? Why are they structural isomers? Because they have the same what? What do these things have the same of? They have the same molecular formula, right? So their molecular formula is the same, but what are they different in? The way they're connected, okay? So I want you to say they're different in connectivity, that's the way you want to think about that, okay? So notice the molecular formulas of these things are the same, but they're different in connectivity, so we call those structural isomers, okay? Remember, geometric isomers also have the same molecular formula, but they have the same connectivity too. They own the only thing is they can't rotate around that double bond, okay? We'll talk about some more type geometric isomers when we talk about cycloalkanes. Okay, so let's look at these compounds here and decide what's a normal alkane and what's a branched alkane. So when I point to it, you tell me if it's normal or branched. What about this one? Normal, right? What, how come that's normal, right? And when we look at it this way, that's normal, right? Why is that? Well, when we look, the carbon chain doesn't split, right? We don't have a carbon chain going off here and a carbon chain going off here. We see the carbon chain splits here, right? Just because it's drawn kind of weird, you know, drawn not in a line doesn't mean that it's branched, okay? So we just got to say carbon chain, look at the carbon chain. So is this one branched or normal? Normal, is this one branched or normal? Branched, this one? Normal and this one? Branched, so are we cool with that then? And do you guys see the relation between the bond line structure and the drawn out structure here, the condensed molecular or the condensed structural formula here? Do you guys see the similarities, okay? So make sure you can translate from one to the other, okay? So here's some more alkanes, okay? So they can get quite complex. You can see this one has, you know, three rings in it. One, two, three, there. So there's the ones that have rings, we call cycloalkanes, okay? So is this normal or branched, alkanes, normal? Is this normal or branched? Branched, don't get freaked out by these. Remember what these mean, right? What does this line mean here? It's coming towards us, right? And this one means what? It's going away. So this is showing perspective, okay? So this is showing perspective on a structural formula. Is this normal or branched? Branched. And these, we don't say normal or branched, we say these are cyclic alkanes or cycloalkanes, okay? So what's that atom there? Carbon. How many hydrogens does that carbon have coming off of it? Two, right? And why'd you figure that out? Because carbon can make how many bonds? Four, right? Four bonds, right? Okay, so what about that? What is that atom there? Carbon. How many hydrogens are coming off of that carbon? One. One. How'd you figure that out? Because it's got three bonds. What about this atom there? Carbon. And how many hydrogens? Two. Okay, very good. So what type of compounds are these all? Alkanes, but there's a bigger group of compounds. These are collectively known. Alkanes, alkynes, and alkenes are all part of what type of compound? So compounds that contain only carbon and hydrogen are called what? Hydrocarbons, okay? So you're gonna have to remember all of these things. Okay, and there you can see that alkane's getting bigger, bigger, bigger by one carbon each time. Okay, so you're gonna wanna know the name of the first 10 alkanes, okay? But they're really easy to remember, okay? So the first four are called methyl, ethyl, propyl, and butyl, okay? Those are hard to remember, except I'm gonna give you what do you say, a mnemonic device that helps you remember those, the mnemonic device is mice eat peanut butter, okay? So mice eat peanut butter. This'll help you catch mice too. Mice eat peanut butter. Okay, so methyl, you already know that. Carbon, one carbon is called a methyl group. The next one is ethyl. This is like ethyl alcohol, the stuff that you drink, okay? Propyl, this is like propane, okay? The stuff you cook your grill with. And this one is butyl. That's like what's in the lighter, butane, okay? So this is the, like if you've got a group coming off of here, we call this a methyl group. If we got two carbons, we call it an ethyl group. But CH4 is called methane, C2, whoops. This is called ethane. I keep wanting to do one more. That's propane, and that's butane, okay? The last ones are easy to remember because they're the Latin names of numbers. Pentane, hexane, heptane, octane, non-ane and decking, okay? So those first four are kind of hard to remember. Methyl, ethyl, propyl, butyl, but you'll remember them now because you know mysy, peanut butter, okay? Yep, okay? And here's the rest of them. You can see pentane, hexane, heptane, octane, non-ane and decking. And here's, if we look, methane, if we've got a CH3 group, we call it a methyl group, okay? Notice the number of carbon atoms increases, the boiling point increases, okay? So remember, boiling point and molecular weight kind of mirror each other. The bigger my molecular weight is, the higher my boiling point is, okay? This is like taking a tennis ball which is very small in weight and taking a bowling ball which is very heavy in weight and asking yourself which one do you think you could throw higher, okay? Because the bowling ball is much heavier, just like a big alkane is much heavier than a small alkane, it can be thrown higher up in the air, okay? So it's got more energy, okay? So the tennis ball can be thrown higher than the bowling ball, right? So that's like this dichotomy between small and large alkanes, okay? We'll talk about conformational isomers next time. Oh, really? That's where you are. Okay, I'll put the rest of the slides up.