Switch to JavaScript 6 .today

A 3 minutes story written on Oct 2017 by Adrian B.G.

image
(World Wide) Web can be beautiful

It’s been a couple of years, you have waited long enough, please update your favorite programming language now!

No really, you have no excuse not to, except if you do not have the time to learn the new features ☹.

This article is a call to arms! Do not leave anyone behind, migrate from the legacy JavaScript .today!

If you come from another programming language, JS6 will feel natural for you. The “new features” are exists in most all other programming languages (ex Classes, lambda functions, spread operator).

JavaScript 6 🚀

Officially known as ECMAScript 2015, was finalized in June 2015. This update adds significant new syntax for writing complex applications, including classes and modules. Other new features include iterators and for/of loops, generators, arrow functions, binary data, typed arrays, collections (maps, sets and weak maps), promises, number and math enhancements, reflection, and proxies.

If you make the switch from JS5 there is no reason to don’t go all the way in! Adopt the JS7 and JS8 features too.

JavaScript 7 🛩

Officially known as ECMAScript 2016 it’s a smaller update, it added the exponential operator (**) and Array.prototype.includes.

JavaScript 8🚁

Officially known as ECMAScript 2017, it is the 8th edition and it was finalized in June 2017. Includes await/async, which works using generators and promises.

You got the point, each year a new version of JavaScript will be released, with more or less new features.

Callbacks, Promises & async 🤹🏾‍♂️

The best feature of the “new” JavaScript (Promises) allows us to get rid of the callback spaghetti nightmare. You should use them using async (JS8), if you don’t trust me here are 6 more reasons why:

6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

//old JavaScript
func1(function (value1) {  
    func2(value1, function (value2) {  
        func3(value2, function (value3) {  
            //you get the point  
        });  
    });  
});

//JavaScript 8  
const makeRequest = async () => {    
   const value1 = await promise1()    
   const value2 = await promise2(value1)    
   return promise3(value1, value2)  
}

Functions 🕵🏾‍♂️

Functions received major 💙 improvements in JS6, allowing us to write simpler & cleaner code.

const t = () => 1 //arrow function  
function add(first, second = first, third = t(), ...max) {  
   //spread ... operator  
   return first + second + third + Math.max(...max, 0)  
}
console.log(add(1, 2));              // 4  
console.log(add(1));                 // 3  
console.log(add(0, 0, 0, -3,-5,10)); // 10

For more features & updates keep reading …

image

Transition from JavaScript 5 🤸🏿‍♀️

The best resource I have found, used and recommend is “Understanding ECMAScript 6”.

It will take you trough all the changes, the new caveats and code comparasion between ES5 and ES6. What you’ll learn:

  • All of the changes to the language since ECMAScript 5
  • How the new class syntax relates to more familiar JavaScript concepts
  • Why iterators and generators are useful
  • How arrow functions differ from regular functions
  • Additional options for storing data using sets, maps, and more
  • The power of inheriting from native types
  • Why people are so excited about promises for asynchronous programming
  • How modules will change the way you organize code

You can find a comprehensive list of books, tutorials, webcasts & more here: ericdouglas/ES6-Learning

Support ☎

If you only develop on NodeJS, the transition is a piece of 🎂.

For older browser versions I recommend using a transpiler like Babel, or at least polyfills for JavaScript 2015–16–17 features, this way you get the benefits of JS6 productivity & cleaner code while maintaining the compatibility. It can be integrated with any pipeline, but it’s a lot easier if you use Webpack, Meteor or NodeJS.

If you want to find out which features are supported in which versions: Node.js ES2015/ES6, ES2016 and ES2017 support

Thanks! 🤝

Please share the article, subscribe or send me your feedback so I can improve the following posts!

comments powered by Disqus