What’s New In ECMAScript 6 Part One

ACMEScript 6 which is also known as ACMEScript 2015 is the latest version coming of the ECMAScript standard. Shortly known as ES6 is a significant update to the language since ES5 was first standardized in 2009.

You can see the ES6 standard for full specification of the ECMAScript 6 language.

ES6 comes with the following new features: Point that, most of the current browsers are still not support those features. To use those features you will need to use babel as a transpiler to compile ES6 code into vanilla javaScript to run all major browsers in production level. To know how babel js work and how to use it you can check my previous post in here

arrows

classes

enhanced object literals

template strings

destructuring

default + rest + spread

let + const

iterators + for..of

generators

unicode

modules

module loaders

map + set + weakmap + weakset

proxies

symbols

subclassable built-ins

promises

math + number + string + array + object APIs

binary and octal literals

reflect api

tail calls

This will be a series long post and I will try to cover all those features with practical examples. Stay tuned. In this first post, I’ll cover arrows.

Ok, So let’s talk about the new arrow syntax which is really very cool. Let’s demonstrate with an example. Let’s say we have a collection of tasks what ever the tasks might be. We initialize the tasks with an empty array like this

1

2

3

4

5

6

7

8

classTaskCollection{

constructor(tasks=[]){

this.tasks=tasks;

}

}

and we have a little log method that cycle through the tasks and print them in console like this :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

classTaskCollection{

constructor(tasks=[]){

this.tasks=tasks;

}

log(){

this.tasks.forEach(function(task){

console.log(task);

});

}

}

Ok, so try it. I’m gona new up a TaskCollection and feed it with new tasks like the following:

1

2

3

4

5

6

7

8

classTask{}

newTaskCollection([

newTask,

newTask,

newTask

]).log();

So what about the arrow syntax ? in the log function we can remove the function keyword entirely and replace it with the arrow => like

1

2

3

4

5

6

log(){

this.tasks.forEach((task)=>{

console.log(task);

});

}

it will output the same exact thing. We can go even further like our function has only one argument, we can even omit the parentheses like this :

1

2

3

4

5

log(){

this.tasks.forEach(task=>console.log(task));

);

}

Once again if I save it, it will output the exact same thing. So how cool is that ? It can really simplify and clean up your code.

Shibly is a *nix fan, open source enthusiast and passionate software engineer. He Loves music, hacking and playing PC video games. Currently he holds a 980ti SLI rig ! He also likes to play with anything cool. He is also a partner & technical director at QuantikLab

Related Articles

GET A WEB DEVELOPMENT QUOTE

Do you have a question about web design and development? We are prepare to answer all of your questions. We always assist our clients to run business smoothly in a complete technology agnostic way. We are devoted to provide the best in class services by maintaining the timeline. We guarantee perfection. Send us your requirements, we'll extract it, do necessary RnD and will provide you something that will definitely amaze you.

WHAT OUR CLIENT THINKS

We have worked with many different offshore web development companies in the past. But would just like to say that the people at QuantikLab are the best! Extremely professional yet very personable! Very clean and scalable work and always right on time! Since we started working with them, never had to use another development company for any of our web design needs.

Jeff Anderson

QuantikLab is absolutely the best, their vary reliable and always on time.

William alkins

Follow Us

LinkedIn

Skype

GitHub

About Company

QuantikLab Is an Outsourcing Web Design Company and We provide the BEST possible web business solution to our client that current technology allows within their budget. Repeating business and long lasting relationship is very important to us and we strive to maintain that.