Summary of code snippets arround modern JS, ES6, etc., as well as a couple of interesting resource links.
- ES5 standardized in 2009, widely supported.
- ES6 / ECMAScript 2015 standardized in 2015. Most modern browsers support it
- ES7 / ECMAScript 2016 is a smaller release from 2016.
Array.prototype.includeswill obsolete the old functionArray.prototype.contains. There is also a new exponent operator (2^3 ==2 ** 3) - ES8 / ECMAScript 2017 includes features like String Padding,
Object.valuesandObject.entries, Async functions, Trailing Commas**,** - ES9 will mostly lift template literal restrictions
References, useful and interesting links.
Resources
- ES6 Features
- New Features in ES8 and ES9
- Modern JS Cheatsheet by mbeaudru
- ES6 Cheatsheet by DrkSephy
Interesting Links
- Awesome JavaScript Tutorials, Frameworks, etc.
- Can I use - JS / CSS Browser Support
- 30 Seconds of Code - JS Snippets explained in 30 seconds
- Frontend Dev Resources - tons of Ressources (Conferences, Courses, Newsletter, etc.)
- You Don't Need jQuery
- Babel Online Transpiler
To make sure your audience can use the code you still might want to use Babel to transpile your modern JS. Make sure to check your sites features with Can I use and the ES6 Compat Table
Was actually part of ES5, to tell the browser to run in strict mode.
It is always block scoped, declared of the beginning of a file it has a global scope. But it always needs to be declared at the beginning of a block / function / file.
- Helps to write secure JS
- Prevents bad Syntax
- You cannot use undeclared variables in strict mode for example.
- ...
'use strict';
...var x; // Good old vars
const x; // Can not be changed
let x; // Block scoped, not accessible before assigning, can't get redeclared in scope// ES6
var eq = (para, parb) => para == parb;
// Old Vanilla JS
var eq = function(para, parb){
return para == parb;
}Immediatly Invoked Arrow Function need to be put in brackets
(() => {
console.log('Do it now!');
})()To replace immediatly invoked functions. See also immediatly invoked arrow functions.
{
let internal = "";
};
console.log(internal); // Will crashfunction f (x, y = 7, z = 42) {
return x + y + z
}ES6 String Interpolation / Template Literals Browser Support
const name = "Peter";
var helloMessage = `Hello ${name},
I hope you are doing good?
Warm Regards`;Set an object without having to define property names
var a = 'Hello';
var b = 'World';
// ES6 can do
var c = {a,b};
// which gets the same result as
var c = {a: a, b: b};So we can also...
let f = () => {
var a = 1;
var b = 2;
return {a, b};
};
var {a,b} = f();Another sample of function in an object
var funcinator = {
stateOfTheArt(instead, of){
},
theOldWay: function(you, know){
}
};Dynamic Generated Property Names
var propertyNameSuffix = "test";
var dynProp = {
["my-new" + propertyNameSuffix](){
}
};Usage of a JS Hashmap
let m = new Map();
m.set("Hell", "World");
console.log(m.get("Hell"));ES6 Classes Browser Support Currently it is not possible to have private variables in a class.
class CheatSheet{
constructor(lang, text){
this.lang = lang; // Declare Public Variable
this.text = text;
}
print(){
console.log(`# ${this.lang}
${this.text}`);
}
changeLanguage(l){
this.lang = l;
}
}
class PetersCheatSheet extends CheatSheet{
}
var myCS = new PetersCheatSheet("JavaScript", "Here will be some text for JS");
myCS.print();CommonJS Modules are supported in Node.JS by default, but can also be used by using RequireJS, Browserify or other Tools
// foobar.js
function foobar(){
this.bar = function(){
console.log('Hello bar');
}
}
// Expose variables / public variables
exports.foobar = foobar;//main.js
var foobar = require('./foobar').foobar,
myfoobar = new foobar();
myfoobar.bar(); // 'Hello bar'Was designed with influence of CommonJS and AMD modules.
Check out the full working sample
// Lib.js
class Lib {
increase(n) {
console.log(n);
return ++n;
}
}
export default Lib;// main.js
import Lib from './Lib.js';
var lib = new Lib();
lib.increase(99);Or as an alternative you could also
// foobar.js
export bar = function(){
console.log('Hello bar');
}// main.js
import * as foobar from 'foobar';
foobar.bar();To Include a ES6 Module in your HTML-File use
<script src="index.js" type="module"></script>ES6 Promise pattern, so there is no need anymore to use q, but be aware of no IE11 support To have browser support for IE11 and older browsers make sure to polyfill Promises
function logAsync(text) {
return new Promise(
function (resolve, reject) {
setTimeout(function(){
console.log(text)
resolve();
}, 100);
//reject("error");
});
}
logAsync("Log me async")
.then(result => { console.log("Here we go")})
.catch(error => { console.log("Something didn't work") });