Author: Aleksandar Mihajlovski, Developer
ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.
JavaScript is now a mainstream language and it’s all over the place.
From application frontend to application backend, to databases, to platforms, to robotics (and much more), you can do it all in one universal language called JavaScript. Since the re-advent of JavaScript, it has evolved and emerged as a one programming language for different kinds of applications and the popularity of this language has increased.
The new features that ES6 offer are designed to make JavaScript code easier to read, “write” and also to avoid some of the strange behaviors JavaScript had in the past. Some of the most important changes are:
- Block scoping
- Loops
- Arrow functions
- Modules
- Classes
New way of defining variables
In the previous version of JavaScript there were two most important keywords (var and function). We should forget about the first one because it’s not in use anymore.
Let it be, let it be…
ECMAScript 6 introduces a new keyword to declare variables: let. Unlike variables declared with var that are function-scoped, variables declared with let are block-scoped, they only exist in the block they are defined in. If we try to use that variable out of the specific block where it is defined (out of the scope), then the application will throw reference type error.
Notice that when I’m invoking the method without any argument provided to the function, it returns undefined value instead of throwing an error. That’s because the if statement will never execute, so the result variable won’t be declared and will remain undefined.
In the previous version of JavaScript this principle was called hoisting, so the result variable was added at the beginning of the function but without value.
This is the new way of defining variables in ES6. So, now var is replaced with let and result variable exists only in the if statement. That’s why we can’t access the variable and this method will always throw reference error. This principle is called block-scoping, in the new version of JavaScript.
Arrow functions
An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value. Arrow functions are always anonymous.
This functions were created to simplify function scope and with the new implementation, JavaScript functions will be defined using => (arrow) symbol.
This keyword refers to the object where it is called, but what about if the this keyword was inside function? In that case, this keyword refers to the owner of the function it is in, so it means that this belongs to the window object.
The comparison between functions in ES5 and ES6 would be the following:
Classes
Classes are in fact special functions, and just as you can define function expressions and function declarations, the class syntax has two components:
Class declaration
One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class.
Class expressions
A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class’s body.
Conclusion
As you could see, JavaScript really, really caught up to modern programming languages. Not only the speed of the language was improved over the last years. With the new ECMAScript 6 features like modules and classes, the way is paved for larger applications. All other features will bring many small improvements to your source code.
Current support for ES6 is quite limited and a lot of the ES6 specification is still in draft form. We can look forward to these features (and much more) in the near future.
