JavaScript has progressed a lot over the past few years. Whether you are new to JavaScript or have some experience and want to quickly get up to speed with the most commonly used features in modern JavaScript, this post is for you. In this article, I’m going to share with you the features I use on a daily basis. These features include: Template literals and let const Arrow Functions Destructuring This is not a comprehensive list of all the new features since ECMAScript 2015 (ES6). But these are the 20% of features that you use 80% of the time. Plus, this article is a work in progress. I’ll be adding more features to this list. For now, I want to publish this today! All these new features are . If you want to try out any of the code snippets below, simply open up Chrome Developer Tools and type the code. natively supported in all modern browsers So, let’s get started! Template Literals Before ES6, we had to deal with these ugly string concatenations: name = ; message = + name + ; var 'Mosh' var 'Hi ' ',' Now, with template literals (previously called template strings), we can define a string with placeholders and get rid of all those concatenations: name = ; message = ; var 'Mosh' var `Hi ,` ${name} Note that I’m using the backtick character here. As funny as it sounds, nobody knew what backticks were until Angular 2 was released! That’s the character before number 1 on your keyboard. To add a placeholder in a template literal, we use the syntax. You can replace “expression” with any JavaScript expressions. Here, we are adding the variable there. You can also call a function or pass any JavaScript expressions that result in a value. ${expression} name Another benefit of using template literals is that they can expand multiple lines. They are particularly useful when composing email messages: message = ; var ` Hi , Thank you for joining my mailing list. Happy coding, Mosh ` ${name} let and const Prior to ES6, we used the keyword to define variables. The scope of a variable defined using the keyword is the entire enclosing function. Here’s an example: var var { ( x = ; x < ; x++) { } .log(x); } ( ) function doSomething for var 0 5 // Technically, x should only be scoped to this block because this is // where we have defined x. // But it turns out that x is available here as well! console // 5 That’s not how most if not all other programming languages behave! Variables defined within a block should be scoped to that block only. In this example, should not be accessible outside of the block. x for Another issue with the keyword is that if you use it at the top level outside of a function, it creates a property on the global object: var x = ; .log( .x); var 1 console window // 1 ES6 introduced 2 new keywords for resolving these issues: and . Both these keywords define variables that are scoped to the containing “ ” not “ ”: let const block function { ( x = ; x < ; x++) { } .log(x); } ( ) function doSomething for let 0 5 // With the "let" keyword, now x is only accessible in this block. // x is out of the scope here console // x is not defined With we can define a constant. So we cannot reassign it later: const x = ; x = ; const 1 2 // throws "Assignment to constant variable." Also, unlike the keyword, and don’t create a property on the global object if you use them at the top level: var let const x = ; .log( .x); let 1 console window // undefined So, here is what you should take away: Ditch the keyword. Use only and . var let const Prefer to . Use only if you need to re-assign the identifier; otherwise, use to prevent accidentally re-assigning a constant. const let let const Arrow Functions My favorite feature in ES6! Inspired by lambda expressions in C#, arrow functions give you a clean and concise syntax for writing function expressions. Here’s a function expression in ES5: square = { number * number; } const ( ) function number return With arrow functions, we get rid of the keyword and put a fat arrow between the parameters and the body of the function: function => square = { number * number; } const ( ) => number return If our function is a one-liner and returns a value, we can drop the keyword as well as the curly braces: return square = number * number; const ( ) => number Isn’t that much cleaner and more concise than the former syntax? But wait, we can make this even shorter: If our arrow function includes only a single parameter, we can even drop the parenthesis: square = number * number; const => number What if our arrow function doesn’t have any parameters? We need to use a pair of parenthesis: sayHello = { .log( ); }; const => () console 'hello' Arrow functions are particularly useful when you need to pass callback functions as arguments: activeJobs = jobs.filter( { job.isActive; }); activeJobs = jobs.filter( job.isActive); // ES5 var ( ) function job return // ES6 const => job Arrow functions, unlike normal functions, don’t rebind . Does this pattern look familiar to you? this { that = ; orderService.store(order, { that.result = result; }); } // ES5 ( ) function onSubmit // Keep a reference to "this" so we can use it in the inner function below. var this ( ) function result // In JavaScript, ever function defines its own "this" value. So, "this" in this inner function // here is different from "this" in the onSubmit() function. That's why we had to keep a // reference to "this" and store it in "that". Now, we can use "that": Arrow functions, unlike normal functions, don’t rebind . They use the value of the enclosing execution context. So, if we replace the inner function above with an arrow function, we don’t need to keep a reference to anymore. this this this { orderService.store(order, result => { .result = result; }); } // ES6 ( ) function onSubmit // Since we're using an arrow function here, "this" references the "this" value of the containing function // (onSubmit). Arrow functions don't re-define "this". this Destructuring Destructuring is an expression that allows us to extract properties from an object, or items from an array. Let’s say we have an address object like this: address = { : , : , : }; const street '123 Flinders st' city 'Melbourne' state 'Victoria' Now, somewhere else we need to access these properties and store their values in a bunch of variables: street = address.street; city = address.city; state = address.state; const const const We have this repetitive code over and over: “address.” repeated 3 times. Object destructuring gives us a short and clean syntax to extract the value of multiple properties in an object: { street, city, state } = address; const That’s it! This code is exactly equivalent to the snippet above. We use curly braces on the left to destructure the address object. Inside the braces, we’re defining 3 variables: , and . Their values will be extracted from the corresponding properties in the address object. street city, state Note that we don’t have to list all the properties in the address object. Maybe we’re interested only in the property: street { street } = address; const Object destructuring is particularly useful when you’re dealing with nested objects: person = { : , : { : { : , : , : } } }; const name 'Mosh' address billing street '123 Flinders st' city 'Melbourne' state 'Victoria' Without destructuring, we would have to write this ugly and repetitive code: street = person.address.billing.street; city = person.address.billing.city; state = person.address.billing.state; const const const // So annoying! Now, we can achieve the same result using a single line of code: { street, city, state } = person.address.billing; const We can also destructure arrays but we use square brackets ([]) instead of curly braces ({}). Let’s say we have an array and we want to extra the first and second item and store them in two different variables: values = [ , ]; first = values[ ]; last = values[ ]; // ES5 const 'John' 'Smith' const 0 const 1 // ugly! With destructuring, we can re-write the above code like this: values = [ , ]; [first, last] = values; // ES6 const 'John' 'Smith' const If you are looking to learn JavaScript in depth, I highly recommend Mosh’s JavaScript courses. The link to all of the courses are below: JavaScript Basics for Beginners Object-Oriented Programming in JavaScript The Complete Node JS Course
