Essential ES6 Features
Many javascript learners often hearing about new ES6 features. It's really necessary to understand about to use for better and clean code. Not only clean code which also makes your code simple and easily understandable. Here I m gonna explain the most useful features as there are a lot of features available in ES6(Ecmascript 2016).
What is ES6(aka ECMAScript 2015)?
ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript, and version 6 is the next version after version 5, which was released in 2011. ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015.
1.Template literals
Before ES6 dealing with string concatenation is a little difficult way when it goes to multiple lines of string with builded variables. Template literals provide the clean code by getting rid of ugly string concodinations. Here are the below code comparing both ES5 and ES6.
//ES5
var name = ‘Programmer First’;
var greeting = ‘Hello ‘+name+’ Good Morning! Have a wonderful day.’;
The above code can be replaced below ES6 feature.
//ES6
const name = ‘Programmer First’;
let greeting = `Hello ${name} Good Morning! Have a wonderful day`;
The above string concodinated using backtrick symbol and the variable can be concadinated using syntax ${expression}. The expression can be replaced by any variable name even you can call a function or pass any javasciprt expressions which will provide results.
The good benefit is for email templating. Now the developers can use HTML email templating with template literals to avoid confusing and provide a clean code. As the template literals support all modern browsers. Having doubt? check it in chrome developer tools now.
2. Arrow functions
Array function is another fantastic feature in ES6. Which also allow us to write function codes in a simple and clean way. Before ES6 the function code will look like below.
//ES5 Function
const mul = function(num)
{
return num*num;
}
In ES6 the function keyword is replaced with fat arrows => following parameter then paranteis
//ES6
const mul = (num) => { num*num; }
its just a one-line code now. You don’t need to mention return keyword which will automatically return the value. You can even remove the parenthesis if you have only one parameter like below
//ES6 arrow function
const mul = num => num*num;
looks great, isn’t it.
The arrow function doesn’t rebind this like normal functions.
Example
function submitForm(arr)
{
var that = this; // which allow us to keep the reference of “this”, So we can use it in inner function
arr.map(function(data,i){
// In JavaScript, ever function defines its own "this" value. So, "this" in this inner function
// here is different from "this" in the sumbitForm() function. That's why we had to keep a
// reference to "this" and store it in "that". Now, we can use "that":
console.log(data);
});
}
if we replace the above code with arrow function. We don’t need to keep a reference for inner function. Arrow functions don’t use this. They use this value of the enclosing execution context.
//ES6
function formSubmit(arr)
{
//As we are using the arrow function this reference the this value of the containing function.
arr.map( data = > {
consoel.log(data);
});
}
3. ES6 Default parameters
Usually, we define our default parameters in ES5 by the following way.
//ES5
var circle = function(radius, color, border)
{
var radius = radius || 20;
var color = color || ‘red’;
var border = border || ‘single’;
}
We often use this default parameter if the actual parameters values are falsy value. Which can be replaced with the below ES6 default parameter feature.
//ES6
var circle = function(radus=20, color=’red’, border = ‘single’)
{
//function code goes here
}
which provides the cleaner code for falsy value default parameters.
4.Destructuring
Destructuring is a property which allows us to extract the property from an object, items from an array.
Let's say if you have student object where there are different properties available like below example,
//JavaScript object
var student = {
name:’John’,
age:20,
gender:’male’
};
if you want to extract the property then you need to code like below in ES5.
var name = student.name;
var age = student.age;
var gender = student.gender;
We have this redundant code over and over: “student.” repeated 3 times. Object destructuring gives us a short and clean syntax to extract the value of multiple properties in an object:
//ES6
const { name, age, gender } = studnet;
The above code provides us the clean way to extract the object property by placing curly braces on the left to destructuring the student object. The curly braces defining three variables name, age, gender. Its perticularry useful when you are dealing with a nested object.
Note that we don’t have to list all the properties in the address object. Maybe we’re interested only in the street property:
const { street } = address;
Object destructuring is particularly useful when you’re dealing with nested objects
const person = {
name: 'Joe',
address: {
billing: {
street: '73rd crosscut road',
city: 'Bangalore',
state: 'Karnataka'
}
}
};
Without destructuring, we would have to write this with repetitive code
const street = person.address.billing.street;
const city = person.address.billing.city;
const state = person.address.billing.state;
Now, we can achieve the same result using a single line of code:
const { street, city, state } = person.address.billing;
Array destructuring
We can also destructure arrays but we use square brackets ([]) instead of curly braces ({}). Let’s say we have an array and we want to extra the first and second item and store them in two different variables
// ES5
const values = ['Jibin', 'Mathew'];
const first = values[0];
const last = values[1];
With ES6 destructuring, we can re-write the above code like this:
// ES6
const values = ['Jibin', 'Mathew'];
const [first, last] = values;