New features in ECMAScript 6

Off the bat, I have to tell you that I am a javascript neophyte, so the information here will be presented from a semi-layman’s view. As a coding student, I wanted to get a better understanding of javascript as an evolving organism, so I decided to look into the differences between the relatively new ECMAScript 6 and its predecessor. Hope it is helpful to whoever may read it!

What is ECMAScript?

Before we look at the new features, we should take a very brief look at the history of javascript and how this new update fits in. Javascript was created in 1995 by Brendan Eich, who apparently only took about 10 days to create the language. Netscape acquired the language, naming it Javascript (due to the fact that Java was a popular language at the time. The two are not related.) The internet in the mid-90s was defined by chaotic, decentralized browser wars, in which different companies such as Netscape and Microsoft battled to create the best coding languages to suit the internet. As a result, different browsers became incompatible with certain websites and apps. Noticing the inefficiencies of browser-specific code, Netscape took JavaScript to Ecma, a standards organization in order to create the consistency needed by web developers to create stable apps. Thus, ECMAScript 1 was born. From 1997–2015, ECMAScript received updates that included important new features, significantly improving the quality of web apps and probably the health of web developers as well. These features included JSON parsing, array methods like ‘map’ and ‘forEach’, and reserved words such as ‘new’ and ‘for.’ In 2015, Ecma dropped ECMAScript 6, adding a host of new and exciting features, further helping improve developers’ lives.

So what’s new?

First off, ES6 introduced two new variable keywords, let and const. Both provide helpful services to keep your code robust and flexible. Before these keywords, the best way to declare variables was var, which had a couple of weaknesses. First, its value could be changed globally, meaning that a change later in your code could break something at the beginning.

var x = 50 // x is 50
{
   var x = 5
}
console.log(x) // x is 5

The new ES6 keyword, const, takes care of the problem now by keeping its value immutable.

var x = 50; // x is 50
{
  const x = 5;
  // Here x is 5
}
// Here x is still 50

New variables are permitted inside of block and function scope, but a global const variable cannot be changed.

The let keyword is also very helpful, as it can be used to declare variables in a block scope, a functionality that was unavailable before 2015. Previously, var only had a function scope, meaning that any variables declared inside a block were still available in the function. The block is everything in the curly braces you would see after a function, like:

function foo(){ //this is the block }
if ('nilbog' === 'goblin') { //this is also a block }

let and const both function inside of a block scope, allowing devs to control their variables much better.

Arrow Functions

Arrow functions are one of the most highly praised new features in ES6. They can help keep your code short and clean. Instead of having to write out empty functions with arguments, arrow functions allow you to simply use the name of the argument and implicitly return a result. Here’s an example comparing how ES5 and ES6 would handle the same task.

//ES5 version:
var definitions = dictionary.map(function(definition) { return definition.text;
});
// ES6 version: 
let dictionary = [{text: 'words'}, {text: 'more words}]
let definitions = dictionary.map(definition => definition.text)

As you can see, the ES6 version removes a lot of empty words and leaves the viewer with a better understanding of exactly what is happening. If no argument is provided, arrow functions still work, they just need to use empty parentheses to represent the empty function.

dictionary.map(() => 2); // [2, 2]

String methods

The final update I want to touch on in the post is the addition of convenient methods to the String prototype in javascript.

There are four helpful methods that can eliminate some headaches when trying to work with strings. They are: startsWith(), endsWith(), and includes(). Here are some examples:

'this string'.startsWith('this') // true
'this string'.endsWith('this') // false
'this string'.includes('ring') // true

These methods can be enormously helpful if you’re trying to conditionally select between certain strings, or want to search for some particular string.

There is also a handy repeat method as well.

'choo'.repeat(4); // 'choo choo choo choo'

These are some very handy features in ES6, but by no means all of them. Updates not covered in this blog post include template literals, new array methods, improved math methods, the spread operator, and destructuring. You can find a great guide to these new features here. Hopefully, I can cover more of these in my next post!