ES 6 cheat sheet
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.textContentarr1.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.