Some Notes on ES6 (JavaScript)

I’ve been taking a stab at ES6/ES2015 and Webpack for the past couple of days. So far I love it! I haven’t been the hugest fan of Javascript, however, I took the dive and I feel JS development is starting to become enjoyable for me.

What is ES6

ECMAScript is a subset of JavaScript. JavaScript uses ECMAScript at it’s core. ECMAScript 6 is just a standard for the next version of JavaScript. This post on Stackoverflow broadly explains this: http://stackoverflow.com/a/4269188/2984318

Some Things I Like About ES6

I really like the arrow syntax in ES6.

   let thing = (thing) => {
      console.log(thing);
   };

This is the same thing as writing:

   let thing = function(thing) {
      console.log(thing);
   };

This adds some syntactical sugar. In the example above, since I only have one parameter, I can write that same example in one line.

   let thing = thing => console.log(thing);

Very neat and clean! We didn’t even need to add in parentheses around the parameter “thing.” However, take note that if we have multiple parameters, we would have to add in the parens back in.

   let addNums = (a, b) => {
      return a + b;
   };

Class based OOP

If you’ve been working with classed based object-oriented programming like I have, then this should be very familiar. I can see this making JavaScript development more enjoyable for backend devs.

   class Form {
      constructor() {
         // add stuff to constructor
      } 

      getValues() {
         // get some values
      }
   } 

   let form = new Form();

   form.getValues();

Awesome stuff! You can also extend classes like a React component for example:

    class Monsters extends React.Component {
       // the rest of the code...
    }

Summary

I’ve given ES6 a change this week and so far I have very little complaints. It’s actually a very enjoyable way to JavaScript ;). I have only scratched the surface in this post, but I want to explore other features in depth as I’m making this journey.

Also, take note that ES6 is not supported in all browsers. You will have to use something like Webpack to compile ES6/Babel code. If you are using Webpack 2, then I’ve made a little starter repo which I’ve pushed to github: https://github.com/tysweezy/my-webpack-starter.

However, there are multiple ways you can compile ES6 to ES5 using Babel: https://babeljs.io/docs/setup/