Perfect Housewife's first encounter with ES6

The context

JavaScript is a scripting language standardized in the ECMAScript language specification. 6th Edition ECMAScript (ES6) is a current standard which defines new language features.

State of the art

Current browsers don’t support ES6 yet, but it doesn’t mean you cannot use it right now in new projects. There are some transpilers, like Babel.js, which translate ES6 to ES5. Here is a compatibility table of ES6 with compilers, frameworks, desktop browsers, servers and mobile devices: https://kangax.github.io/compat-table/es6/.

New features of ECMASCRIPT6

Short overview with ES5 comparison.

Constants

ES6:

const TABLE_SPOON = 0.015

ES5:

Object.defineProperty(typeof global === "object" ? global : window, " TABLE_SPOON", {
	value:        0.015,
	enumerable:   true,
	writable:     false,
	configurable: false
});

Block-Scoped variables

ES6:

let cakes = []
for (let i = 0; i <= 2; i++) {
	cakes [i] = function() { return i * 2 }
}
cakes [2]() === 4

ES5:

var cakes = [];
for (var i = 0; i <= 2; i++) {
	(function (i) {
		cakes [i] = function() { return i * 2; };
	})(i);
}
cakes [2]() === 4;

Block-Scoped functions

Much shorter block-scoped function definition.

ES6:

function bakeSomeCake() { return false }
bakeSomeCake () === false
{
	function bakeSomeCake() { return true }
	bakeSomeCake() === true
}
bakeSomeCake() === false ES5:

var bakeSomeCake = function() { return false; }
bakeSomeCake() === false;
(function() {
	var bakeSomeCake = function() { return true; }
	bakeSomeCake() === true;
})();
bakeSomeCake() === false;

Arrow Functions

ES6:

oddCookies  = evenCookies.map(v => v + 1) ES5:

oddCookies  = evenCookies.map(function (v) { return v + 1; });

Lexical this

ES6:

this.jars.forEach((v) => {
	if (v % 5 === 0)
		this.covers.push(v)
}) ES5:

var self = this;
this.jars.forEach(function (v) {
	if (v % 5 === 0)
		self.covers.push(v);
});

Extended Parameter Handling

Simple default values for bakeSomeCake function parameters.

ES6:

function bakeSomeCake(chocoAmount, eggsCount = 3, flourAmount = 42) {
	return choco + eggsCount + flourAmount
}

ES5:

function bakeSomeCake(chocoAmount, eggsCount, flourAmount) {
	if (eggsCount === undefined)
		eggsCount = 3;
	if (flourAmount === undefined)
		flourAmount = 42;
	return chocoAmount + eggsCount + flourAmount;
};

Enhanced Object Properties

Shorter syntax for kitchen object

ES6:

kitchen = { table, chairs } ES5:

kitchen = { table: table, chairs: chairs };

Modules

ES6:

// lib/bake.js
export function bake (x, y) { return x * y }
export var tableSpoon = 0.015

// kitchen.js
import * as cake from "lib/bake "
console.log("Cake involves: " + cake.bake(math.tableSpoon, 5) + “ ml of flour”)

ES5:

//  lib/bake.js
BakingRules = {};
BakingRules.bake = function (x, y) { return x * y };
BakingRules.tableSpoon = 3. 015;

//  kitchen.js
var cake = BakingRules;
console.log("Cake involves: "+ cake.bake(math.tableSpoon, 5) + “ ml of flour”);

Classes

ES6:

class Oven {
	constructor(id, time, temperature) {
		this.id = id
		this.bake(time, temperature)
	}
	bake(time, temperature) {
		this.time = time
		this.temperature = temperature
	}
}

ES5:

var Oven = function(id, time, temperature) {
	this.id = id;
	this.bake(time, temperature);
};

Oven.prototype.bake = function(time, temperature) {
	this.time = time;
	this.temperature = temperature;
};

Some other new features are:

  • Template Strings
  • Extended Literals
  • Enhanced Regular Expression
  • Destructuring Assignment
  • Symbol Type
  • Iterators
  • Generators
  • Map/Set & WeakMap/WeakSet
  • Typed Arrays
  • New Built-In Methods
  • Promises
  • Meta-Programming

Read more