ES 6 cheat sheet

• template litterals
• arrow functions
• string functions
• destructuring
• for of loop
• Array methods
• Spread operator (…)
• Rest operator (…)
• Object litterals updates
• fetch
• Promises
• Glossar
• To checkout …

default variables

calculateBill(total, tax = 0.13, tip = 0.15) {
 return total + (total * tax) + (total * tip);
}

calculatBill(100);
// or
calculateBill(100, undefined, 0.25);

template litterals

(using backticks and ${varname})

// concatenate string
`Hello ${variable}`;

// do js within {}
`The result is ${number * 7}`

// functions within {}
`The result is ${calculateResult()}`

// Markup, whitespace / new lines are allowed within backticks
`<div>
    <h1>${title}</h1>
    <p>${content}</p>
</div>` 

// markup population using prototype.map()
`<ul>
   ${items.map(item => `<li>${item.name} – ${item.price}</li>` )}
</ul>`

arrow functions

note: other than with regular fuctions this refers to the parent

// implicit return
const timesTen = number => number*10; 

// is the same as ...
var timesTen = function(number){
    return number*10;
}

timesTen(4); // 40

string functions

const str = 'Hello World';

str.startsWith('Hello') // true
str.endsWith('rld') // true
str.includes('ello') // true

note: All the functions above are case sensitive. startsWith and endsWith takes an optional second parameter for an offset

const str1 = 'You can stand under my umber';
const str2 = 'ella, ';
const str3 = 'eh, ';

console.log (str1 + str2.repeat(3) + str3.repeat(3)); // You can stand under my umberella, ella, ella, eh, eh, eh, 

destructuring

objects

// the object
const person = {
  'fname' : 'Jon',
  'lname' : 'Doe',
  'age' : 31,
  'skills' : {
    'programming' : {
        'html' : 'good',
        'js'   : 'mediocre'
    },
    'social' : {
        'communication' : 'bad'
    }
  }
}

// top level variables
const {fname, lname, age} = person;

// top level vars from nested objects
// renaming (js => javascrpt)
// assigning default value (css = 'avarage')
const {html, js:javascript, css = 'average'} = person.skills.programming;

console.log(fname); // 'Jon'
console.log(html); // 'good';
console.log(javascript); // 'mediocre';
console.log(css); // 'average'

arrays

same as above, but uses square brackets notation.
note: as an extra the example below shows off the split function to generate an array from a string

// data as string
const data = "Billie Holiday,Strange Fruit,1939,78 rpm";

// assign variables on data splited into an array
const [artist,title,released,format] = data.split(',');

console.log(`${title} by ${artist}, released in ${released} on ${format}`);
// "Strange Fruit by Billie Holiday, released in 1939 on 78 rpm"

note: it’s also possible to use the rest opperator …

const [artitst,title, ...details]

console.log(details) // ["1939","78 rpm"]

swap variables (w/ destructuring)

let current = "project-b";
let previous = "project-a";

[current,previous] = [previous,current]; // currrent = "project-a" and vice versa

using destructuring for function params

instead of a list of params use an object (wrap params whithin { … }).
that way they are going to be destructured which means you can call the function with params in any order and skip any param (as long as theres a default value defined)

function calculatePrice( { price, shipping = 15, tax = 0.08 } ){
  return (price + shipping) * ( 1 + tax );
}

const price = calculatePrice({ shipping: 20, price: 200 });
// price = 237.6;

💡💩 caveat: if the function is called without any params (even if all the params have a default value assigned) an error will be thrown because an object is expected. To fix this, the object would need a default value itself:

function calculatePrice( { price = 200, shipping = 15, ... } = {} ) {
  // ...
}

for of loop

for (const item in items){
   // do sth with item
}

pros: lean syntax (not as with for loop), able to use break / continiue etc. (not as with forEach loop), ignores added properties (e.g. to prototype) which would be shown in a for in loop. Works on all itterables
cons: does not work with object(s). Something like Object.entries() (ES 2017) or Object.keys(object) (converts keys of objects in an array) would be necessary

With params destructuring and generators ( → .entries() ), the index can be easily retrieved as well:

// destructing + generator
for ( const [i, item] of items.entries() ){
  console.log( `${item} at index ${i}` ); 
}

// arguments keyowrd (returning all passed in params)
function logOutArgs(){
  for ( arg of arguments ){
    console.log( `Argument ${arg} received.`);
  }
}
logOutArgs("Hello",2,"booyah!");

Array methods

Array.from()
turns array-like collections (NodeLists etc) into a propper array.
Takes a map function as optional second arg.

const el = document.querySelector(".list-element"); // NodeList
const elArr = Array.from(el); // Array

// with map function
const elArr2 = Array.from(el, el => { /* do some mapping, eg. return el.textContent */ })

Array.of() builds an array from the arguments

const fibonacci = Array.of(1,1,2,3,5,8,13); // [1,1,2,3,5,8,13]

