JavaScript ES6

Examining the high level differences between JavaScript ES6 and JavaScript ES5.

Scroll down...




As a JavaScript programmer, you're going to have to live two lives.

In one of these lives, you will be an ES5 programmer, bound by the traditions of yore, you sidestep a handful of edge cases with quiet dignity; you know there may be a better way, but you keep your head down, perform some perfunctory syntax rituals, and get the job done.

In your other life, you are an ES6 programmer. You have no time for verbosity, never again will you be forced to type the 8 characters of the word “function,” like some servile code monkey. You don't suffer edge cases gladly. For every idiosyncrasy of ES5, you have a countermeasure.

Two Lives

As a learner, it would be wonderful if there was simply one way to do everything. While JavaScript is getting better all the time, it cannot escape its past. The features you can expect to use are dependent on the browser your user is running. And for some reason, in dim grids of desaturated cubicles, incubating in the alphanumerically indexed sectors of countless, nondescript commercial buildings, which themselves must have been designed by some depressed architect as a call for help, a few antediluvian beige boxes are still running Internet Explorer 6.

Do not be overwhelmed by this reality. Think of ES5 as the rich, storied landscape, whose crumbling arcades and pockmarked boulevards are indicative not of disarray, but of culture and history. And ES6 is the dope fleet of Segways with which you and your hip tourist friends can cruise around, hopping between bars and restaurants without getting your shoes muddied by any of said history. ☹️

Dope Fleet

When To Learn ES6

A lot of ES6 amounts to either shortcuts for common JavaScript operations or workarounds for ES5 edge cases. All ES5 syntax is valid ES6 syntax. For these reasons, it will often make sense to learn the old way first. Only learning the shortcut for something may prevent you from understanding what is actually going on. Likewise, teaching you how to avoid an edge case before you understand what the edge case is, will make the solution seemed contrived and pointless.

We will layer in ES6 features where they make sense, but if you understand ES5 first, then you will be delighted by the ES6 improvements, rather than being overwhelmed by too many options. However, possessing a high-level awareness of the differences can be helpful. ES6 Features is a great site showing off the new features as well as how to implement them in ES5. Don't memorize all of these—and certainly do not feel the need to understand everything—but if you end up struggling with something in ES5, you may remember that there’s an ES6 solution. And that’s when you should see if there’s a nicer ES6 implementation.

How to use ES6

Many of the most recent versions of the major browsers support ES6 syntax. You can see what percentage of ES6 features are supported by many browsers here. This means you can open up your browser’s console and start writing ES6 there. Tools like JS Bin let you select an ES6 option as well. We will take a closer look at how to run JavaScript in your browser in the next lesson.

Thanks to features like auto-updating, the percentage of people running browsers with good ES6 support is higher than ever, but it is still not 100%. But don't fret! If you need to support older browsers, the JavaScript community's got you covered. Luckily there are tools like Babel.js which  transpile new features into a syntax that should work in virtually all browsers that run JavaScript. This basically runs through your code and outputs a rewritten version that uses ES5 (basically what you see on ES6 Features). Yet we won’t need these tools until we are deploying our projects to the web, so we can hold off on that for now.

Wrapping Up

While one could simply learn ES6 exclusively, making sure to always transpile one’s code, you probably would have a hard time. Many code examples on the web are not written in ES6 syntax, and even then, ES6 is mostly new features or shortcuts, so you’d still need to know the old way of doing things. So we’re going to take a parallel approach, teaching you ES5 first and sprinkling in some ES6 knowledge when it is truly useful or when it will make your life easier. The difference is really an illusion, ES6 is just another layer of history on the great palimpsest that is the ECMAScript spec.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: How to Code JavaScript Online