5 reasons why ES6 ROCKS, yo

Categories Code, JavaScript
react + mobx in es6

On the interest of teaching a topic, I usually try to keep my opinions to myself. After all, I’d much rather you guys come to your own conclusions about things, you know? But, today is not one of those days. No, good sir. None of that objective nonsense. Today we’re going to talk about why ES6 (Or JavaScript 2015) is just the best thing ever.

To do that I have prepared a list of my 5 favorite features about it. But, don’t get me wrong. I don’t mean these are the best ES6  features; that’s definitely up there for debate.

What do I mean then? Just that these are the 5 features that keep me installing Babel on all my projects. And I’m not even kidding. They just make my life that much more awesome.

So without further ado (and in no particular order) here are the 5 reasons why ES6 ROCKS, yo:

1.- Const. Just… const, man.

Don’t get me wrong, Let is cool, and nobody’s saying anything different. But const? Const is a game changer.

With one word const makes any variable impossible to re-assign. What do I mean by this? Just what it says on the tin:

const StarfoxOrder = "Fly Arwing";
StarfoxOrder = "Disarm"; //Can't let you do that, Starfox

The code above would throw an error, specifying that you can’t reassign the order, and keeping good old Star Fox from doing his job. 

Now, why is this amazing? Const literally changes the entire landscape of your code. And it does so by replacing almost every single variable declaration. Because you [usually] don’t want your variables to change. And when you do, you use Let.

One word, by itself, changed the way my code looks. If that’s not incredible, I don’t know what is.

Author’s Note: I should mention that, while assignment is out of the question, your variables are not immutable by any means. If you want to know more, follow this link.

2.- Arrow functions make everything better.

Wanna know one of the reasons know why ES6 Rocks my world? It makes my code so much more sleek and elegant.

Take functions, for example. There was a time when I had to write this:

var sum = function(a,b) {
    return a + b;
}

And while that may not seem like a ton of code, let’s compare it to this:

const sum = ( a, b ) => a+b;

You see that? That’s arrow function syntax doing some real work.

From the outset it may seem like the fat arrow  (=>) is just a more concise version of a regular function. And, I mean, it is. But if you look a little bit deeper, you’ll find a lot of power hidden inside this little gem:

And all of these powers combine to make them one of (if not the) best tools for Functional Programming.

3.- Default parameters are your function’s best friends.

To really understand why this awesome, we need to look back at how we used to do things before.

So, follow me as we travel back to a pre-es6 world. Because this is how default parameters used to look like:

var myFunction = function (foo) {
    var foo = foo || 'yourDefaultValue';
    //Rest of the function
}

Which was not only very verbose, but also a trip down the bug lane. Why? Because it didn’t let us pass falsy values to our functions. Wanna pass in a zero? Can’t let you do that Star Fox, here’s your default value.

But, no worries, because that’s when ES6 rolled around and gave us an actual default parameter syntax:

