A general review of ECMAScript 2015 (ES6)

ES6 is the newer standardization/version of Javascript, which was released in 2015. It is important to learn ES6, because it has many new features that help developers write and understand JavaScript more easily. Modern Frameworks like Angular and React are being developed with ES6. Its syntax is also different than classic JavaScript.

So what’s new in ES6? Let’s have a look.

1. let & const keywords

ES6 brings two new keywords for variable declarations: let and const.

We used to have only the var keyword in JavaScript to declare variables:

var name = 'Cem';

In ES6, we use the let keyword instead.

Why ‘let’ instead of ‘var’ ?

Because the usage of var causes scope problems. For example, let’s define a string with var globally and locally:

var word = 'I am global';

if(true) {  
  var word = 'I am local'; 
}

console.log(word); // What do you expect here as result?

The console.log should print the global string: 'I am global'. Because the second declaration var word = 'I am local' is a local string and console.log is outside of the if block:

Unexpectedly, the local variable which we have defined with var has ignored the if block and gets printed to the console. To prevent this problem, ES6 brings us a new keyword: let.

Let’s try again with let:

let word = 'I am global';

if(true) {
  let word = 'I am local'; 
}

console.log(word); // This time what do you expect?

This time the global string has printed as we expected, let solved the scope-problem.

Another issue of the ‘var’ statement

We can both re-assign variables with var and let. But, let doesn’t allow us to redeclare the same variables:

var number = 1;
var number = 2;

console.log(number); // No errors here, 2 gets printed

Let’s try again with let:

let number = 1;
let number = 2;

console.log(number); // let doesn't allow redeclaration

You can still use var in ES6, but it is not recommended.

The const keyword

Let’s continue with the const keyword. const means constant.

“Constant: something that does not change.”

When we declare a constant variable, we cannot change it later. For example, birth date is a constant.

const birthYear = 1990;

birthYear = 2000; // You cannot re-assign a constant variable

If you try to change or redeclare a const variable, it will give an error:

Using const improves your code quality. Use it only when you’re sure that your variable is not going to change later.

2. Template Literals

Template literals are one of the new syntaxes of ES6, for creating strings and printing dynamic variables.

• To create a string, use back tics ( `` ) instead of single or double quotes:

let oldWay = 'A word';  // JS Way

let newWay = `A word`;  // ES6 Way

• Use the interpolation syntax: ${ expression } to simplify string concatenation and to create dynamic variables

Let’s define some variables and use the old and new methods to print them:

let name = 'Cem';
let age = 28;
let profession = 'Software Developer';

The previous JavaScript way:

console.log("Hello, my name is " + name + ", I'm " + age + " years old and I'm a " + profession);

The ES6 way:

console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm a ${profession}.`);

We can do much more with template literals, and you can check here for more details.

3. Arrow Functions

Arrow Functions use a fat arrow => rather than the function keyword, when defining a function:

JavaScript Function:

var sum = function addition (firstNum, secondNum) {
    return firstNum + secondNum;
}

ES6 Function:

let sum = (firstNum, secondNum) => { return firstNum + secondNum };

We can also omit the return keyword, unless our function returns a code block.

Since this article is about an overview of ES6, I’m not going much deeper of arrow functions. You can get more information about arrow functions here.

4. The Spread and Rest Operators

Have you ever seen three dots ... in programming? This is called the spread syntax.

Spread Operator — Usage for Arrays

We have an array of numbers: let numberArray = [1, 19, 21, 85, 42]

We can use the spread operator:

• to get the values (numbers) out of the array:

console.log(...numberArray);

Using the spread operator doesn’t affect the array itself.

• to concat the array with another array:

let charArray = ['a','b','c'];

charArray.push(...numberArray);

console.log(charArray);

Otherwise, the numberArray would be added as the fourth element, directly inside the charArray:

Rest Operator — Usage for Functions

The other usage of three dots ... are for function parameters.

A parameter given after three dots turns into an array which will contain the rest of the parameters called the rest operator.

function count (...counter) { // parameter becomes an array
  console.log(counter.length);
}

count(); // 0
count(10); // 1
count(1, 10, 24, 99, 3); // 5

Since the ...counter is now an array, we can get the length of it. All the parameters that are given to the count() function are now values of the counter array:

5. Import & Export

Another new feature of ES6 is that it lets us import & export our classes, functions, and even variables to other parts (files) of our code. This approach helps us programmers a lot when we want to break the code into smaller pieces. It increases the readability and maintenance of the project code in the future.

Let’s see how it works:

Firstly, we create an ES6 function and export it with the export keyword.

export let myFunction = () => { console.log('I am exported!'); }

After that, to import myFunction to another file, we need to define its folder path, name of the file, and the import keyword.

import { myFunction } from './yourFolderPath/fileName';

Finally, call the function in the imported file and use it.

myFunction();

This is how we can break our code into smaller pieces, with the help of export & import. We can also import other modules and services like HttpService, Router, Axios, and Bootstrap to use them in our code too, after installing them in our node_modules.

I’ve explained some new features of ES6 in this article. There are many other features and more details that you should check out. If you find this article helpful, please share it so more people can read it.

Thank you for reading and for your support! :)