.find( callback )
loops over the array, returns the value of the first element in the array that satisfies the provided testing function (MDN)

const data = [
  {
    "id":"Aq415",
    "content":"Hello World"
  },
  {
    "id":"234nA",
    "content":"Some other text"
  },
  {
   ...
  }
];

const entry = data.find( entry => entry.id === "234nA" ); // returns only the object that matches the criteria

.findIndex( callback ) similar to .find() but returns the index of the first element instead of the value.

.some( callback ) retuns true if at least one of the array elements satisfies the provided testing function

.every( callback ) retruns true if every array elements meets the condtition.

Spread operator (…)

expands all items of an itterable.
Can be used to copy or concatenate arrays:

const arr1 = [1,2,3];

// copy
const arr1Copy = [...arr]; // [1,2,3] like arr1 but independant from it

// concatenate
const arr2 = [4,5,6];
const arrBoth = [...arr1,...arr2]; // [1,2,3,4,5,6]
// where [arr1,arr2] would result in [[1,2,3],[4,5,6]]

// concatenate and expand
const arr0to7 = [0,...arr1,...arr2,7] // [0,1,2,3,4,5,6,7]

Rest operator (…)

bundles reaming arguments in an array. Use for function definition or destructuring (see destructring > arrays above)

function createItem( name, price, ...properties ){
  return `${name}: ${price}USD. ${properties.join()}`;
}

const newItem = createItem('Shirt', 9.95, 'machine washable', 'limited edition', 'signed'); // "Shirt: 9.95USD. machine washable,limited edition, signed";

Object litterals updates

// when creating an object from variables with the same name it suffices to just write that var name

const fname = "Jon";
const lname = "Doe";
const person = { fname, lname } // instead of { fname: fname, lname: lname }

// while creating object methods, the function keywortd and the colon can be omitted


const createItem = {
  // old
  calculatePrice: function(){
    ...
  }
  // new
  calculatePrice() {
    ...
  }
}

fetch

Fetches resources. «A modern replacement for XMLHttpRequest» (caniuse)
Returns a promise.
Implementet in all modern browsers (which obviously means no IE)

// the fetch
const postPromise = fetch("https://code.lrnz.ch/wp-json/wp/v2/posts");

// working with the promised data
postPromise
    .then( data => data.json() ) // we want json
    .then( data => { /* do something with post data */ } )
    .catch( error => { /* fetch error */ } )

(for a fetch() + JSON deep dive see here)

Promises

// promise constructor returns takes a function with two params: resolve if promise is resolved and reject if an error is thrown.

const promise = new Promise( (resolve, reject) => {
  const data = /* some data eg from DB query */;
  if( data ){
    resolve( data ); 
  }else{
    reject( Error('error message') );
  }
});

promise
  .then( (data) => { /* do something with the resolved or rejected data */ } )

Example: Get data of a post from its id using the WP Rest API and fetch().

function fetchPost(url, id) {

    const postData = fetch(url);
    return postData
        .then(data => data.json())
        .then(data => {
            const post = data.find(entry => entry.id === id);
            if (post) {
                return post;
           }
        })
        .catch(err => {
            console.error('Error fetching api data');
        });

}

// fetch data of this post (id:965)        
fetchPost('https://code.lrnz.ch/wp-json/wp/v2/posts', 965)
    .then(post => { console.log(post); })
    .catch(err => {
        console.error('Error fetching post');
    });

Stepping/chaining

If a promise is returned within a .then, it can be retreived with another (chained) .then

function getData( data => {
  return new Promise((resolve, reject) => {
     const d = /* do sth with data */;
     if( d ) {
       resolve( d );
     }
  });
});

function enrichData( data => {
  return new Promise((resolve, reject) => {
     if( data.details ) {
       resolve( data.details );
     }
  });
})

getData( someData )
  .then( data => {
    // first dataset arrived
    // call other function with the returned data
    enrichData(data)
  })
  .then( data => {
     // second, 'enriched' dataset arrived 
  })
  .catch( err => { /* ... */ } )

Promise.all()

Waits for all given promises (array as param) to be resolved until firing .then()

const promise1 = new Promise( ... );
const promise2 = new Promise( ... );

Promise
  .all([promise1, promise2])
  .then( ... )

Glossar

itterable : everything that can be looped over (array, dom collection, map, set … ). 💡💩 objects are not itterable!

To checkout …

Things seen on the way or reminders of functions/methods and properties. Maybe not all ES6 but worth checking out.

• el.textContent : property, represents the text content of a node and its descendants. see: Node.textContent
• arr1.concat(arr2) : merges two or more array. see: Array.prototype.concat()
  • alternatively use spead operator (…) to achive the same:
    [...arr1, ...arr2]

Credits

ES6 allmost all examples above were written down while following the ES6 for everyone course by Wes Bos.
Additional notes coming from the MDN Web docs.