/ JavaScript

Basics Of ES6 (ES2015)

Learn about ES6 through some simple and easy to understand code examples.

Since the release of ES5 in 2009, JavaScript developers have always dreamed of having functionality closer to that of Java and Python as they offer incredibly powerful API's with little to no overhead when thinking about performance. For years, JavaScript remained the same – not forgetting the release of ES5.1 in 2011 – which forced many to create libraries to handle use cases that browsers just wouldn't by default.

Quick history overview

The best-known example of this occurring throughout the history of JavaScript is jQuery. John Resig (creator of jQuery) developed it with the intention to solve the most fundamental problem which was cross browser compatible code as Internet Explorer built their JavaScript compiler and implemented their own API's.

With ES6 however, that problem no longer exists as browser vendors during the past few years have embraced working towards rolling out consistent features that follow the standards set by the editors. In 2015 we saw an incredible adoption rate by vendors which today shows Google's Chrome browser as the leader supporting roughly 99% of ES6 standards.

Rather than boring you with endless history, let's jump into some code examples.

Quick note before continuing
Only the latest versions of the major browsers natively support ES6, you will need to transpile your code using Babel for older browsers which converts your JavaScript code into ES5.

let and const

For a period, the let and const statements caused confusion with some less experienced developers, the trouble mainly came about because of how const behaves in other programming languages. I'll explain this in a bit more detail later on, in the meantime let's learn about let.

When we think about let we can just think about var in a sense as they're both mutable types. However, one major difference is the var keyword is a global variable whereas let will be declared only in the local scope. Below we have a very simple example where we declare a variable called foo and have set its value to bar.

let foo = 'bar';

As mentioned, variables declared using the var keyword are global and can be accessed outside of the scope declared within. See the following example which demonstrates this:

{
  var foo = 'bar';
}

console.log(foo); // "bar"

If we were to run this in our browsers console we would see bar printed out as ES5 variables get generated in the global scope. If we, however, change var to let and run the same code shown in the example below an error would instead occur as we can't access let declarations outside of their parent scope.

{
  let foo = 'bar';
}

console.log(foo); // Uncaught ReferenceError: foo is not defined

We can easily solve this problem by moving our console.log statement to within the block scope that our variable foo is defined. It is important to remember this behaviour as it is incredibly easy to write ES6 code with the same ES5 principles you have always used, it will become a natural instinct to write scoped code so don't panic if you are.

Similar to let, const shares many traits but is immutable which prevents us from redeclaring the value of our constant once declared. See a basic constant example below:

const foo = 'bar';

The syntax used is the same as let and var but as mentioned earlier, the string value bar cannot be changed once declared because it's immutable. Attempting to change the value would result in a silent error – except in Safari – with the same value set for the constant.

That said, if our constant value was an array we can modify it since the value type isn't changing – but instead, just the data stored within it.

const names = [];

names.push('Jane');
names.push('John');

console.log(names); // ["Jane", "John"]

The same behaviour also applies to objects such as ES6 classes. I will be covering classes in the very near future.

Wrapping up

When working with ES6, try to avoid declaring the same variable twice as this will cause a SyntaxError exception to occur when the variable or constant already exists. You can find more information about the temporal dead zone using the below MDN reference link.

Thanking for reading and leave a comment below with your thoughts.

MDN Reference: Temporal Dead Zone, let, const

ES6 Browser Support, ECMAScript History

Basics Of ES6 (ES2015)
Share this

Subscribe to Chris on Tech