After spending some months working on non javaScript projects, i needed to get back on it and catch the excessively rapid evolving language again (JS is evolving so fast that it’s impossible for me to stay up to date while working on other languages), so first of all i decided to check what’s going to be the future of JS and not try to recover what i missed (i hope that it’s a good idea).
So what’s new in JavaScript? I’m going to try to show you some of the new features that will be available soon on our Browsers with the ECMAScript6 harmony release.

 

I started with https://github.com/thoughtram/es6-6to5-browserify-boilerplate which is a boilerplate project with some libs to easily test your ES6 code on actual Browsers. It transforms ES6 to ES5.

 

Module Loader

ES6 adds a native module loader, so we will no more need Libs to add JavaScript dependencies between files.

Example :

//myValue.js file

export let myValue = "World !"

export let myValue2 = "Only Me !"

//those values will be reachable from another JS file by using import keyword.

I use let instead of var so my variable will be Block-Scoped (only available inside the block in which it’s declared)

//myFunction.js file
import {myValue,myValue2} from './myValue'

function myFunction(){
	console.log('hello '+myValue)
}

function myFunction2(){
	console.log('hello '+myValue2)
}

export {myFunction,myFunction2}
//those Functions will be reachable from another JS file by using import keyword.

Here we use a different syntax for export keyword

//app.js file
import {myFunction,myFunction2} from './modules/myFunction'

let app = function () {

myFunction() //hello World !
myFunction2() //hello Only Me !
}
app()

 

<
<!doctype html>
<script src="./app.js"></script>
</html>

 

Classes and inheritance:

Hallelujah, ES6 adds classes and inheritance pattern support to JavaScript.

//Animal.js File
class Animal {
    constructor(name,speed) {
        this.name = name
        this.speed = speed
    }
    toString() {
        return "the " + this.name + " is " + this.speed
    }
}
export default Animal

this is the Parent class Animal it has a constructor and a toString method

//Bird.js
import Animal from './Animal'

class Bird extends Animal{
	constructor(name,speed,movement="flies"){
		super(name,speed)
		this.movement = movement
	}
	toString(){
		return super.toString() + " and it "+this.movement
	}
}
export default Bird

Bird extends Animal, it can supercharge the parent methods if needed.
We also introduced a new feature: default method parameter (movement= »flies »), now we can use a default value for a JS method parameter.

//app.js
import Animal from './Animal'
import Bird from './Bird'

let app = function () {

let elephant = new Animal("elephant","slow")
let eagle = new Bird("eagle","fast")
let chiken = new Bird("chicken","slow","walks")

console.log(elephant.toString()) // the elephant is slow
console.log(eagle.toString()) // the eagle is fast and it flies
console.log(chiken.toString()) //the chicken is slow and it walks
}
app()

 

Template String:

No more \n to jump to a new line, putting your string between ` quotes will consider the return you put on your String

console.log(`line 1
line2
line3`)

/* Outputs :
line1
line2
line3
*/

not very revolutionary but can be useful …

for … of:

A simple method to run through values of an iterable object

let myArray = [1,2,3]
for(let item of myArray){
	console.log(item)
}

 

Iterable:

String, Array, TypedArray, Map and Set are natively iterable, and we can implement our own iterable objects.

let string = "ABC"
let iterator = string[Symbol.iterator]()

console.log(iterator.next()) //Object {value: "A", done: false}
console.log(iterator.next()) //Object {value: "B", done: false}
console.log(iterator.next()) //Object {value: "C", done: false}
console.log(iterator.next()) //Object {value: undefined, done: true}

a custom iteration method

let iterable = new String("ABC")
iterable[Symbol.iterator] = function(){
	let index = 0
	return{
		next : function(){
			return index < iterable.length ? {"letter" : iterable.charAt(index++).toLowerCase(), "end" : false} : {end : true}
		}
	}
}

let iterator = iterable[Symbol.iterator]()

console.log(iterator.next()) // Object {letter: "a", end: false}
console.log(iterator.next()) // Object {letter: "b", end: false}
console.log(iterator.next()) // Object {letter: "c", end: false}
console.log(iterator.next()) // Object {end: true}

 

Arrow symbol

The arrow symbol => shortens some common syntaxes while declaring functions.

//arrow usage
let greater = (a,b) => a > b ? a : b
//equivalent old style declaration
let greater_old = (function(a,b){return (a > b) ? a : b})

console.log(greater(1,2)) // 2
console.log(greater_old(6,4)) // 6

 

Rest parameters

With es6 methods can take variable number of params and recover them as an array.

let stringify = function(...args){
	console.log(args.join(' and '))
}
stringify("lemon","orange","tomato","apple") // lemon and orange and tomato and apple

 

Sets and Maps

New data structures appeared, Sets and Maps, this will for sure make structures usage easier.

let set = new Set()
set.add("hello").add("goodbye").add("bye")
console.log("size "+set.size + ", hello presence "+set.has("hello"))

let map = new Map()
map.set("name", "someone") 
map.set(45, "Forty five") 
map.set(undefined, "undefined")
let func = function(){console.log("i'm a function")}
map.set(func, "my key is a function")

console.log(map.has("name")) //true
console.log(map.has(45)) //true
map.delete(45)
console.log(map.has(45)) //false
console.log(map.get(func)) //my key is a function

More new features are available in ES6, checkout http://wiki.ecmascript.org/doku.php?id=harmony:proposals for a list of ECMAScript6 Harmony release methods.

Can’t do it yourself ? need the sources ? https://github.com/hanfi/ES6-Blog-Post-sources