ES2015 Cheat Sheet

README.md

ES2015 Cheat Sheet

Declarations

let name = 'Scott';

console.log(name);

let array = ['Scott', 'Eric', 'Mike'];

function callFunction(item, cb) {
	cb();
}

for (let i = 0, length = array.length; i < length; i++) {
    callFunction(array[i], function () {
        console.log(array[i]);
    });
}

const MAX_LOGIN_ATTEMPTS = 5;

console.log(MAX_LOGIN_ATTEMPTS);

Functions

function displayUser(name = '') {
	console.log(name);
}

displayUser();

function displayUserWithOptions(name = '', { email, lastLogin, theme = 'blue' } = {}) {
	console.log(name);
	console.log(theme);
}

displayUserWithOptions();

function displayUsers(...users) {
	console.log(...users);
}

displayUsers('Scott', 'Eric', 'Mike');

Objects

Initializer

let username = 'Scott';
let emailAddress = '';

let user = { username, emailAddress };

Destructing

let user = { username: 'Scott', emailAddress: '', lastLoginAttempt: null };

let { username, emailAddress, lastLoginAttempt } = user;

console.log(username);

let user = { username: 'Scott', emailAddress: '', lastLoginAttempt: null };

let { username } = user;

console.log(username);

Template Strings

let first = 'Scott';
let last = 'Doxey';

let fullName = `${first} ${last}`;

console.log(fullName);

Object.assign

function renderPolygon (points, options = {}) {

	let defaults = {
		lineWidth: 1,
		strokeStyle: '#000',
		fillStyle: '#eee'
	};

	let settings = Object.assign({}, defaults, options);

	console.log(settings);

}

renderPolygon([[0, 0], [100, 100]], { lineWidth: 2 });

Arrays

let users = ['Scott', 'Eric', 'Mike'];

let [a, b, c] = users;

console.log(a, b, c);

let users = ['Scott', 'Eric', 'Mike'];

let [a, , c] = users;

console.log(a, c);

let users = ['Scott', 'Eric', 'Mike'];

let [first, ...remaining] = users;

console.log(first, remaining);

let users = ['Scott', 'Eric', 'Mike'];

// for (let index in users) {
// 	console.log(users[index]);
// }

for (let user of users) {
	console.log(user);
}

let users = [
	{ name: 'Scott', isAdmin: false },
	{ name: 'Eric', isAdmin: true },
	{ name: 'Mike', isAdmin: false }
];

console.log(users.find( user => user.isAdmin ));

Maps

let user1 = { name: 'Scott', isAdmin: false };
let user2 = { name: 'Eric', isAdmin: false };

let totalReplies = new Map();
totalReplies.set(user1, 1);
totalReplies.set(user2, 2);

console.log(totalReplies.get(user1)); // 1
console.log(totalReplies.get(user2)); // 2

for (let [key, value] of totalReplies) {
	console.log(`${key} = ${value}`);
}

let user1 = { name: 'Scott', isAdmin: false };
let user2 = { name: 'Eric', isAdmin: false };

let totalReplies = new WeakMap();

totalReplies.set(user1, 1);

console.log(totalReplies.has(user1)); // true
console.log(totalReplies.delete(user1)); // true
console.log(totalReplies.has(user1)); // false

Sets

let languages = new Set();

languages.add('JavaScript');
languages.add('Objective-C');
languages.add('Swift');
languages.add('Swift');

console.log(languages.size); // 3

for (let language of languages) {
    console.log(language);
}

let language1 = { name: 'JavaScript' };

let languages = new WeakSet();

languages.add(language1);

console.log(languages.has(language1)); // true
console.log(languages.delete(language1)); // true
console.log(languages.has(language1)); // false

Classes

class Widget {

	constructor(name, options) {

		this.name = name;
		this.options = options;

		this.className = 'widget';

	}

	render() {

		return `<div class="${this.className}">${this.name}</div>`;
		
	}

}

let test = new Widget('test');
console.log(test.render());

class AdvertWidget extends Widget {

	constructor() {

		super(...arguments);

	}

	render() {

		return super.render();

	}

}

let advert = new AdvertWidget('advert');
console.log(advert.render());

Modules

export default function alertMessage (message) {
	alert(message);
}

export function alertMessage (message) {
	alert(message);
}

export function logMessage (message) {
	console.log(message);
}

function alertMessage (message) {
	alert(message);
}

function logMessage (message) {
	console.log(message);
}

export { alertMessage, logMessage };

import { alertMessage, logMessage } from './utils';

alertMessage('test');

import * as utils from './utils';

utils.alertMessage('test');

export const MAX_LOGIN_ATTEMPTS = 5;

const MAX_LOGIN_ATTEMPTS = 5;

export { MAX_LOGIN_ATTEMPTS };

Promises

function fetchUser(userId) {

    return new Promise (function (resolve, reject) {

        // It's bad practice to not leverage request's Promise. It isn't
        // used here so that it is easy to visualize the logic branching
        // of creating a Promise.

        fetch(`/api/user/${userId}`).then(function (response) {

            return response.json();

        }).then(function (data) {

            resolve(data);

        }).catch(function (err) {

            reject(new Error(err));

        });

    });

}

fetchUser(1).then(function (user) {

    console.log(user);

}).catch(function (err) {

    console.error(err);

});

Generators