Skip to content

Instantly share code, notes, and snippets.

@brianblakely
Last active August 27, 2021 16:22
Show Gist options
  • Save brianblakely/f40e0d3222d844f2138f to your computer and use it in GitHub Desktop.
Save brianblakely/f40e0d3222d844f2138f to your computer and use it in GitHub Desktop.
ES6 ELI5
Foreword
===
These short descriptions will familiarize you with new things in ES6,
quickly and simply.
A lot of details are ignored to aid this purpose. This content is only intended
as a starting point or brief refresher.
Most of the descriptions use pre-ES6 JavaScript as a frame of reference.
You should be comfortable with that before reading this.
Finally, if you want an ELI>5:
http://www.2ality.com/2014/08/es6-today.html
Destructuring
===
The syntax for Arrays and Object Literals can be remixed to create variables
and swap values around elegantly.
Symbols
===
A new primitive, like String or Number, that always represents a unique value.
This is good, because you might accidentally make a String or Number with the
same values, but you can't reproduce the same Symbol twice.
Also, objects used to only accept Strings for property names, but now
accept Symbols as well.
Classes
===
This doesn't really add anything new to JavaScript, but gives object creation
a nicer "API." It's more like how you do it in many other languages.
Iterators
===
A formal definition for "things you can loop over."
Iterators have "next" functions that return an object with the properties
"value" and "done."
Some types of iterators:
* Strings
* Arrays
* Maps
* Sets
* Generators
But any object can be an Iterator by giving it a Symbol.iterator function.
for-of loops are new and loop over any Iterator so you can see the values
it returns.
Generators
===
Functions that can return more than once.
Each time they are run, they pick up where they last returned,
until they return again or reach the end.
To do this, they use the "yield" keyword instead of "return." They can still
use "return," but it works the same way as in regular functions.
You create a Generator by putting an asterisk before the function name, like this:
function *myFunction() {}
Or, for anonymous functions:
function *() {}
Map and Set
===
A Map is like an Object Literal, except anything can be used as a key, not just
Strings and Symbols.
A Set is like an Array, but it only has unique elements. Repeat elements
you add will be ignored.
They both have "Weak" versions that you can't loop over, but they are more
responsible with memory usage.
Template Strings
===
They're Strings that use `ticks` instead of "quotes."
You can make a new line inside them without breaking them.
You can put variables and other code inside them.
Arrow Functions
===
A shorter way to write functions.
The "this" value inherits from its current parent, which is good for something
like setTimeout.
Proxy
===
Change what happens when JavaScript does things to an object, such as
accessing or deleting its properties.
It's like getters and setters on steroids, but Proxy can do a lot more
than getting and setting.
Reflect
===
A toolbox of basic JavaScript functionality, like setting variables and calling functions.
The opposite Proxies, which change what happens when JavaScript does things to objects.
Reflect just does those things to objects.
let
===
It's just a better var. There is no reason to use var anymore.
const
===
It's like var, but you can't change the value of the variable after it's created.
But if the variable contains an object, you can change that object's properies.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment