Javascript ES6 Highlights

Total credit to the ES6 quiz that you should take but I’m creating a poster version of the information shared on the quiz. I love straight forward code examples for learning.

As a Java developer, these updates feel very natural.

Let

Introduces block scoping. Variables defined with let are available only in the nearest enclosing block. Note, support limits this usage to strict mode only.

let x = 150;
if (x > 100) {
	let x = 1;
}
console.log(x);

Const

Const turns variables into constants, and they can’t be changed.

const pi = 3.14;
console.log(pi);

Arrow functions

Arrow functions work similarly to regular function, but are shorter to write.

// Old way
var arr = [3,5,8];
var plusOne = arr.map(function(n){
	return n+1;
});
// New way
let arr = [3,5,8];
let plusOne = arr.map(n => n+1);

New string methods

ES6 gives us a number of new methods for operating with strings.

let someText = 'hellokitty';
if (someText.indexOf('kitty') != -1) {
	return true;
}
// is now
someText.includes('kitty');

More new string features in ES6.

New array methods

var arr = [12,5,42,55,10];
function doSomething(arr) {
	for(let i = 0; i < arr.length; i++) {
		if(arr[i] > 32) {
			return arr[i];
		}
	}
}

// is now
arr.find(n => n > 32);

More ES6 array methods.

Array.from

let titleElements = document.querySelectorAll('.article .title');
let titles = Array.from(titleElements).map( t => t.textContent );

console.log(titles);

// You need it; because querySelectorAll returns a NodeList, which doesn’t have the map method, only arrays do.

Default function parameters

function add(a=10, b=5) {
	return a+b;
}

add(11,2); // returns 13

add(3); // returns 8

add(undefined, 20); // returns 30

add(); // returns 15

New class inheritance support

class Vehicle {
	constructor(model, wheels) {
		this.model = model;
		this.wheels = wheels;
	}
	makeSound() {
		console.log('Vroom Vroom');
	}
}

class Car extends Vehicle {
	constructor(model) {
		super(model, 4);
	}
}

This syntax is very close to Java or C#.

Destructuring

ES6 gives us an alternative way to assign variables.

let a = 12, b = 3;

[a, b] = [b, a];

// Swap the values inside a and b, without using extra variables.

Object Declaration

Quick object initialization of objects from variables.

// Old way
var name = "Johnny", job = "Secret Agent", from = "England";
var person = {
	'name': name,
	'job': job,
	'from': from
};

// New way
let name = "Johnny", job = "Secret Agent", from = "England";
let person = {name, job, from};

The Spread Operator

let point = [1,3];
    segment = [point, [5,5]];
    triangle = [...segment, [1,8]];

// triangle returns [ [1,3], [5,5], [1,8] ]

Rest parameters

Rest is a new way for functions to handle an arbitrary number of parameters.

function mystery(...params) {
	returns params;
}

let a = mystery(1,23,4);

// a returns [1,23,4]

Template literal

String interpolation is a much-needed new feature that is finally available in JS.

let name = 'Harry';
let occupation = 'Wizard';

console.log(`Hi!
My name is ${name}.
I'm a ${occupation}`);

New For Loops

ES6 comes with new, build in “for loops”.

// Old way
var arr = [17,42,122];
for(var i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

// New way
let arr = [1,3,5];
for (let i of arr) {
	console.log(i);
}

Object.assign

This seems to be taken from jQuery.extend.

function doSomething(param = {}) {
	let defaults = {
		color: 'blue';
		shape: 'rectangle'
	}

	var settings = Object.assign({}, defaults, params);

	console.log(settings);
}

doSomething({color: 'orange'});

// returns {color: 'orange', shape: 'rectangle'}

Generators and yield

Generators allow us to pause and resume the execution of a function*.

;(function(window) {
	'use strict';

	function* someGenerator() {
		var x = 0;

		for(let i = 0; i < 10; i++) {
			yield x++;
		}
	}

	var gen = someGenerator();

	gen.next();
	gen.next();

	console.log(gen.next().value); // prints 2

})(window);

Support for ES6

ES6 support table – in general the support in browsers is similar to when CSS3 first came out. ES6 is not really ready for production usage yet.
Node.js – Generally speaking you need nodejs version 4+ to get much of the ES6 support. Some features are not supported until version 5++. Please consult their documentation for more details.