 Hello. Great. Okay. Good morning. Hello, everyone. I'm going to be talking to you in a few minutes about ES6. I think I can actually see everyone. There are lots of spaces up here in case you want to move a little further up to be able to ask me questions more effectively, because I am going to be asking you to do that many times during this talk. I just tweeted my slides, and they are interactive. So if you have computers, as many of you do in front of you, you can open them up, type into them, and press the Run button and play along with me as I go through many different pieces of ES6. So ECMAScript 6 or ECMAScript 2015. So how many of you have heard of this, the new version of JavaScript? Okay. And how many of you have actually used it? Okay. Great. So at least in the last talk, you heard and saw a lot of ES6 up here. So I'm going to be explaining some of those features as we go through. ECMAScript 6 or ECMAScript 2015, as the new name is, is the next version of JavaScript that's currently being implemented in most browsers. It has been a very long time coming. The last version of JavaScript that was ratified was 2009, and it didn't even have that many really cool things in it. I'll get into that in a little bit. But we've all been very, very patient to have waited this long for all of these pieces. So my name is John Paul. I love JavaScript. I have dalliances and indiscretions with other programming languages every once in a while, but I always come back from the scalas and javas of the world to JavaScript. If you want to take a look at the slides, just go to my Twitter handle or the jQuery hashtag and you will see everything. So first, I want to talk to you about what ECMAScript is. So ECMAScript is an international standards body. It is like IETF or IEEE. They have standardized a few things, most notably the amazing thing that we used to call the cloud, the floppy disk. They also standardized Dart. They standardized C-sharp. They standardized a few different pieces of the internet world that we don't typically think about. Their official standard body adopted scripting language is ECMAScript, which is what we lovingly call JavaScript. So ECMA International is the standards body that puts together the specification every however many years. The particular group within the ECMA standards body is called TC39. There's a lot of jargon and lingo here that you don't necessarily need to know. But ECMAScript has had a few major revisions. ECMAScript version 3 was put together in 1999, most notably added regular expressions. Can you imagine life without regular expressions? We also added try and catch, some pretty staple ideas in programming languages. We gratefully got in JavaScript in 1999. And then there was a 10-year long gap. So despite how impatient we might have been, we've been pretty used to it as JavaScript developers because it's already taken a very long time for us to get new pieces of the language. In ECMAScript 5, we got things like array.map. A lot of extensions that prototype.js added were actually integrated into the language. And now in 2015, we have ECMAScript 6. So I'm going to start going through some features of ECMAScript 6. It has been a long time coming. The language version numbers have now changed from integers starting from something low like 3, 4, 5, 6, and it moved to the years in which they will be released. So the next version is not ECMAScript 7 anymore. It is ECMAScript 2016, 2017, 2018. The reasoning behind this is that when a year is actually attached to a document, it is forced to go out in that year, and we no longer have to wait for some arbitrary number of years in the future. This is a good idea for your own projects. Name everything by the year, and you'll have to get something out by December. So 2015, this is the new name for ECMAScript 6. You'll still see lots of blog posts about with both different names, but they mean the same thing, ECMAScript 6 and ECMAScript 2015. So I want to talk to you a little bit about why I am such a huge fan of the software industry. So one thing that I really love about being in software and being in programming languages in general is that there is basically zero cost for plagiarism. We can steal the best ideas in other programming languages. We can steal the best abstractions, the best patterns from other technologies, integrate them into our own workflow, into our own programming languages, and basically zero cost, and no one is really going to complain to us if anything, people are going to be happy because then they can come to this language more easily. They can mentally map between, oh, that thing, I know that from Python, I know that from Java, I know that from C-Sharp, and they can more easily integrate into the language of the web, JavaScript. So what we have been doing in ECMAScript as the years have gone on has been taking features that have been popularized in other programming languages and incorporating them into the JavaScript standard. There are a few here, there are many more than just this, but we have been taking blatantly from other programming languages. CoffeeScript gave us arrow functions. Python has generators, and we have very, very similar semantics around ours. Destructuring, that I'll show you a little bit later, came directly from Lisp. C has constant block scope and lots of other things that ECMAScript 2015 has, and then actually there is a language called E, which I did not know about until researching this, that actually was a direct copy for where we took template strings for ECMAScript 2015 from. It is not what Ruby has or what other programming languages have, but it is directly from a language called E. Anyone ever heard of E before? I have no idea what it does except for having template strings. But I'd be excited if someone here was like, yes, I know E. I wrote E way back when. So the plan for what I'm going to talk about is I've broken up my talk into a few different workshop components that will hopefully help you very easily and very quickly be able to go back to your day jobs and integrate these pieces into your systems without having to wait weeks or months or for standards bodies to do what they need to do or anything like that. So the first group that I'm going to talk about are the pieces of ECMAScript 2015 that are able to be shimmed into your current projects as easy as dropping in a script tag. The second group are the transpilable. So how many of you use coffee script type script? So there is a whole subset of ECMAScript 2015 that can be transpiled into ES5, similarly to how coffee script and type script work. You can take one piece of source code, convert it into JavaScript, and you can get a whole bunch of new features like that. And then there are features that are very difficult to actually use. I'll cover for a little bit until the actual implementations themselves build into the implementation the language feature. I'll talk a little bit about that. So as I go through this, again, if you have laptops, you can definitely follow along and play with me. I would love to encourage all of you here. So how many of you went to Darcy's talk yesterday? Okay, so he's talking again later today, but he has this idea of interaction that is giving away stickers. And I'm going to do something similar except I'm going to bribe you all for questions because, one, you are all on the hook for making sure that I speak on time and that I leave here on time to actually take that whole time. So I would love for all of you to ask me questions. Feel free to interrupt me. This is much more of an interactive workshop than it is anything else. I have an entire bag of stickers here for everyone who is willing to ask me a question. They can come up and get random stickers from JavaScript to grunt to gulp till whatever else happens to be in this bag. So as you are at jQueryConf, I know there is at least one thing you know how to add the jQuery script tag to your pages. That is at least that minimum. You might not know JavaScript. You might not know anything about what, you know, a jQuery element is doing, but you know how to add a script tag. And as script tags, as I said earlier, JavaScript is my favorite language. Script tags are my favorite HTML tag. I know that there is this one thing that you can do regardless of what platform you happen to be using. You can be in Joomla World, Drupal World, fancy new C-sharp applications or whatever. You can always add a single script tag. So I want to talk to you about some great new features we are able to use by just adding a script tag. All we have to do is add a script tag to this ES6 shim by Paul Miller. And we get many of these features that I'll go through and many, many more. I have only put on here, I don't know, about 10 of them. They are on the order of 25 or 30 different shimmable features of ECMAScript 6. So this is a pattern that I am sure all of us here have written a thousand times. We have a string. We want to check if a certain character or string of characters is in that string. And how do we do that? We use this fancy magical incantation which is dot index of being greater than negative one. And if we run this, you see it does say true. And this actually, this does work. This is one of those things that, especially people coming to JavaScript from other programming languages, bang their head against the wall for a while to understand why we have to memorize this thing. Gratefully in ECMAScript 6, ECMAScript 2015, we just have this, which gives you the same thing with the beautiful new fluent syntax that actually makes sense when you read it out loud. All you need is a script tag. Isn't it wonderful? So then, additionally, in ECMAScript 2015, we've actually standardized the promises A plus implementation and built that into the language itself. We don't have to rely on libraries, although if you do have jQuery and jQuery 3.0, you will have a very similar thing given to you by a library. The language itself actually supports it now. And this will work. So how many of you use promises? Okay, so the idea here is using promises, we have an abstraction around asynchronous events that is a little bit more useful and usable than a callback. So in this case, I am creating a promise. For that promise, I am resolving it after 1,000 milliseconds. And after that promise is resolved, I will alert something. And here we'll find that one second is much longer than any of us ever think. It took a little bit. So this is another feature of the language that's actually built in. We don't have to rely on libraries like Bluebird or Q or jQuery. The language itself has promises now built in. What questions do you have? Yes, it is. So I think it is actually just promises.all, but it's something I will look. So the question was, is the also promise libraries typically have a way to aggregate multiple promises and give you a single fulfillment handler to say when all of these different things are done, then execute what I need to execute in terms of a callback, that is also included. Almost everything that libraries currently provide is either included or can be extended to. I do not believe so, but I have to look that up. I don't think the promises are cancelable. Sure. So the question was, well, I think it was the question, it was a statement that Q and other promise libraries have memory leaks in them, does this. One of the advantages, one of the difficulties that Q would have in implementing something like this is that as a user land library, it cannot guarantee as much as an implementation in the language can guarantee. So there are optimizations that the language could actually make that Q cannot make. I don't know as to the specific benchmarks around the language implementations of this, but I'll tell you that for the shim that I've been talking about that you could just add with a single script tag, whatever limitations would be there for ECMAScript 5, would be there anyway, because all this is doing is shimming the same thing. Over the course of time, as this is built into browsers and built into JavaScript engines, most of those will go away. What other questions do you have? Okay, so again, promises have been added into the standard library for many years. So the JavaScript standard library in general has been tiny compared to the world where Java, C-Sharp, Python, Ruby, all of those things. We've been growing that very significantly with the advent of ECMAScript 2015. How am I doing that? You're all keeping track of my time, right? You're all promised. At least half of you raised your hand. So next we have been given a piece of functionality called object.assign. Object.assign is a very similar functionality to jQuery.extend, underscore.extend. It merges multiple JavaScript objects into one. This is something that many libraries provided. JavaScript has paved the cow pads, which is a term that is used a lot for JavaScript language extension that means that the JavaScript standard body decided to adopt what everyone was doing anyway and build that into the language so we do not have to continue to reinvent that wheel. Here you will see that object.assign is a function that can take multiple objects. It merges them together and puts all of the keys together. This is fairly straightforward and again, something that we do not anymore need libraries for. I think we saw an example of this in Vodal's talk earlier with LaSouche. I'm pretty sure. Again, the JavaScript language gives you that now. Additionally, again, for very familiar purposes for the Java C-Sharp world, we have... Ah, yes, please. It overrides from the right-wheel override, I believe, the second... the furthest parameter over-wheel override. It does copy, but if there are multiple keys with the same... Actually, I'll try that. If you have two of the same key in multiple objects, the second one overrides. Gratefully, with slides like this, you can just try it all. No, sorry, I understand the question. It assigns all of the properties... The typical pattern to do what you're describing is this. It assigns everything in the subsequent parameters to the first one. That is the official semantics. That is the same as jQuery.ext and then underscore.ext. Four sets. Is everyone here a JavaScript daily developer or do they use other languages? Other languages. I was a Java developer for a while. That's why I use this as analogies more often than not. I was a Java developer and then a JavaScript developer and found that I can build user interfaces where my parents can actually see what I'm doing. I continued with that. The JavaScript standard library in Equestria 2015 additionally adds sets. Here, an example that is very straightforward in the JavaScript and C-Sharps of the world, we try to add multiple Bs in this example, but actually when you run it, there are only three items inside when you call set.size. And there is only A, B, and C because sets automatically unique in dedupe, so you cannot add two of the same item to it. If you use objects, you use triple equals the exact memory location for an object. And again, sets are now completely out of the box for you to rely on. Many good implementations in NPM, but all very distinct implementers. So now, a little more complicated example. So again, as our little programming languages have, we now no longer have to rely on object to be our generic key value pair for anything. We now have maps, and the biggest distinction between maps and objects is that map keys don't have to be strings. Right now, if you try to use object as a key in another object, it actually calls to string on that object and uses that string. Which is sort of convoluted and very confusing if you actually run into a bug that you created because you assumed that you could use an object as a key. Now, maps in ECMASTER 2015 are able to take as a key more than just a string. Here in this example we create a map, key as value. We check here's an example of an object that has a key named key and a val assigned to it and a map that looks very similar that has a key and a val. The two different ways to look up into that is for an object to use the key in syntax, for a map we use the has syntax. So here these are roughly the same and for a string they're almost exactly equivalent. But for a map we can also put in as a key an object and we can specify now it actually has that object but if I create a second one, now even though these two things are exactly the same in terms of their values when I try to see if the map has it it says false because these two objects are actually different objects in memory when I try to get that it gives me nothing because it's not there whereas here I am able to look that up. So in Equus for 2015 using maps we are able to use objects as keys you can use DOM nodes you can use pretty much anything as a distinct key rather than having to rely on to string and needing to make sure that every object has different values inside of it to make a difference. Yes. So maps also have the iterable interface so map I think I understand your question let me see if I can do you have to use new is that the question? Ah, I see I do not believe so map is not a function so no you cannot. Yes I do not believe so either you cannot do that but so maps are also iterable I will talk a little bit later. So Equus for 2015 again I do not know if I go through this significantly I have added a new feature where you can make your own objects iterable this is another thing that other languages have, iterables have a .next similar kind of thing where you can create objects that are able to be used in the language with the four of syntax so four of is a new similar to four in four so using this new syntax I am conflating multiple things here but you have seen at least one example of this before this is using the syntax something of map the of is the key piece here four of is a new looping mechanism in JavaScript in ECMAScript 2015 the four of loop can be used with your own objects as long as they implement the iterable interface maps implement the iterable interface so you can pluck out of a map a key and a value in this case in here you see key and a value because maps are iterable you can't look up by square bracket but you can iterate through all of them they are unordered but what other questions do you have? yes actually remember the syntax for that the question was can you create a map from an array you can definitely create an array from a map as well arrays have array dot from so you can go that way array dot from is something that will convert almost any iterable into an array of keys and values array dot from is another new piece of ECMAScript 2015 that you can use to convert array-like objects so if you are used to arguments which is almost an array DOM node list so if you do not use jQuery to query the DOM and you use document.query selector or something like that you actually get back something that is not even though it looks like an array in your console it is not actually an array it doesn't have slice or splice or any of the typical methods that you can use on it you can use array dot from as a new piece of ECMAScript 2015 to convert that automatically into an array instead of using the very odd another incantation square bracket slice that call so array dot from on the map I do not believe so you can convert it into an array and have that but there are probably other methods that let's look this up so almost all of it just like how pretty much anything on the web and with JavaScript you can easily look up in MDN the Mozilla developer network I am praying that I actually have internet right now similarly you can look up pretty much everything in ECMAScript 2015 also in MDN so here are all of the methods of map clear delete entries it does not have but you can easily convert that to an array and filter map so now in terms of even more obnoxious incantations that we are used to in JavaScript that are replaced by clear implementations of them instead of having to use index of in arrays we are able to use a new function on array a new prototype method on arrays called find find is it takes a function and this is an example of an arrow function that I will explain a little bit more later that can tell you what so here this will find you an element that happens to be 3 the few features that we are using here in addition to find our arrow function so this is a much smaller and cleaner syntax for this those are the same thing but you don't have to type all of the f-u-n-c-t-i-o-n that some people happen to be very annoyed with I forgot the semicolon I know I feel so ashamed so it is really in the example I have just described it is purely a syntactical thing you don't have to type the return but there are semantic differences that I will get into in a more complicated slide a little bit later so object.is additionally is a way it is similar to triple equals except it works with some of the magic and it works with some of the magic like nan and infinity so again we are able to add both find and object.is with ES6 shim here are some examples so if there were if more people have laptops here I would encourage us to wait for a few minutes have everyone actually try some of these these are great examples in a website called ES6Cutters which so these are examples that will actually get you to pass many TDD style tests to be able to test your knowledge of maps, sets, arrays lots of the different features in ECMAScript 2015 so I am here to be having some technical difficulties okay sorry I don't know what happened I have control again so all of these features I have listed about 10 of them there are dozens or more all of these you can add into your projects no matter what their platform no matter what their system with a single script tag that again I know you are all able to do so if any of these things you want you can add this in 5 minutes 10 minutes it is download and an adding of script tag but there are many many more things that some of which which I described already and some of which I have not that you can't quite just add to ECMAScript 5 they are not globals or pieces of prototypes that you can just add functions to but rather they are new syntaxes or new semantics that if you were if you were a computer that can spit out new code it's fairly straightforward but you can't just add into existing runtimes and these are what I call the transpilables these are all of the features that are in this category where you can't just add it with a script tag but you can add it with a build step so similar to the coffee scripts and type scripts of the world if you have a build step already or if you add something into your pipeline no matter what your back end platform or framework you can add a step invert that into ECMAScript 5 that then actually gets run in a browser and has the same correct semantics as it would be if ECMAScript 2015 was actually implemented in that browser and the way that you can do that is using a few tools so Babel is right is the most popular by far but there are a few different options here if you are using gulp, grunt all the other front end build tools there are plugins for these tools Babel, JS, Transform and Tracer do are similar to coffee script and type script they take ECMAScript 2015 look through it all convert that into ECMAScript 5 and we'll write that to disk somewhere for you I am actually using in these slides I am using Babel to take the string that's written into this ACE editor convert that from ECMAScript 2015 into ECMAScript 5 and then evaling that oh Douglas Crocker wouldn't like that either I am evaling that on the fly for you so what questions do you have so as far as I know so the question is why haven't I listed TypeScript here TypeScript is not as far as I know intended to map exactly one to one with the ES2015 standard they have many features that are in addition to ES2015 as well as they do not have all of the features of ES2015 whereas the goal of these projects in general is to map as closely as possible to the new version of JavaScript but TypeScript does have, similarly with coffee script at least the ones that we have taken wholeheartedly many features of ECMAScript 2015 have been implemented in TypeScript so if you are using TypeScript already many of these things can be used I don't actually know which ones error functions in classes that's not a lot I thought it was going to be many more things than that so the first thing I want to talk about is something called block-scoped variables and if you are in the Java C C++ world this is something that's very familiar to you so I don't know about you but I have been asked a particular interview question many times over my life as a JavaScript developer and I've been a little bit annoyed by it after seeing it so many times and I hope I have never asked it myself and I don't know if any of you looking at this can immediately tell what I'm trying to get to here but I'll just describe this piece of code out loud I have an array with values 1, 2, and 3 I have another array for output I create a for loop I iterate through that array and I create a new function that's pushed onto the output that alerts the values that alerts the value at that index of the array and then for each of those output functions I call them and actually execute them so does anyone know what is going to be alerted when I click on one here? A lot of 3s, no one is going to try me with the 1, 2, and 3 thing everyone knows JavaScript so well so yes you are correct the answer is 3, 3, and 3 but this is the most surprising thing for someone who does it we all apparently know JavaScript very well I don't know what I'm doing up here but the language is very opaque here because as someone who let's say I was not extremely interested in the programming language and really understood the semantics of var which apparently we all do I look at this and think it should be 1, 2, and 3 what on earth is wrong here this variable here is not scoped to that for loop but rather scoped to the entire code here the function itself whatever is being executed around this so because of that at any one given time there is only one variable called val which means at the end of this that val will be the value 3 and at the time at which all of these functions are executed that val is the number 3 which just does alert 1, 2, and 3 but this is completely breaking the law of the principle of least surprise or whatever that is it looks like it should do something that it doesn't do and in order to get that to work correctly without ECMAScript 2015 there is a lot of jumping through hoops you need to do around creating a new function and creating new scopes so that you are able to capture a new variable whose value is 1 and values 2 we are able to add a new we are able to use a new keyword called let which is actually blocked scoped so here in terms of the interview question that you would have all passed that would have been with flying colors the we will be able to get 1, 2, and 3 because that let for each iteration of this for loop there is a different variable let because it is scoped to the block the block is between the two curly braces this also allows us to do things like instead of creating an iffy you know the word iffy iffy so immediately invoked function expression it is how most jQuery plugins for example are wrapped in something like this is to make sure that you don't accidentally leak into the global to cut everything off from the outside world with this new block scoped variable creation we can create something like inside just two curly braces as long as everything is using let everything is already scoped to that block and cannot leak out into the global so what questions do you have so let is normally used for constants so const is actually a separate and different way to create block scoped variables which happens to be my next slide so I'll talk what are the questions do you have so the scope of the question was is there any memory optimizations that the interpreter is doing here so I don't believe that there is any more optimization than the fact that it does go out of scope at the end of that block so the variables have a smaller scope than just a regular var which I presume means that it is garbage collected more but I don't know in detail but in certain cases and I think so the way that let works in certain cases if you are using transpiled code this is just more for interest necessarily than actually caring about using this in some rare cases the only way to get so there is actually one piece of semantics in ECMAScript 5 that obeys block scoping which is the exception in a caught exception handler so if you write try catch that E that is caught is actually block scoped only to the curly braces that that catch is so some old transpilers used to in very unperformant ways use catch to mimic block scope because it is the only thing in ECMAScript 5 that really exhibits the correct semantics most of that is no longer used so let is not hoisted at all in terms of the actual specification but there are certain cases using the transpiled code where it will be because there is no there is no way to mimic the exact semantics you can presume that they are only supposed to be used within the curly braces that they are defined in the correct implementation they are actually unusable before the line at which they are defined so if I try to do something like this should give me a reference there it will not in this particular case because using these transpilers it cannot mimic the exact semantics but this is undefined because it is oh yes, potentially I think I have turned to those things for ease of demonstration purposes so there is one more way to have block scoped variables in JavaScript one is let which is obviously the most common within the curly braces const is very similar it is still block scoped if you put this into curly braces they will stay within the scope of the variable the scope of the constant will be within those curly braces but it does enforce some very minimal semantics around changing the value of that constant so here when I create a const x equals 1 and try to run it I get an error x is read only on line 3 this is something just because I have tried I put a try catch around everything in here and alert all of the error messages but this is this new feature of ECMAScript 2015 will force you to not change references in constant again another block scoped variable it throws an error it actually throws an error I think it is intended to be for early catching of mistakes instead of silent now we are going to get into a fairly long and complicated one for arrow functions since we are about at 2 minutes before a break I will let us all take that break come back here and continue afterwards thank you all I will see you all in a few minutes I just took it very disappointed in my score I did not do very well I didn't do poorly I didn't do very well I encourage you all to take it getting one question right you are really happy anyway so go for it so I am going to get started with arrow functions in a second again so thank you all for continuing to ask me questions and continuing to keep me on time because we are going to make this work I am very excited to again the fresh direct fresh desk quiz very interesting it actually goes through some of the interesting semantics we are talking about here some of the ones I have gotten wrong I am a little embarrassed about but I am still happy about it in general and I encourage you all to go try it so please continue to raise your hands ask me questions I will be asking as we go so now on to the next item that is transpilable something that we used a little bit earlier but I didn't go into much detail about someone asked a question that I have deferred to almost right now so arrow functions are a feature that we in ECMAScript basically directly stole from coffee script and at its smallest level it is just syntactical convenience over functions so here I have created a function double that uses this syntax this syntax is equivalent to so running this I get 20 this syntax is equivalent to typing function here changing this to curly return great semicolon at the end and again this is the same thing oh wow you are a jshint for me this is great so thanks to human jshint and the ability for my keyboard to continue to type semicolons we have a synantically and syntactically correct way to double something so in this particular example it is almost purely syntactic sugar all you do is remove the function remove the return change this here and you get the same thing but that is only the simplest case of what is happening for the fat arrow arrow function what is more complicated to understand is what is happening around the binding of this when you are using the arrow function syntax so what is happening for the fat arrow so how many of you have used function prototype that bind so in javascript there is a little bit of special treatment to the keyword this whenever looking up a property on this you have to consider what this is referencing in the typical case if you are just in a global file in a browser somewhere this is the window the global when you are in an object or when you are calling a function what is on the right hand side of the dot is typically what becomes this inside of that function so here I will show you I am creating a variable that is empty I am creating an object that is I am creating an object that has a location value and an initialized function and inside of that I am assigning to this global alert lock variable here if I run this you will see that I get we are at Bangalore but if I change this to the value I am going to run this with syntactically the same thing if I change this to just a function which seems to be exactly the same and I run again the I forgot that earlier so please raise your hand when I have a semicolon so again here all I did was do the same transformation that I did earlier with double I changed the fat arrow syntax into a function property lock of undefined which means that something has happened between the changing of the arrow function syntax to the regular function expression syntax what that changes is that this is bound to a different thing in the when I do not use the fat arrow this is bound to in strict mode undefined so when I am running this it says cannot read property lock of undefined as an error because this is undefined when you just use a regular function but when you use the fat arrow this works now why does this work this works because what is happening with the arrow function is that it automatically binds this to whatever this is in the context that it is defined in so this is similar to how if I go back to the function version if I dot bind this again this works correctly so fat arrow is doing something a little bit more the arrow function syntax is doing something a little bit more than just saying don't worry about typing f-u-n-c-t-i-o-n for your fingers to do on your keyboard it is also automatically binding the value of this to the value of this in the context in which it is defined so this is a fairly advanced topic and it is a little bit of it is confusing around one using the word this in a sentence is sort of difficult anyway but what questions do you have around what this new feature does in addition to just changing syntax so someone earlier asked the question as to what the difference is between fat arrow and a regular function most of the time it is syntax but it is also this one very specific and very interesting difference also when you use the fat when you use the arrow function syntax you cannot call or apply and override the this context most functions in javascript define this way you can do something like you call that function with a different this you cannot do that with arrow functions as well there is no way to avoid this default so the part of the reasoning behind the arrow function is this difference so no you cannot avoid it the only way to avoid it is to use the regular functions in that it is all the typing it is so annoying so again this is another feature that using a transpiler we have access to we don't have to wait until the whole language in all of the browsers we can add something like this into our build process so the next feature that I am going to lump into a few different pieces here is destructuring so you have seen some examples of this already this is another feature stolen from the lists of the world that will allow we don't have to spend usually and this is probably true in most of the code that you write in some of the code I write anyway because I am not always writing in eclipser 2015 so the first few lines of our function is spent plucking things out of all of the arguments so we have maybe an options argument and a few other arguments and our first few lines is take the second item of this array and assign that to a variable that I actually want to use in my function take a property off the second argument and I want to use that as an argument to the function now using a syntax like this we can break apart arguments to functions we can break apart variables into their component pieces using this syntax so here instead of having to write something like instead of having to write all of this out like we do in the beginning of most functions we can break that apart directly inside of the definition of the function and here again this just works destructures to one and three basically a syntactic convenience around breaking up different parts of objects and arrays is it possible to do that in maps? in maps I know it is possible to do this with objects I do not know if it is possible to do in maps I'll look that up and we can talk about that later it's not, I don't think so but I will there are arguments for future versions but you can do this for objects so I believe this will work yes so you can break apart objects in a very similar way objects and arrays are still special special syntaxes and JavaScript maps are just objects that implement it dispatch b is that what you said? no this is just destructuring just creating new variables yes I have more scholar to learn I'll talk to you about it after what are the questions do you have? you can destruct your arrays you can destruct your objects as many pieces and as deeply as you want to go so I think that if you just use regular the question is if you have multiple elements and you don't want to destruct all of them how can you do that? I think that you can just do this so you need that many commas basically I think it's a fairly common convention to do something like this with underscore being things I don't care about but you don't need that you can just put commas for the empty slots this particular piece only works for fixed sizes I don't know if there is a way to get first and last in terms of destructuring so if there were if there were more so for example if you're passing things to a function there's something called rest arguments where you can if you do something like this for whatever arguments you pass to this function so let's say I pass this ah, okay so using another feature of ECMAS for 2015 that is not destructuring you're able to pass in using this redox syntax this is called rest parameters now rest is an actual array so here you get all of the pieces as an array and you can use the array methods like for each I don't know if you mean something like so you can do this so a, b so here you can get the first one the second one as separate variables and then using rest which is just an array you can break apart all the rest so here I have an example of something similar to the question that was just asked so we can put together a lot of these new features some pretty esoteric syntaxes that most are not used to but eventually we will get used to in JavaScript so here I am using I'm creating a function called destructure that again takes this rest arguments which I showed you as an example earlier I then break apart those arguments into two different pieces one is options one is the callback and here I can if I call this passed with the object defined here that I forgot a semicolon for I apologize and then run this they get true which is the value of the v property in options and the type of the second thing which is function now here I can also do something which will again give me the same thing because you can actually destructure in JavaScript deeply so inside if an array has an object inside of it you can destructure the array and the object at the same time which is what this syntax is doing some of these can get very esoteric and unreadable so use these kinds of features mixedly with caution but you are able to do all of this because they are all relying on the same sort of destructuring syntax and semantics what questions do you have I am going to talk to template string so this is one of these things I don't know about you I have been so annoyed in all of my life in JavaScript having to write string plus string plus string I have made at least a dozen JS fiddles that will take an arbitrary text area and break it by 80 character lengths so I don't have to do that myself I understand there should be a tool for this but now we have been jealous or not we have been jealous of the Ruby people they have been making fun of JavaScript because we have not had for a long time we now have template strings which is easily able to interpolate variables and to stringing them and put them into strings and you know so this is we have template language for a lot of these things so this is not by itself extremely impressive but what for me is way more impressive is that I can now enter new lines in my string I had a mic I would drop it that's amazing it has taken so long and so many times of me having to type slash n slash r slash n figuring out what line ending line in and now we just hit enter so this one is fairly straightforward but what questions do you have about template string reading the transpiled output of this is very straightforward and simple just figuring out how many new lines to be adding into that I'm pretty happy about I missed another semicolon I'm just I apparently don't care about semicolons I apologize so template strings require you to use the back tick so it is not a single quote it is a back tick and there is actually an additional feature of this where you can actually pass into a handler this is much more customizable than what I've described here this is the most basic use of template strings which are just concatenation of different pieces together but if you want to you can use something called a template handler which is which will allow you to be given the in a particular data structure defined by the language the pieces that are static so the I'm space the pieces that are non-static and will allow you to do things like escaping HTML appropriately or automatically there's an interesting one that is SH so it will convert whatever you have into a correct dashable form automatically for you so you can write your own custom template handlers that will do more interesting things than just concatenate most notably escape appropriately for whatever system you mean so what there the dollar gets to string it is to string so a function whatever to string the function would be yes you can so you could do so you can write expressions again they are all to string afterwards so whatever you put in there although I would recommend not doing that much inside of the template string but you can evaluate things inside so I'm going to get on into the generators so how many of you have used generators before any language so this is a bit of a mind stretching exercise so I should ask you all can you want to try with me you got to get the mind going so generators are a new feature in ECMAScript 2015 that allow you to create what are actually iterators that look like functions that never have to end and they look that way and they're differentiated by this special new star that means everything is different now so be prepared for it what this returns is so a generator is a function defined with a star at the end that is able to use something called yield so the yield keyword it allows you to pause the execution of functions midstream so this is something that looks it has a while true in it and it looks like this would be something that would run infinitely but what this actually does is allow you to externally from the generator pause between executions of the generator so this function when executed will run until the yield is a creative variable while true run until the yield and once the yield is executed it will give up control to whatever is executing the generator until the generator again gets called so how that works is a syntax I'm not going to go into significantly here but the way that you can use that is this is an example of a generator that represents the infinite series of integers so it is numbers that go on forever using the four of syntax again we can pluck things out of that generator because what generators return are iterators and the four of syntax is used on top of iterators so here I will go through the first three numbers doesn't make sense though so I will let my internet actually hopefully connect so I'll come back to this in a little bit I'm a little confused as to how that happened so next and last on our jaunt through this I'll come back to generators in a little bit is the class syntax so class syntax has been a fairly controversial one in the grand scheme of JavaScript mainly because some people are afraid of it looking like Java and other people are afraid that it doesn't look enough like Java so at some point between this tension a winner came out we have class syntax it is actually it is purely syntactic sugar in the general case on top of regular prototypal inheritance in JavaScript it allows us to do some nice things like actually give interfaces allows us to extend arrays right now in ECMAS root 5 we cannot actually extend arrays we can only do things that are close to it here is an example of creating a class it has a constructor it is super and here it says an example we are able to run this it says hey because it calls the greet method you can have as complicated object hierarchies as you want to although it is recommended not to be so complicated this is again nothing you couldn't do in JavaScript in ECMAScript 5 there is nothing particularly special here syntax for people coming from more classically object oriented questions do you have? yes you can so everything on this so the question was can you access greeter.message and the answer is yes you can so everything here is public by default that is true for JavaScript just in general properties of objects are generally public but there is a new feature of ECMAScript called symbols we are able to create private symbols to be able to add private things to objects I am not going to go through that here but if you would like to learn how to make things that are really private Java C sharp style private that is now possible and I would love to talk to you about it yes this is all what this is doing is automatically creating the right greeter.prototype.blank if you look at the transpiled output if you look at the transpiled output it is basically that oh this so class this is again similar to existing JavaScript things the class syntax automatically creates those prototype methods for you but you are also able to add whatever inside of these curly braces you are able to add whatever you want to that function itself so this is added directly to that I don't use that but that is possible I am trying to get back to the raffle so I can show you that generator example because I am still confused and I apologize for that but we will if I do not get that working right now I would love to talk to you about that after so again there are many more examples in here that I love for you to actually play with because there are live interactive demos that you can see confirm your understanding of some of these things and then ask questions about for me so I will be here the whole time I would love to talk to you about it afterward so I do have some examples of the modules and the module syntax let me see if I can get that apparently I cannot my keyboard is not working I will continue with this so there are inside the repository that I have and the documentation that I shared the link for earlier I have a few examples of the different modules of modules and how we can use them there are after a lot of discussion and some heatedly so there is a very robust module system built into ECMAScript 25 it is one of the large large lacking of JavaScript so far because pretty much every other programming language has some sort of module system such that we have been living in a world of only globals and name spacing for basically our entire careers in whatever JavaScript you have been writing using the so the new module system syntax is something that basically appeals to all of the different use cases both on the client and the server that you might have for using JavaScript it is something that if you are familiar with the module systems of Python, Ruby, things like that it is very straightforward as to what JavaScript is trying to do and again I will talk to you about that further afterward so there are some pieces of JavaScript that are not in this category of being able to be transpiled into or transpiled into a version that the browser can actually use there are some intractable pieces just like this insane Rubik's Cube that someone might try but I will never be able to win that we cannot yet use until browsers start to implement them gratefully there are already pieces of this that are being implemented by JavaScript by JavaScript engines but not yet necessarily everywhere the first one of these is weak maps so this is something that library authors have to care about more than user land people but it is basically a way to optimize memory usage in maps as garbage collection and making sure that the map itself does not hold references to things that is not something necessarily very useful but proxies and tail call optimization are something that especially the functional programmers of the world are very very interested in having in the language itself proxies are a mechanism by which you can extend the language to be able to add metaprogramming hooks into JavaScript so if you are familiar with Ruby's method missing or being able to add metaclasses and python this is the ability to create objects that stand in for other objects and can forward property lookups and method lookups to other objects as needed this is a new feature that we cannot mimic at all in current JavaScript engines and once is actually implemented and more widely available will make things like two-way data binding although not necessarily as cool now as it was a year ago will make two-way data binding and things like that very simple and straightforward because we are able to hook into JavaScript engines much more than we are able to additionally tail call optimization is something that in certain cases we are actually able to transpile away but in the general case when writing recursive code although I will admit that I am not one of the most significant amounts of recursive code we are able to the JavaScript engine is able to optimize that significantly away for you so you don't have to worry about blowing through stacks or calling a function 10,000 times all of that will eventually be handled by the language itself these are some of the most complicated and interesting changes in the language but they are farthest from the general public being able to use on a regular basis oh I didn't know that so there is a way to mimic some of these things similarly with tail call optimization you can I am not going to try to implement that algorithm myself but I am glad it exists so what questions do you have ok so I have just scratched the surface of the iceberg that is ECMASTER 2015 already spent about an hour and 30 minutes or so and I have covered maybe a dozen or two of all of the features that have been added there are on the order of 125 what is called features some of them are sub features of other things there is a great list that if you have these slides you can click through that cangax has put together of all of the new features over a hundred different pieces of them and all of the different browsers and transpilers that implement pieces of it or not so you can take a look at this and go through some of them many of them are in the category of shimmables you can have that tomorrow some of them are transpilable you can have them in a week because I believe in all of you that all you have to do is sit there and figure out a build tool and then there are many pieces in here that I have not talked about this site has great examples for that MDN has great examples for and there the especially when you consider the fact that many of the great pieces that were intended for ECMAS in 2015 have been pushed to 2016 and 2017 the list of new features that we are basically guaranteed over the next three years is even more interesting and even more holistic we are getting a whole range of very very fun new concepts and again many are spilled in from other programming languages gratefully we don't care about plagiarism so what I think that you should do walking out of here and I know that at least some of you I have seen the glint in your eyes about not having to type plus signs at the end of strings to concatenate or not having to type index of is greater than negative one because where on earth did that even come from there is probably some background for it that I don't know but I know that there are people out there that want to and can go and add yes section just throw it in a branch your manager doesn't have to know tell them John Paul told you to do it at a conference and they will not care realistically no one even needs no because you add the script tag and if you never use these features you never have to use these features completely backwards compatible that's another piece of the ECMAScript philosophy because JavaScript is something that ties the web together and has been tying the web together for over a decade it's very very hard to be completely backwards compatible therefore you can easily add these things never use the features and no one has to concern themselves with it at all and gratefully we're not breaking any websites from any time in the past by pulling off all of these new features we get to use I encourage you to read these people's blog so Axel Ruschmeyer, Aria Hedayet and Adios Mani they are prolific writers as well as Nicholas Sekus are prolific writers about ECMAScript 6 the new features they're in they're particular gotchas and they're particular very interesting and useful pieces add a branch with the transpiler because again one speaker at conference told you you were able to do it so you can get away with it with any manager but the amount of work here to do is not that especially if you have a build tool already in place if you're in the coffee script or tripe script world or if you have a build tool that just concatenates all of your scripts and minifies adding in a transpile step is maybe an hour, maybe a day, maybe a week but it's not six months and being able to start to build into your workflow these new features and more future-facing things really gets me excited even if I don't use anything it just gets me excited that they're there and eventually we'll start to migrate things over so I think you should do that so I think it's hard to get through any talk without using any memes so go transpile and shim everything thank you so much for listening to me I appreciate it what questions do you have there's definitely time to go back through some of these things and I know that I've dumped a lot of information on all of you so thank you how many of you had already added the script tag it's so easy I know you have your code sitting on your laptop so using the modules the question was how do you import classes if you have them in a separate file so classes are just so just like how a javascript right now if you want to create a class in ECMAScript 5 you are just creating a function that function can be you can be used new and make a new instance of that class so similarly these are just functions when you use this class syntax that I showed here greeter is a function if you type of that it's just a function so whatever you could do with the module system using functions you can do with classes they're not particularly special this is one of those things that are a little bit confusing the fact that you're using the class keyword and it generates a function not something else special this is just syntactic sugar you are able to be assigned to variables just like so here so this is an arrow function here on the left this is an arrow function it is assigned to this variable you can use them just like whatever you would syntactically use a function expression so you can assign it to a variable you can pass it as a parameter to a function you can use them anywhere one of the questions do have you cannot write interfaces that are checked interfaces in ECMAScript 2015 you can write classes that implement interfaces in ECMAScript 2015 I believe that in future versions there is intended to be things like language supported ways of checking that but there's no straight comparison with Java interfaces that would require a type system that means you can make anything into any interface so yes TypeScript can do it sounds good thank you so much