JavaScript has always been a powerful tool for building experiences on the web, and you only need to take a sample of what web developer communities are talking about to see that it’s more popular than ever — it was even named the “ programming language of the year” last year by the TIOBE index, which tracks the relative popularity of languages. Just on the horizon is ECMAScript 6, or ES6, which will bring about the next evolution of the JavaScript language with tons of improvements, brand new features, and even some things that are new to JavaScript but might feel familiar if you know more than one language. There’s way more than can be covered in one blog post, so I’m going to highlight two things to give you a small taste of ES6’s changes: template strings and classes.

Template Strings

In ES6, concatenating strings is simple with template strings. Here’s a short example:

As you can see in the above code, you just need to wrap each variable that you want to print inside of a template strings block, which looks like this ${}, then make sure the entire string is enclosed in backticks (`), and you’ve got an easy-to-read string that’s comprised of multiple variables.

If you compare that to the way we create the same string in ES5 (which powers the current version of JavaScript), you can see the + and ” symbols make it a lot harder to read quickly.

As you can see in the above code, you just need to wrap each variable that you want to print inside of a template strings block, which looks like this ${}, then make sure the entire string is enclosed in backticks (`), and you’ve got an easy-to-read string that’s comprised of multiple variables.

If you compare that to the way we create the same string in ES5 (which powers the current version of JavaScript), you can see the + and ” symbols make it a lot harder to read quickly.

ES6 embraces those classical patterns by allowing you to declare something explicitly as a class and defining a constructor and any methods and properties inside. Here’s an ES6 equivalent to the example above:

This is actually just some syntactic sugar to help you clearly express the intent of your code and make it easier for you and others to read, but if you like emulating classes then you’ll probably find this really helpful.

How can I use this today?

Since the first full draft of ES6 isn’t finished, not many of the new features are currently supported in released browsers, which as of this post are IE10, Firefox 35, Chrome 40, and Safari 7. Thankfully, there are several different ways you can start using ES6 now. One of the most popular is 6to5 ( https://6to5.org), a transpiler that turns your ES6 code into an ES5 equivalent so it’s compatible with current browsers.

How do I keep up with ES6 changes?

It’s hard enough to learn a language that isn’t changing every day, and there’s no doubt you’ll see some ES6 content from Code School in the future. Until then, check out the amazing course Scott Allen and Joe Eames created for Pluralsight called JavaScript Fundamentals for ES6. It’s available for all Code School subscribers and gets you up to speed on many of the new ES6 tools.

UPDATE: Code School now offers an ES6 course called ES2015: The Shape of JavaScript to Come. 

You can also check out this compatibility table that Juriy Zaytsev created and manages so you can stay up to date on which browsers support which features and watch as it fills up with green over the next few months!

Have you started using ES6 yet? Let us know your thoughts and what features you like most in the comments section below!