ES5 VS ES6

es5vs6 1

First off, what in the world is ES6? ES6, broken down stands for ECMA Script, which is the standardized name for JavaScript. The “6” is simply the version control of ECMA Script, that you are working with. So why Es6? Es6 was released in 2015 after it’s counterpart ES5. Since then ES7, ES8, and ES9 have been released, so again we ask why ES6? While there are newer versions of ECMA Script, that fact remains that the browsers using ECMA Script are still trying to catch up. While most companies are still using ES5 to program, because it’s still widely accepted by most browsers, ES6 is on the fast rise. While there are newer versions, most browsers haven’t even updated to the point to allow these. Don’t worry about ES6 not being eligible on your browser, that’s what transpilers are for such as Babel and environments such as Webpack to run it in. Thus bringing ES6 as the current standard. So why make the big leap, when both are technically accepted? I won’t go to into-depth on each bullet point, but more of an insight to a reason for the change. Enjoy.

Data Types:

Maybe the least of the Pros, but defiantly quite useful, is the introduction of a new data-type. ES5 supports primitive data-types of strings, numbers, booleans, null, and undefined. Whereas ES6 brings in a new type of “symbols”, which is widely used as an identifier for object properties, this has a wide variety of implications.

Defining Variables:

While we have all been riding the ES5 var train for quite some time, it holds several limitations. One of my favorite additions to the ECMA Script family is the variable keywords “const” and “let”. Having the diversity to define variables with these keywords can add dynamics and strictness to your code, which can take your code to the next level.

Performance:

While ES5 is older than ES6 it’s only natural to assume it has a lower performance ratio, and you would be correct. With the handful of new features, each one brings its own level to data implementation to the table. To put it shortly ES6s’ new simplistic syntax makes for better shorthand storage. While this may be minimal line by line, It can make all the world of difference after all is said and done, with pages of code.

Object Manipulation:

ES5 is time-consuming, not only in the Big-O equation, but it takes longer to type out by hand. In comes deconstructing, the heavy hitter, this allows us to extract data from arrays, objects, maps, and sets, in sets of multiple at a time. While it might seem minimal as you’re reading, this is a game-changer and should require a deeper dive, which I will bring in my next blog. But rest assured, if you don’t know already, please familiarize yourself, as it is very common in the field and the interview process.

If you made it this far, thank you for sticking through to the end. While these are just my Top 5, there are many more reasons, why you should consider ES6. I hope you enjoyed and learned a little, So let us finish it off by hitting on Number 5.

Arrow Functions:

If you’re are reading this chances are you spent hours scanning code, whether it being your own or someone else’s. By now, if you’re like me you might have gone cross-eyed reading the words function and return. While they are necessary for ES5, ES6 has done away with the monotony. I love arrow functions, as to me, they make code look so much cleaner. While others might argue their objections, such as simplifying function scoping or writing a more concise code, Arrow functions bring a lot more to the table. In my opinion, the big turnover for arrow functionality is the change in how this binds in functions. If you are unfamiliar with “this”, “this” will have to be a whole other discussion, as “this” was one of the hardest concepts for me to take in programming. If you agree that “this” was a brain staking concept, well stick around as I will cover “this”.

Thank you and I hope you enjoyed the read.