Beginner Bites: ES6 features you need to know

You’re familiar with native JavaScript and have created some applications using it, but when you venture into the broader ecosystem there is JavaScript that looks foreign. Especially in the documentation for the libraries you hear about often like “React”, “Redux”, “TypeScript”, “Angular”, “Ember”, . Something I personally found difficult was learning any new library due to the knowledge dependency of needing to understand this future JavaScript language, ES6. insert cool framework/library here In this post I hope to cover the future JavaScript features using JSBin to test drive them, providing examples and exercises. This post is aimed at beginners who want to be exposed to the most important parts of ECMAScript6 (in order to read and understand documentation for the modern libraries used today). We’ll cover: Arrow functions Rest parameters Destructuring assignment Template literals Classes Promises Generators I recommend using to test out these examples! (Make sure you change the JSBin language to ) JSBin ES6 / Babel Arrow Functions Arrow functions can be thought of a shorthand way to write functions. The two functions below are equivalent: var fn1 = function (a) {return 2 * a} var fn2 = a => 2 * a; . Play with the above example live You’ll notice a couple things with the arrow function above. First, the arrow function lacks parenthesis around the arguments. This is because there is only a single argument . If we want to pass in multiple arguments we’d need those parenthesis back. a var fn3 = (a, b) => a + b; Secondly, you’ll also notice the of the right hand side of the arrow. The right hand side of the arrow is a shorthand of . What if we want to do more things inside the arrow function than just a single return line? We reintroduce the brackets. implicit return return a + b; {} var fn4 = (a, b) => {var result = a + b;return result} Finally, if you want to an object, you’ll have a problem. The curly braces around the object literal notation interfere with the curly brackets that declare the function body. In this case you need to wrap the object with parenthesis. implicitly return // Incorrect return of object literal notation.var fn5 = () => { name: 'Bob' }; // Correct return of object literal notation.var fn6 = () => ({ name: 'Bob' }); Some other points worth investigating: Arrow functions bind ‘this’ from the lexical scope they’re called. is not defined in an arrow function (see below for the solution). arguments rest parameters Rest Parameters Rest Parameters are a way of capturing any number of arguments passed into a function in an array. This is similar to but will give you an actual array. arguments var fn7 = (a, b, ...theRest) => {console.log(a);console.log(b);console.log(theRest);} fn7('A', 'B', 'C', 'D', 'E'); Play with the rest parameter. The must be the final parameter in the list of parameters. This syntax can also be used the other way, an array. rest parameter ... destructuring Destructuring assignment This allows the spreading of arrays or objects into distinct variables. In the example above we’re calling with . We could store those letters in an array. But if we pass an array into the function we end up assigning the array to , instead of splitting the array up over the function parameters. Here is the ideal use case of the where we add before the array to destructure it. fn7 ’A’, ‘B’, ‘C’, ‘D’, ‘E’ a destructuring assignment syntax, ... var someArray = [ ’A’, ‘B’, ‘C’, ‘D’, ‘E’]; // Using fn7 defined above. // Destructuring assignment. This will split 'someArray'.fn7(...someArray); /** WRONG **/ fn7(someArray); . Play with destructuring live Other fun things to try using destructuring syntax are shown in the . The is called . MDN documentation … Spread Syntax Template literals This is another way of writing string literals but allowing you to embed expressions into the string. Strings are enclosed within or . A template literal is enclosed within back-ticks . Expressions embedded within the template string sit within brackets. ' " ` ${} var name = 'Mia';console.log(`Hi my name is ${name}.`); Template literals feature: multiline have a property allowing you to access the raw string raw output modification using template literals tagged . Live example of template literals Classes A simple class can be defined like so: class Monster { constructor(name){this.name = name;} greetings(){console.log(`Hi my name is ${this.name}.`);}} var goblin = new Monster('Jerry'); goblin.greetings(); A class has a constructor that is called when you call . In this class the constructor expects a single argument . This is assigned to which is a variable assigned to the instance created. new Monster name name this.name . Live example of a basic class This is a , and I recommend you dig deeper. fantastic article on classes Promises Before explaining what a promise is, I’ll try to explain what problem promises solve. You’re coding a weather application that allows users get the current weather at a given location. There is a server that responds with the temperature after you call it, but it can take some time. If your program waits for the temperature to be provided by the server, it will freeze until the temperature is provided. An alternative is that one day the value will exist. Then doing something with the value after it . If an error occurs the promise can and you can the error. promising resolves reject catch Spend some time looking at and try the exercise. this example Promises have entire posts devoted to them, so I’ll link some material that helped me understand them. JavaScript Promises for Dummies https://www.promisejs.org/ MDN Promise reference Generators Generators are a function that can pause execution and then continue where they left off. This is fantastic for when you need to seperate logic and timing. A great example for when I used generators is when creating the animation for . This allowed me to animate a simple recursive path finding algorithm, but then freeze / unfreeze it to draw each individual frame. Interactive Maze Solver A generator function is declared using in the function declaration like so: function* function* generatorDefinition(){ /** stuff here **/ }; A generator function uses to pause execution and yield a value. To a value from your generator call on the iterator returned from the generator. This returns an object with two properties (‘done’ and ‘value’). When the iterator encounters a statement it finishes, returning as well as the value. yield instead of return yield .next() return done: true Use within your generator to call another generator function. This is how you write a recursive generator. yield* To summarise: A generator returns an iterator. Calling .next() on the iterator returns an object with two properties. ‘done’ and ‘value’. Generators can be recursive by using . yield* function* trivialGenerator() {var i = 0;while (true) {yield i++;}} var myIterator = trivialGenerator(); console.log(myIterator.next());console.log(myIterator.next()); . Play with a live example here and try the exercises Congratulations if you got this far! You should definitely pat yourself on the back. You’ve now been exposed to the major changes to the language that people are using. As a reward have a . cheat sheet that summarises ES6 Happy hacking! Edit 20/12/2016: Reworded intro, and corrected some typos that were pointed out. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories