Es6 Cheatsheet



Cheatsheet for the JavaScript knowledge you will frequently encounter in modern projects. ES6 modules are used to access variables or functions in a module explicitly exported by the modules it imports. I highly recommend to take a look at MDN resources on import/export (see external resources below), it is both straightforward and complete. Enzyme v2 cheatsheet (devhints.io) (old version) 0 Comments for this cheatsheet. Devhints.io / Over 352 curated cheatsheets, by developers for developers.

ES6 New Features:

Arrows

Arrows are a function shorthand using the => syntax.

Enhanced Object Literals

Es2016

Object literals are extended to support setting the prototype at construction,shorthand for foo: foo assignments, defining methods and making super calls.

Es6 Cheatsheet

Template Strings

Let + Const

Block-scoped binding constructs. let is the new var. const is single-assignment. Static restrictions prevent use before assignment.

Notes:

  • You cannot change value of a const variable after you create it.
  • let and const varaibles are never hoisted to the top of their scopes.
  • let has major advantage of rebinding the loop variable on every iteration, so each loop get its ‘own’ copy, rather than the globally-scoped variable.

Iterators + For..Of

Generalize for..in to custom iterator-based iteration with for..of.

Generators

Generators simplify iterator-authoring using function* and yield. A function declared as function* returns a Generator instance. Generators are subtypes of iterators which include additional next and throw. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).

Unicode

Es6 Cheatsheet

Non-breaking additions to support full Unicode, including new Unicode literal form in strings and new RegExp umode to handle code points, as well as new APIs to process strings at the 21bit code points level. These additions support building global apps in JavaScript.

Modules

Prior to ES6, we used libraries such as Browserify to create modules on the client-side, and require in Node.js. With ES6, we can now directly use modules of all types (AMD and CommonJS).

Exporting in CommonJS

Es6 Cheatsheet

Exporting in ES6

Named exports:

Exporting a list of objects:

Export functions, objects and values (etc.) simply by using the export keyword:

Export default bindings:

Reference

One of my favourite blog posts on the internet is Steven Luscher‘s guest post on the Babel blog, React on ES6+. It manages to be both incredibly helpful and easy to understand, while being short enough that when you hit the end you’re like “wait, is that it?”.

And as it happens, one of the most frequent requests I get is for an updated version of my React cheatsheet, showing the newer React component syntax using ES6 classes and React.Component.

So what I’m trying to say is I’ve finally gotten my act together and made your React/ES6 cheatsheet. And I’ve based it on Steven Luscher’s post. I’ve even made it free; as in speech, and as in beer:

Click to get the full PDF. No mailing lists or other funny stuff.

I’ve also updated the original React cheatsheet:

  • I’ve added ref functions
  • I’ve removed some soon-to-be deprecated methods
  • And I’ve tweaked the text for component instances

The source for the new cheatsheet (and all my cheatsheets) is available on GitHub. But if rendering it sounds like too much effort, there is an easier way to get a high-quality PDF. And it has the bonus that it comes with two other PDF cheatsheets, amongst other useful things. Here it is:

I will send you useful articles, cheatsheets and code.

I won't send you useless inbox filler. No spam, ever.

Have something to say? I love hearing your questions and offers! Leave a comment or send me an e-mail at james@jamesknelson.com. I’m looking forward to hearing from you!