5 Awesome Things You Can Do with ES6

By Alli Treman on October 30, 2017

5 Awesome Things You Can Do with ES6

Here at BizStream, we’re embracing ES6, also known as ECMAScript6 or ECMAScript2015. It includes a plethora of powerful features that make JavaScript better and a lot more fun to write. Browser support is growing, and when legacy browsers must be supported it’s easy to setup a workflow with babel to compile ES6 code into its ES5 counterparts. If you’re not sure what ES6 features will work in your browser of choice, Can I Use is an excellent resource.

Here are a few of the coolest features ES6 has to offer. This sampling is meant to entice you to give ES6 a try in your next project, and learn more about all of ES6’s fine features.

1. Better Variables

In ES5, the way to declare a variable in JavaScript was with the var keyword. This was fine, but it could be better. It’s like white bread. It’s fine, but it could be better, like San Francisco sourdough or a thick chewy slice of homemade wheat bread. In ES6 we get let and const. Let is for variables that are going to be re-assigned (such as an iterator in a for loop). Const is for variables that will not be reassigned. These new keywords help other developers better understand what’s going on in your code. They also provide errors if you do something like create a variable that’s never supposed to be reassigned and then try to reassign it. Here’s an example of let and const in practice. Let’s say you wanted to keep track of how many veggies you’ve eaten:

const myName = 'Alli';
let veggiesEaten = 0;
function eatVeggie() {
  veggiesEaten = veggiesEaten + 1;
  console.log(myName + ' has eaten ' + veggiesEaten + ' veggies.');
}
eatVeggie();

Since I’m not going to be changing my name, I use the const keyword. I am going to be changing how many veggies I’ve eaten, so I initialize the variable at 0 with the let keyword.

Can you use it? Let and Const are currently supported on the latest versions of all browsers, even IE11!

2. Deconstructed Objects and Arrays

In ES6, deconstructing is more than a hipster food trend where meals are taken apart into their ingredients, served on a slab, and marked up an extra $10. It’s way better. With deconstruction, you can take elements in an array or an object and assign them to new variables.

Let’s say you have a rating and a comment on a meatloaf recipe and the data for it looks like this:

const comment = {
     id: 47,
     username: ‘Captain Hyperlink’,
     email: ‘captain.hyperlink@bizstream.com’,
     stars: 5,
     text: ‘This was the best meatloaf I’ve ever had!’
}

You want to display just the username, number of stars, text at the top of the page. You can pull those values into top-level variables like this:

const { username, stars, text } = comment;
Then you can use the variables username, stars, and text to display this information!

Can you use it? Basic deconstruction as described above is supported in the latest versions of modern browsers. It’s not supported in IE. More advanced deconstruction has more limited browser support. You can read more about deconstruction and what browsers support here.

3. Template Strings

Using template strings (also called Template Literals) is as satisfying as your grandma’s best casserole: the perfect comfort food where all the flavors blend together in perfect harmony. The ES5 way of putting variables into strings is not harmonious. 

Going back to our meatloaf recipe comment, here’s how we’d display that information the old ES5 way:

username + ' rated this recipe ' + stars + ' stars: ' + text;

I don’t know about you, but I often forget to put spaces in the strings around my variable names, causing the text to be all scrunched together in a very unappetizing way.

In ES6 we can eschew that plus sign all together:
`${username} rated this recipe ${stars} stars: ${text}`;

These are also known as string literals or template literals. The first thing you’ll probably notice is the curly brackets around each variable preceded by a dollar sign. That’s how you tell JavaScript this is a variable.

The second thing you might notice is that instead of using single or double quotes, the entire string is wrapped in back-ticks: `` (this is the symbol that appears under the squiggly line ~ on your keyboard). You’ll want to use these when using template strings.

Can you use it? Template strings are supported in the latest versions of modern browsers. It’s not supported in IE.

4. Class syntax

It’s syntactic sugar—what’s going on behind the scenes is the same, it’s just how you write the code that’s different. It’s like baking cupcakes with a Kitchen Aid mixer vs. mixing by hand. You’re still getting cupcakes, but the Kitchen Aid mixer is way more fun to use.

Here’s the old way of creating a class-like object in JavaScript:

function Person(name, favoriteFood) {
  this.name = name;
  this.favoriteFood = favoriteFood;
  this.eat = function() {
  return this.name + ‘ loves to eat ’ + favoriteFood + ‘.’ 
};

var alli = new Person('Alli Treman', 'strawberries');
var sashimi = new Person('Sashimi Trekitty', 'peanut butter');

This works, but nothing in this syntax says to the programmer, “Hi, I’m pretending to be a class here!” (I say “pretending” because JavaScript doesn’t really have classes in the same way that some other programming languages do.)

Here’s the new ES6 way:

class Person { 
     constructor(name, favoriteFood) {
     this.name = name;
     this.favoriteFood = favoriteFood;
     }
     eat() {
     return ${this.name} loves to eat ${this.favoriteFood}.;
     }
}
const alli = new Person('Alli Treman', 'strawberries'); 
const sashimi = new Person('Sashimi Trekitty', 'peanut butter');

The second one is a lot cleaner and less error-prone. That said, not everyone is in love with ES6 classes and you may need to defend them in your code review if you choose to use them.

Can you use it? Class syntax is available to use in the latest versions of modern browsers, in other words, not IE.

5. Modules

Modules are like going to a tapas restaurant. Instead of filling your table with the perfect bite-sized portions of delicious food, you’re filling your JavaScript file with bite-sized JavaScript files! It helps you keep your code clean and organized instead of adding everything to one super-long and hard to read JavaScript file.

Usually, you’ll create exports in one file and import them into another. Let’s say we have an ingredients.js file which contains exports for adding different ingredients you’d use while baking. You can export those functions using the export statement:

export { addSugar, addFlower, addSalt, addBakingPowder, addCocoaPowder, addCinnamon }

Then you’re creating cake.js which needs to add some sugar. You’d import the add sugar function from your ingredients module using the import statement:

import { addSugar } from ‘ingredients’;

You could then use the addSugar function in your cake:

addSugar(2, ‘cups’);

Learn more about modules and how to use them here.

Can you use it? Modules are just beginning to be implemented in browsers, and IE doesn’t support them at all.

Have you used ES6 in your projects? What’s your favorite recipe? Tell us more in the comments!

Share This Post:

Twitter Pinterest Facebook Google+
Click here to read more posts
Start a Project with Us

About the author

Alli taught herself HTML when she was 12. Just for fun. After that, she was obsessed with figuring out everything a computer can do. Here at BizStream, Alli does front-end development. When she’s not making websites, Alli is going on adrenaline adventures and tackling her ambitious reading list. She has sweet baby boy named Simon and an extra fluffy cat named Sashimi.

View other posts by Alli

Subscribe to Email

Enter your email address to subscribe to the BizStream Newsletter and receive updates by email.