const myFunction = (foo = 'foo') => { //Rest of the function }

And, not only is it very concise: We also don’t have to deal with language side effects anymore. Isn’t it nice when things just work?

4.- Destructuring for cleaner code.

There’s a thing that happens when you’re in a project that handles lots of data. You start making functions that process a lot of that same data. So, naturally, your functions start taking a lot of arguments:

var myFunc = function(param1, param2, param3, param4, param5, param6, param7) {
    //remainder of the code, if you're brave enough.
}
myFunc(/*Good luck trying to figure out what goes where*/);

And something like that can be very difficult to handle, for a various assortment of reasons:

  • Argument order becomes the new law of the universe.
  • Naming turns into your only means of figuring out whats going on. Which is great. Because naming is such an easy thing to do.
  • Function calls are no longer elegant. And, invoking them without consulting documentation? That requires divine intervention now, too.

Which, let me tell you, doesn’t really scream “Best User Experience Ever” to me. And, as we discussed before, all code is a user experience.

So, how do we fix this? Well, as it turns out, someone came up with the idea of passing objects to functions:

var myFunc = function(params) {
    var param1 = params.param1; 
    //A lot more inviting remainder of code 
}
myFunc({param1:'foo'}); //Not so bad

Which led to just about everyone being happy.

There was was a problem however: you couldn’t specify your function’s parameters that easily anymore. Either you added comments, or someone read the whole code. Sometimes both.

But this all changed with ES6 and Destructuring:

const myFunc = ({param1 = 'foo'}) => /*Elegant remainder of code*/;
myFunc({param1:'foo'}); //Not so bad

Suddenly, figuring out what parameters my function is taking, becomes completely straight forward.

Because, you see, Destructuring lets you specify a shape for your objects and arrays. Which is amazing for creating function signatures.

You describe the properties they should have, and at what level of nesting. If the properties match (at the specific level of nesting), you get a variable holding that specific value.

For example, the code above is looking for param1 at the first level of whatever object we pass as the first argument of the myFunc function.

Arrays work a little bit similar: they still use nesting, but they their indexes to decide which variable gets the value of what. For example: [pos1, pos2] = someArray; will get the first two indexes of the array and assign them to pos1 and pos2 respectively.

What’s even better is that you can even set defaults for these variables. Meaning that, in case they don’t find what they’re looking for, they’ll just use those values instead!

So, what does this result in? Elegant, clearly defined and powerful functions that are a delight to call, and to look at. Beautiful code if I’ve ever seen some.

Author’s note: For a much more in-depth explanation of de-structuring (and some advanced techniques) I highly recommend you check out this post from untangled.io.

5.- Three dots i’m VERY happy to read and write.

Normally when I get three dots in a conversation, it tends to mean that something has gone wrong. Either I said the wrong thing or I’m about to get some very bad news.

Three dots in ES6 are the exact opposite of this: They only herald the best of news.

And how do they achieve this? By making it easier to handle Loads O’ Data. Mainly in the form of the Rest Parameter, and the Spread Operator.

Rest Parameter:

const sum = (...numbers) => numbers.reduce((num1,num2) => num1+num2);
sum(1,2,3,4,5) // 15

The Rest Parameter goes at the end of a function, and captures everything that gets passed afterwards. In this way it’s kinda similar to the Arguments Object.

Unlike it, however, this one is an actual array I can iterate over. Which also makes it perfect for handling infinite parameters.

Spread Operator:

const array1 = [ 'one', 'two' ], array2 = [ 3, 4 ];
const array3 = [ ...array1, ...array2 ]; //[ 'one', 'two', 3, 4 ]

The spread operator helps us deal with arrays and objects. It does so by basically dividing them into their respective elements:

  • For arrays, it’ll return a list of values ordered by index.
  • For objects, it’ll be a list of key value pairs.

And this means that cloning arrays and objects has never been easier. Which is specially useful in Functional Programming. Because, you know, the whole Immutable State thing.

Let’s see an example:

const changeState = (state, newState) => {...state, ...newState}

This one line function takes our previous state, and some new one, and returns a new version of it. One where the newer properties will overwrite the old ones. All while keeping state immutable.


So, unlike the ones on text messages, these are some three dots I will always be happy to read and write.

Author’s Note: If you want to read more about how three dots have changed javascript, then boy do I have the post for you.

ES6 is amazing, and it’ll only get better from here.

JavaScript, you’ve come a long way. You’re no longer the most misunderstood programming language. And you’ve ushered a new era of rapid web development and lots of frameworks. We still debate about whether or not that’s a good thing. But I digress.

JS holds the current title of lord and master of the Front End. And, with Node, it also has its very own corner of the Back End world, too.

The language took a big leap forward with ES6, introducing features that, even if they looked small, changed everything about how we code. And, with the future promising things like async functions, it can only get better from here.

My name’s Orlando Paredes Hamsho. I’m a 25-year-old Web Developer living (mostly) in Guadalajara, Mexico; albeit I intend to move pretty soon. Apparently, I also run a blog now, and have been doing so for a while.

Leave a Reply

Your email address will not be published. Required fields are marked *