Top ECMAScript – ES6 Features Every Javascript Developer Should Know

JavaScript was created in just 10 days. It was not meant to be, what it is today. JavaScript is one of the most popular languages today. It is fair to say, It is also one of the most important programming languages. Along with HTML and CSS, JavaScript is the core technology of the World Wide Web. Almost every major website is built using javascript. But it is also fair to say, sometimes, it is pain while working with JavaScript. As mentioned earlier, JavaScript was created in such a short time, and it was never meant to be this big thing. The use of javascript increased, and many new features and improvements were added.

In 1997, the ECMAScript stand was established. ECMAScript is the specifications for creating a scripting language. JavaScript confronts to the ECMAScript specifications. ES3 came out in 1999 that caused major rage amoung javascript developers. In the upcoming years, other versions also came out. But the most important version, ES6, came out in 2015. This version brought so much for the javascript syntax. Yes! Two more versions, ES7 and ES8 also came out later, but the major changes were already brought out by the ES6 version. In this article, we will discuss what new features came with ES6.

Features of ES6

1. Arrow Functions

The concept of arrows was first introduced in CoffeeScript and since then, the javascript developers who had worked with CoffeScript wanted the same concept in JavaScript. And finally, arrows were introduced in ES6. Arrow functions simply reduced the number of lines in a program.

Look at the following function in javascript. This is how we normally code functions in javascript.

var a = 1;
var b = 2;
const sum = function(a,b){
    return a+b;
}

sum()

Now, let’s modify this using the arrow function.

var a = 1;
var b = 2;
const sum = (a,b) = > a + b;
sum()

The result is the same in both cases but the second one looks much better, isn’t it?

2. Promises

Promises have always been controversial. Some say promises are great while some say the work can be done generators, async, callbacks, etc.

Let’s take simple delayed asynchronous execution

setTimeout(function(){
  console.log('Hello World!')
}, 2000)

Let’s modify it with ES6 promise.

var wait =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000)
}).then(function() {
  console.log('Hello World!')
})

or just make it a little short using arrow functions.

var wait =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 2000)
}).then(()=> {
  console.log('Hello World!')
})

We increased a few lines but there is not any benefit. Yes, this is controversial. But for some developers, promises are better, and for experienced developers, callbacks are better options.

Personally, I prefer promises.

3. Default Parameters

And finally, javascript also had default parameters, similar to Ruby.

var sum = function(a = 10, b = 20, c = 30){

.......

}

4. Template Literals

The way to output variables in a string is called interpolation or template literals. In ES5, we used to do something like this.

var firstname = 'Johny'
var lastname = 'Bravo'
var fullname = 'My name is ' + firstname + ' ' + lastname + '.'

The third line is a bit weird. So ES6 introduced template literals.

var firstname = 'Johny'
var lastname = 'Bravo'
var fullname = `My name is ${firstname} ${lastname}.`

Now, this looks better. Just remember, here we are using backticks, instead of single quotes.

5. Multi-line Strings

Whenever it comes to multi-line strings, I always felt it frustrating (Don’t know about you though). Have a look at the following code in ES5.

var multiline = 'multi-line string multi-line string,\n\t'
    + 'multi-line string multi-line string\n\t'
    + 'multi-line string multi-line string,\n\t'
    + 'multi-line string multi-line string\n\t'

Every time we need to use \n and \t. This is irritating and time-consuming. ES6 simplified this.

var multiline = `multi-line string multi-line string,
				multi-line string multi-line string,
				multi-line string multi-line string,
				multi-line string multi-line string`

Again, all we need is to use backticks instead of single quotes.

6. Const and Let

Earlier, the var keyword was used to declare variables. This keyword had issues. So, const and let were introduced in ES6. They both have their own way of storing variables.

The const keyword is used to store a variable whose value is not going to change, or whose value a developer does not wish to change. For many javascript developers, the const keyword is more powerful and useful than the var keyword. Whenever we try to change the value of a const variable, it will give a type error. But the value of an object declared using the const keyword can be changed. 

The let keyword is very much similar to the var keyword. Unlike the const keyword, its value can be changed. But there is one key difference. It’s in scoping. This is why the let keyword is also considered better than the const keyword.

7. Modules

This is one of the best features of ES6. Earlier, there was no native module support in javascript. Developers used to go for alternatives but ES6 introduced import and export operands. We can directly import and export in ES6.

module.js

export var name = 'Johny'
export function demo() {
  ...
}

And in the importing file, main.js, we can simply import from module.js file.

mport {name, demo} from 'module'
console.log(name) // 'Johny'

8. Classes

If you have experience in programming languages such as Java and C++, you may no the importance of object-oriented programming. It was ES6 that introduced classes in javascript.

class Dog{ 
    constructor(name,breed){ 
        this.name = name; 
        this.breed = breed; 
    } 
} 
  
const dog1 = new Dog('Tommy','Labrador'); 
const dog2 = new Vehicle('Scooby','Great Dane'); 
  
console.log(dog1.name); // Tommy
console.log(dog2.name); // Scooby

9. Rest Parameter

Usually, when we call a parameterized function, the number of arguments we pass is the same as the number of arguments defined during the function declaration. But in javascript, we can do something like this.

const sum = function(a,b){

	return a+b
}

console.log(sum(1,2,3,4,5))

Look at the last line where we call the function. We passed five values while the function accepts only two. But it will not throw any error. The function will return 3, as the sum of the first two arguments. But ES6 introduced the concept of rest parameters. Have a look at the following code.

const sum = function(...args){ 
    let sum = 0; 
    for(let i of args){ 
        sum+=i; 
    } 
    return sum; 
} 

console.log(sum(1,2,3,4,5))

This time we did not define the number of arguments during the function declaration. Instead, we used, three dots followed by a word. The word specified can be used to iterate through the arguments passed to the function. The function will return 15.

Conclusion

So these were the features of ES6. If you work in javascript, you may know how efficient ES6 is. The next two versions, ES7 and ES8 also introduced some good features, but it was ES6 that really provided some excellent syntax benefits.

Acodez is a renowned web design and web development company in India. We offer all kinds of web design and web development services to our clients using the latest technologies. We are also a leading digital marketing company providing SEO, SMM, SEM, Inbound marketing services, etc at affordable prices. For further information, please contact us.