How's your ES6?

Learn enough to get by with this interactive cheatsheet.

Oh man, I love JavaScript, but you show me this stuff and it just doesn't look like anything I'm used to.

I love what you're teaching us, but I just can't wrap my head around all this weird syntax we're using.

Sound like you? Keep scrolling.

This is an interactive ES6 cheatsheet. It uses a series of small examples to show you the important parts of new JavaScript syntax. All code is editable and runnable so you can play with it all you want.

Many of my readers and workshop attendees complained that modern JavaScript syntax looks weird at first. They could understand what I was saying, but couldn't read the code. So I built this cheatsheet to fix that.

In 5 minutes you will be able to read and understand modern JavaScript code. Using it on your own might take longer, but you can do it! :)

Come back any time you're stuck.

Learn ES6

That's me at WriteTheDocs Prague 2014

How to use this ES6 cheatsheet

Welcome to the interactive ES6 Cheatsheet. It's organized into 9 sections and 31 code samples. Each section has two columns: On the left, there's the old way of doing things. It uses the JavaScript you already know to do something simple. On the right, there's the new way of doing things. It uses ES6 to show you how the same result can be achieved with better syntax.

Code samples have two tabs. The first shows you the code, the second shows you what happens when you run it. You can and should edit the code. It runs straight away :)

This ES6 cheatsheet is not an exhaustive list of new features in JavaScript. It's meant to show you the most commonly used features. And yes, ES7/ES2016 became an official standard about 40 days ago. I will add those features soon.

Table of Contents

  1. Variable Declarations
  2. String Templates
  3. Destructuring
  4. Arrow Functions
  5. Function Parameters
  6. Classes
  7. Getters/Setters
  8. Modules
  9. Data Structures

PS: this website doesn't work without JavaScript enabled

Variable Declarations

One of the biggest sources of bugs and confusion in JavaScript has been variable scoping. Without var everything was global, with var it was better but still weird. ES6 brings us let and const with proper lexical scoping, which makes it easier to understand where a variable is and isn't defined.

Constants follow the same scoping rules, but their value cannot be reassigned. const protects you against accidentally changing variables. It's good to use it for everything by default.

Careful, though. Constants are tricky with arrays and objects. The reference becomes constant, but the value does not.

I want this!
Pay what you want

The whole cheatsheet ($0+) and free updates for life.

If you got this cheatsheet in the past,
click the link in your email.

Swizec Teller

Hey, I built this cheatsheet because a lot of people at my workshops and readers of my books said they struggled with ES6 syntax. It's meant to give you the basics in about 5 minutes.

That's me on the right. Modeling my new glasses.

I've published a couple of JavaScript books, given talks at many conferences and am listed as a reference on 2 wikipedia articles. You can find out more about me, by googling my name.