ES6 features
Posted By :Vikrant Kumar |27th April 2022
What is ES6 ?
ECMAScript 2015 commonly knowns as ES6 or ES2015 released on June 2015. ES5 was released on December 2009. It takes almost 6 years for the next version of ECMAScript to be released. So, there are many exciting features in ES6.
Best 10 ES6 features for a busy javascript developer.
1. Template Literals
2. Multi line strings
3. Default parameters
4. Destructuring
5. Arrow functions
6. Enhanced Object Literals
7. Promises
8. Let and Const
9. Spread Oprator
10. Export and Import modules
. . . . . . . . . . . .
1. Template Literals
In ES6, we can use a new systax ${Parameter} inside of the back-ticked string.
var name = `Your name is ${firstName} ${lastName}.`In ES5, we have to break string like below.
var name = 'Your name is '+ firstName + ' ' + lastName + '.'}.`
2. Multi line strings
In ES6, It is very simple to write a string in multiple lines. Just use back-ticks.
let paragraph = ` Lorem ipsum is simply dummy text of the
printing and typesetting industry.
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s. `
In ES5, we had to use below approach.
let paragraph = ' Lorem ipsum is simply dummy text of the \n '
+ ' printing and typesetting industry. \n '
+ ' Lorem Ipsum has been the industry's \n '
+ ' standard dummy text ever since the 1500s. \n '
3. Default Parameters
In ES6, we can put the default values right in the signature of the function.
var calculateArea = function(height = 50, width = 80){
// write logic
. . . .
}
4. Destructuring
The destructuring assignment syntax is a Javascript expression that makes it possible to unpack values from arrays, or properties from objects,
into distinct variable.
var name = {firstName : 'John', lastName : 'Doe'};
var {firstName, lastName} = name ;
console.log(firstName); // John
console.log(lastName); // Doe
In ES5, we had to use below approach
var name = {firstName : 'John', lastName : 'Doe'};
var firstName = name.firstName ;
var lastName = name.lastName ;
console.log(firstName); // John
console.log(lastName); // Doe
5. Arrow Functions
The Fat arrows are amazing because they would make this behave properly , i.e., this will have the same value as in the context of the function, It won't mutate.
$('.btn').click( (event) => {
this.doSomething();
});
In ES5 , we had to use _this = this or .bind(this).
var _this = this;
$('.btn').click( function(event) {
_this.doSomething();
});
6. Enhanced Object Literals
Object literals make it easy to quickly create objects with properties inside the curly braces.
function getLaptop(brand, model, year){
return {
brand,
model,
year
};
};
getLaptop("Dell" , "Latitude", "2022");
In ES5, we had to use below syntax
function getLaptop(brand, model, year){
return {
brand : brand,
model : model,
year : year
};
};
getLaptop("Dell" , "Latitude", "2022");
7. Promises
Promises are used for asynchronous execution. In ES6, we can use promise with arrow function shown below.
var myPromise = new Promise( (resolve, reject) => {
setTimeout( ()=>{
resolve('foo');
}, 300);
});
myPromise
.then( value=> {return value + ' and bar';})
.then( value => {return value + 'and bar again';})
In ES5, we need to use setTimeOut ( ).
setTimeout ( funtion (){
console.log(' Yayy!');
});
8. Let and Const
let is a new var which allows to scope the variable to the block. So, the main diffrence between let and var is, var is scoped to the nearest
function block and let is scoped to the nearest enclosing block, which can be smaller than a function block.
In ES6,
function calculateAmount (boolVal) {
let amount = 0;
if(boolVal) {
let amount = 1; //scope of this amount ends with nest closing breacket
}
return amount;
}
console.log(calculateAmount(true)); // output : 0
In ES5,
function calculateAmount (boolVal) {
var amount = 0;
if(boolVal) {
var amount = 1;
}
return amount;
}
console.log(calculateAmount(true)); // output : 1
9. Spread Oprator
Spread systax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or
elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value paires (for objects literals) are expected.
let numbers = [0,1,2,3];
let newNumber = 4;
numbers = [...numbers, newNumber];
console.log(numbers); // [0,1,2,3,4]
to clone an object
let obj = {
name : 'John Doe',
age : 24,
designation : ' Assistant Consultant-Development '
}
let objClone = {...obj}
10. Export and Import modules
In ES6, there are modules with import and export operands.
export var userId = 10;
export function getName (name){
. . .
};
we can import userId variable and getName method using import statement.
import {userId , getName} from 'module';
console.log(userId); // 10
There are other many ES6 features, you can find all them and do practice.
Ready to innovate ? Let's get in touch
