A Coding Writer’s Guide: The Differences Between ES5 and ES6

If you’re a veteran coder, developer, or just into programming then you probably already know the differences between these two versions of ECMAScript. However, if you’re a newbie learning the fundamentals of JavaScript or need some tips on interview questions, then this is the right place for you!

Long history lesson short: ECMAScript (ECMA meaning European Computer Manufacturer’s Association) was created originally in 1995 by Brendan Eich of Netscape fame. The scripting-language was once known as Mocha, then LiveScript, before finally becoming the JavaScript as we know and love today. As one of the most popular and used programming languages in the world, it is pertinent to understand and be aware of the changes that come with it,

But I digress, let’s move on to the main topic at hand, the differences between ES5 and ES6!

ECMAScript 5 a.k.a. ES5 a.k.a. ECMAScript 2009 is the current standard of JavaScript or JS and has been so for some time. It brought about several new high-ordered methods and features such as:

• The “use strict” Directive
• String.trim()
• Array.isArray()
• Array.forEach()
• Array.map()
• Array.filter()
• Array.reduce()
• Array.reduceRight()
• Array.every()
• Array.some()
• Array.indexOf()
• Array.lastIndexOf()
• JSON.parse()
• JSON.stringify()
• Date.now()
• Property Getters and Setters
• New Object Property Methods

ECMAScript 6 a.k.a. ES6 a.k.a. ECMAScript 2015 is the latest standard in JS and has brought about some new changes including:

• Fat Arrow Functions —allows for simplified written syntax, and removes the need to use binding of the this keyword as it is already bound lexically. Like so:

(parameters)=>{statement}

• Block-Scope — before ES6 there were only two types of scope: global and function. However block-scope makes variables declared inside a block inaccessible to outside the block or the {}.
• Template Literals — utilize back-ticks (``)instead of double or single quotes. They are formatted by a dollar sign followed by a set of curly braces. Like so:

${thisIsATemplateLiteral}

• let keyword — allows the scope of the variable to be defined by the nearest set of curly braces, which differs from a var that defines a variable globally or locally.
• const keyword — acts like a regular variable, except it cannot be altered or reassigned a new value. It is immutable.
• Default Arguments — gives the ability to set a different default value other than undefined which would be beneficial for testing purposes.
• rest operator — this operator is displayed as (…)and functions by allowing you to bundle back elements into an array.
• spread operator — this operator is displayed exactly like the rest operator (…), but does the opposite and expands objects into many elements.

…to name a few.

It is important to note that even though these new features are helpful and beneficial to the landscape of development, there is still resistance in adoption. There are many reasons people do not use ES6, but the most glaring is due to companies declining to use an updated browser to support this format as people are inclined to stick to what they know and work with best. However, as a user of both, I can attest to the greatness that is ES6 and am humbly waiting until I get a chance to learn more on ES7 as I’m sure that will be a wild ride.