praveenpuglia/es2015-features.js

## es2015-features.js
/*======================================================
=            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  ======*/
	/*======================================================
	= 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 ======/