Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Features Examples of ES2015 - Some written, some curated.
/*======================================================
= ARROW FUNCTIONS & LEXICAL this =
======================================================*/
// OLD WAY
var squares = [1,2,3,4,5,6,7,8,9].map(function(value){
// this === window
return value * value;
});
// NEW WAY
var cubes = [1,2,3,4,5,6,7,8,9].map(v => v * v * v);
var cubesAnother = Array.from([1, 2, 3], (x) => x * x * x);
var prefix = "Aiyyo!";
var names = ["Nobita","Takishi","Shinjo"];
var prefixNames = names.map(name => {
return `${prefix} ${name}`;
});
/*===== End of ARROW FUNCTIONS & LEXICAL this ======*/
/*========================================
= Template Strings =
========================================*/
// Because Batman!
var realName = "Bruce Wayne",
knownAs = "Batman";
enemy = "JOKER";
var sentence = "Batman's real name is Bruce Wayne.",
oldWay = knownAs + "'s real name is "+realName+".";
newWay = `${knownAs}'s real name is ${realName}.`;
var dialogue = "Batman wanted to kill JOKER before he found out Batman is Bruce Wayne";
var esDialogue = `${knownAs} wanted to kill ${enemy} before he
found out ${knownAs} is ${realName}`;
// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`
// Example Usage
var titleOfPage = "Nice Title";
var chunkOfHtml = `
<html>
<head>
<meta charset="UTF-8">
<title>${titleOfPage}</title>
</head>
<body>
</body>
</html>
`;
document.write(chunkOfHtml);
/*===== End of Template Strings ======*/
/*======================================
= Default Params =
======================================*/
function greet(greeting = "Hello!", name = "Customer"){
return `${greeting} ${name}`;
}
console.log(greet())
/*===== End of Default Params ======*/
/*=====================================
= Destructuring =
=====================================*/
var date = /(\d{4})(\d{2})(\d{2})/.exec("20151231");
// [2015, 12, 31]
var [year, month, day] = date;
console.log(year, month, day);
// 2015 12 31
// swapping
var x = 1, y = 2;
[x, y] = [y, x]
console.log(x, y);
// 2 1
/*===== End of Destructuring ======*/
/*==============================================
= Rest of the Parameters =
==============================================*/
function ohNumbers(cx,cy,...others){
console.log(cx,cy,others);
}
ohNumbers(50,50,1,2,3,4,5,6);
/*===== End of Rest of the Parameters ======*/
/*===================================
= Let + Const =
===================================*/
function(){
if (true) {
const x = 3;
console.log(x);
x = 4;
console.log(x);
}
if (true) {
let x = "a";
console.log(x);
}
}
console.log(x);
/*===== End of Let + Const ======*/
/*===============================
= Classes =
===============================*/
class Activa {
constructor(color, series){
console.log(color, series);
this.color = color;
this.series = series;
}
}
class Activa3G extends Activa {
constructor(color, series){
super(color, series);
this.codeName = "Urban Monster";
this.engineTypes = [110,125];
}
getTyreBrands(engineType){
return super.getTyreBrands(engineType);
}
static getReleaseDate(){
return "11.12.2013";
}
}
var myActiva = new Activa3G("black","2015");
console.log(JSON.stringify(myActiva));
/*===== End of Classes ======*/
/*================================================
= Enhanced Object Literals =
================================================*/
var key = "foo";
var enObj = {
[key]: 0,
[key + "_bar"]: 1
};
var esHandler = function(){
console.log("Hello!");
};
var esGetName = function(){
return "ES2015!"
}
var enObj = {
// __proto__
__proto__: window,
// Shorthand for 'esHandler: esHandler'
esHandler,
// Methods
esGetName() {
// Super calls
return "Hello "+super.esGetName();
},
// Computed (dynamic) property names
[ "prop_" + (() => 42)() ]: 42
};
console.log(enObj.esGetName());
console.log(enObj.esHandler());
console.log(enObj);
/*===== End of Enhanced Object Literals ======*/
/*===============================
= Modules =
===============================*/
// foo.js
export default function() {
console.log("foo!");
};
// bar.js
export var bar1 = "bar!";
export function bar2() {}
export class Bar3 {}
// import.js
import f from "./foo";
import {bar1, bar2, Bar3} from "./bar";
f(); // "foo!"
console.log(bar1); // "bar!"
/*===== End of Modules ======*/
/*===============================
= Desserts =
===============================*/
// Numbers
Number.prototype.isInteger
// Strings
String.prototype.includes
String.prototype.repeat
// Arrays
Array.prototype.entries // pairs of stuff
Array.prototype.keys
Array.prototype.values
Array.prototype.fill //fills the array obviously!
Array.prototype.of
Array.prototype.findIndex
// Objects
Object.prototype.assign
/*===== End of Desserts ======*/
/*=================================
= Resources =
=================================*/
https://teppeis.github.io/run-through-es6/
https://babeljs.io/docs/learn-es2015
/*===== End of Resources ======*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.