Skip to content

Instantly share code, notes, and snippets.

@davidcalhoun
Last active August 30, 2018 13:10
Show Gist options
  • Select an option

  • Save davidcalhoun/65e84230596c5ad1fa538cac55a488d2 to your computer and use it in GitHub Desktop.

Select an option

Save davidcalhoun/65e84230596c5ad1fa538cac55a488d2 to your computer and use it in GitHub Desktop.
ES6 cheatsheet

From Learncode YouTube: Part 1, Part 2

Transpile to ES5

  • babeljs.io - most mainstream
  • Traceur - competitor

Destructuring

Destructuring Objects

var foo = {
  bar: 1,
  baz: 2
};

Old way

var bar = foo.bar;
var baz = foo.baz;

New way

var {bar, baz} = foo;

Destructuring Arrays

var tenses = ["me", "you", "he"];

Old way

var firstPerson = tenses[0];
var secondPerson = tenses[1];

New way

var [ firstPerson, secondPerson ] = tenses;

Tip: Leave spaces around {} and [] to give visual cue that it's destructuring.

Practical example: useful for Promise.all

Old way
Promise.all([promise1, promise2]).then(results) {
  var results1 = results[0];
  var results2 = results[1];
}
New way
Promise.all([promise1, promise2]).then([ results1, results2 ]) {
  console.log(results1);
}

Destructuring - Object creation

Old way

var foo = 2;
var obj = {
  bar: 1,
  foo: foo
};

New way

var foo = 2;
var obj = {
  bar: 1,
  foo
};

Destructuring - Object creation to pass to a function

var name = "dave";
var age = 92;

Old way

some.method({
  name: name,
  age: age
});

New way

some.method({ name, age });

Objects: dynamic keys

Note: Not as commonly used

var name = "dave";

Old way (two-step process)

var obj = {};
obj["name" + name] = "some value";

New way

var obj = {
  ["name" + name]: "some value"
};

Destructuring arguments

Very useful

function calculateBmi(weight, height) {
  var bmi = weight / Math.pow(height, 2);

  if (bmi > max) {
    console.log("you're overweight);
  };

  if (callback) {
    callback(bmi);
  };
};


calcBmi({ weight, height, max: 25 });
calcBmi({ weight, height, callback: function(){} });

Old: needed to use opts object in fn. Now you don't need it

Order no longer matters

Default args

Old way New way
function calcBmi(max) {
if (typeof max === 'undefined') max = 25;
};
function calcBmi({ max = 25 }){};

Rename args

function calcBmi({ height: h }){
  console.log(h);
};

Template strings

Very useful

Old

var name = "dave";
var greet = "hi, my name is " + name + " and I like to " + action + ".";
// multiline is ugly
var greet = "hi, my name is\n" +
            name +
            "and I like to\n" +
            action;

New - backtics

var greet = `hi, my name is ${name} and I like to ${name}`;

// multiline

var greet = `hi, my name is ${name}
and I like to
${action}`;

Note: Atom editor has better default ES6 syntax highlighting comapred to Sublime

Block scoping

Let is the new var

if (true) {
  let b = 2;
};

// also can use in for, while

Const

const is same as let, in that it's block scope

const cannot be overwritten. Bar as an object can be mutated however.

Use const for everything when possible. Shouldn't have to change values of things. If you do need to, use let.

Classes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment