Javascript ES6: Learn important features in a few minutes

The next-generation of javascript also known as ECMAScript 6 (also called ES6 or Harmony), is bringing us lots of amazing features that you probably will need to know. But instead of you spend too much time learning and researching all of the features I separated a few that I felt are the ones you'll be probably using in your daily basis.

Don't worry if you are new to javascript or you're coming from a server-side language, I believe this is the best time to learn it as ES6 has a much cleaner and friendlier syntax, known as sugar syntax.

Sugar Syntax

First of all, Syntactic Sugar is a syntax that make a language easier to understand and more readable, it makes the language "sweeter" for us. It also means that some "new" features of ES6 are not really new because ES6 is trying to simplify the syntax to make things easier for us. So instead of writing the your code using the old tricky way, you'll be able to code in a the simpler way, with sugar syntax.

Look below the sugar syntax in action to create a class in Javascript.

Classes

Always remember: Javascript does not support classes like other Object-Oriented languages. Instead, Javascript can simulate classes using functions and prototype.

Below is the new syntax to create classes. You will feel familiar to this way if you come from a Java background or other OO language.

All the methods you declare in a class will be added to the prototype of the class.

Inheritance in ES6 and Prototype:

As said before, javascript does not support classes. So, if it doesn't support classes, does it support inheritance?

Yes, inheritance in javascript is possible via prototype. If you're not familiar with prototype, the good news is that with ES6 you don't necessarily need to know it to get the benefits of classes and inheritance. prototype is not hard to learn but for the purpose of this post you can understand prototype as the way javascript implements inheritance.

This is how I would create a subclass of Project, called WebProject and inherit the attributes and methods from Project.

Notice that in my WebProject constructor, I invoke the Project constructor and then I can make use of its attributes and method.

Modules

If you don't want to leave all of your javascript in just one file or you do want to re-use some functionality in other parts of your application, you'll probably want to use modules. The magic keyword you need remember is export. Use export before the function you want to expose and you're done.

This is the structure of our app. The Project and the WebProject classes are stored in application.js.

let

Notice that, unlike Java or many other languages, any variable created inside a function in Javascript it is hoisted to the top of the function. It means no matter where you declare the variable, it's the same as if you declare it at the top of the function. This behaviour is called hoisting.

In this case, as let is referencing a previously declared variable, the value "Rafael" is valid only inside the block. Outside the block the value of name is "Hey".

In summary, var is function-scoped and let is block-scoped.

const

The ability to create constant variables is something javascript was missing for a long time. With ES6 you'll be able to create constants and make sure its value won't be changed during the application execution.

The syntax for creating constants is as follow:

const SERVER_URL = "http://frontendjournal.com"

Other interesting features

ECMAScript 6 also brings these amazing features you might want to take a look: Map, WeakMap, generators and Proxies.

Some ES6 features is also available in Node JS. Check out Alex Young's blog post on ES6 for Node to get started.

Conclusion

The next-generation of javascript will bring a simpler and friendlier syntax helping the learning process for developers coming from other OO languages. The main problem I see now is that it's gonna take some time until we can use ES6 extensively in all major browsers.

Now, for server side development using Nodejs, ES6 is already a reality as many features are already present in V8.

PS:Leave a comment saying what's your opinion on the next-generation javascript and what you thought about this post.