Article Image

JavaScript is in the process of getting a big fancy makeover, and while most of its new features aren't widely supported by browsers just yet, there is an easy way start using it in your projects.

I'll walk through a few of the features that I think are neat as a newcomer to JavaScript and talk a bit about how to start using ES6.

Also, ES6 is officially(?) known as ES2015. Web folk are upset about that—or something? The idea, however, is that there will be an ES2016, an ES2017, and so on.

tl;dr

To start using ES2015, check out Babel.

New stuff

Classy

The newest iteration of JavaScript allows you to create objects that look a lot like classes. You may notice a few extra unfamiliar bits in here, more on those coming up.

class Whale {
  constructor(name, pals = []) {
    this.name = name;
    this.pals = pals;
  }

  swim() {
    return `${this.name} is going for a swim. Always.`
  }

  static definition() {
    return 'Sort of like a fish, but huge.'
  }
}

Which lets you do this:

let moby = new Whale('Moby');

moby.name;   // > "Moby"
moby.pals;   // > []
moby.swim(); // > "Moby is going for a swim. Always."

Whale.definition(); // > "Sort of like a fish, but huge."

To make a comparison with something more familiar, the constructor method here is very much like Ruby's initialize: it sets certain attributes, or states, for a newly created instance of the object.

Similarly, swim is an instance method on the object, and definition is a static, or class method.

It may be worth noting that this is not a class; it's still an object. This new syntax just provides a cleaner way to build and maintain an object, rather than making a big mess with prototype. It's sugar to provide smoother abstraction.

Parametric

As the previous example demonstrated, you can now give function parameters default values.

function sayHi(thing = 'dinosaurs') {
  return `Hi ${thing}.`
}

sayHi();  // > "Hi dinosaurs."

Awesome strings?

Interpolation is a new thing for JavaScript, and new things are great. ES2015 also introduced multi-line strings, so that the following is totally valid. Notice the back-ticks in both of these. You need those.

let blogIdea = `I was going to make this whole blog Justin
Timberlake-themed. I had so many great gifs: some old school
curly haired JT, some with his stuff in a box.
But, you know, limits are good. Oh well.`

Unfortunately, my syntax highlighting is a little whompsy as it doesn't know ES6 just yet, but this a completely legitimate string.

Let is so hot right now

You may have noticed I'm using let rather than var—that's because let is the new var. var is still totally valid JavaScript, but let has fixed some of the common issues related to variable scope, particularly in blocks. The general internet consensus is that let should pretty much be the standard from here on out.

ES6 also introduces constants, or const. Constants, once assigned, cannot be reassigned. They are read-only. If, however, you assign an object to a constant, you cannot reassign the constant but you can edit properties of the object.

const yearbook = "Never change"

Arrow functions

That sort of just sounds cool on its own. Arrow functions are a new way to declare functions, that give you a few added benefits.

One of the biggest is that arrow functions automatically bind this. This eliminates the strange .bind(this) that is usually tacked onto callback functions. Under the right conditions, the arrow function also provides a refreshing bit of brevity.

// Old school...
[0, 1, 2].map(function(e){
  return e + 1;
});
//  > [1, 2, 3]

// With an arrow function...
[0, 1, 2].map(e => e++);
//  > [1, 2, 3]

In the case of a single line arrow function, the return can be implicit. It may be hard to see in this example, but => is actually a substitution for the function keyword and can be used to declare functions anywhere in your code.

How to use it

The best way to actually start writing code in ES2015 is to use the Babel compiler. Babel allows you to write JavaScript according to ES6, and then compiles it into the ES5 code that would be necessary to make it work. Simply plug these compiled files into your project and you are set.

To get started, simply install the Babel CLI using the instructions here. Once you've done that, you can compile individual files via the command line tool and Babel will print the compiled code.

$ babel script.js
# Everything you need

Or you can designate an out-file for the compiled code:

$ babel script.js --out-file script-compiled.js

However, I find the most useful way to work with Babel is to set up an entire directory to compile, and then let Babel watch (using the -w flag) for any changes made to files within that directory. So if I am writing my code in a directory named es6_js/ and I want all of the files within that directory to be compiled to compiled_js/:

$ babel es6_js/ -w --out-dir compiled_js/

I would then include each of the compiled files in to my project. Note that running Babel with the watch flag will take over a Terminal window, so it is best to simply open another tab and let Babel run in the background while you are writing your code.

Blog Logo

Drew Price


Published

Image

Blog & stuff

A blog about some things.

Back to Overview