ES6 and JavaScript

in Front-end

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:

// ES6 string concatenation example using template strings

var first_name = "Jon"
var last_name = "Friskics"
var current_project = "a Swift course for Code School"

console.log(`My name is ${first_name} ${last_name} and I'm currently working on ${current_project}`);

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.

console.log("My name is " + first_name + " " + last_name + " and I'm currently working on " + current_project);

Classes

It’s a pretty common practice in modern JavaScript to emulate classical object-oriented languages using function prototypes. For example, in ES5, you might represent that name and project data inside of a function (emulating classical properties), and extend that function’s prototype with other functions that operate on that data (emulating classical methods). Here’s some ES5 code:

// ES5 class-ish example

var Person = function Person() {
  this.first_name = "Jon";
  this.last_name = "Friskics";
  this.current_project = "a Swift course for Code School";
}

Person.prototype.personInfo = function() {
  console.log("My name is " + this.first_name + " " + this.last_name + " and I'm currently working on " + this.current_project);
}

var jon = new Person();

jon.personInfo();

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:

// ES6 class example

class Person {
  constructor() {
    this.first_name = "Jon";
    this.last_name = "Friskics";
    this.current_project = "a Swift course for Code School";
  }

  personInfo() {
    console.log(`My name is ${this.first_name} ${this.last_name} and I'm currently working on ${this.current_project}`);
  }
}

var jon = new Person();

jon.personInfo();

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!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Jon Friskics

Content Producer and Developer at Code School. Enjoys building iOS and web apps, and then figuring out the best way to teach people how to build their own.

Might We Suggest