Let's begin with this. ES6 or the ECMAScript 2015 is the 6th and major edition of the ECMAScript language specification standard.In this article, I will introduce the top 10 ES6 features.
. . . . . . . . . . . .
Lets start the interesting parts🤩
1. let and const keywords :
The keyword "let" enables the users to define variables and on the other hand, "const" enables the users to define constants.
With “let and const” we declare a variable similar to var in ES5, but the real difference is that variables declared by var have function scope and are hoisted to the top. Variables declared by “let and const” are scoped in the braces.
2. Arrow Functions :
ES6 provides feature known as Arrow Functions. It provides a more concise syntax for writing function expressions by removing out the "function" and "return" keywords.
Arrow functions are defined using the arrow (=>) notation.
// Arrow function
let sumOfTwoNumbers = (x, y) => x + y;
console.log(sum(33, 2)); // Output 35
It is evident that, there is no "return" or "function" keyword in the arrow function declaration.
We can also skip the parenthesis in the case when there is exactly one parameter, but will always need to use it when you have zero or more than one parameter.
But, if there are multiple expressions in the function body, then we need to wrap it with curly braces ("{}"). We also need to use the "return" statement to return the required value
3. Multi-line Strings :
ES6 also provides Multi-line Strings. Users can create multi-line strings by using back-ticks(`).
let greeting = Good morning,
Enjoy your day ,
Happy coding!
4. Default Parameters :
In ES6, users can provide the default values right in the signature of the functions. But, in ES5, OR operator had to be used.
//ES6
let calculateArea = function(height = 100, width = 150) {
// logic
}
//ES5
var calculateArea = function(height, width) {
height = height || 150;
width = width || 100;
// logic
}
5. Template Literals :
ES6 introduces very simple string templates along with placeholders for the variables. The syntax for using the string template is ${PARAMETER} and is used inside of the back-ticked string.
let name = My name is ${firstName} ${lastName}
6. Destructuring Assignment :
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 o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
7.Enhanced Object Literals :
ES6 provides enhanced object literals which make it easy to quickly create objects with properties inside the curly braces.
function getMobile(manufacturer, model, year) {
return {
manufacturer,
model,
year
}
}
getMobile("Samsung", "Galaxy", "2020");
8. Promises
In ES6, Promises are used for asynchronous execution. We can use promise with the arrow function as demonstrated below.
var asyncCall = new Promise((resolve, reject) => {
// do something
resolve();
}).then(()=> {
console.log('DON!');
})
9. Classes :
Previously, classes never existed in JavaScript. Classes are introduced in ES6 which looks similar to classes in other object-oriented languages, such as C++, Java etc.
But, they do not work exactly the same way. ES6 classes make it simpler to create objects, implement inheritance by using the "extends" keyword and also reuse the code efficiently.
In ES6, we can declare a class using the new "class" keyword followed by the name of the class.
class UserProfile {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
console.log(The Full-Name is ${this.firstName} ${this.lastName});
}
}
let obj = new UserProfile('John', 'Smith');`
obj.getName(); // output: The Full-Name is John Smith
10. Modules :
In ES6, there are modules with import and export operands.
export var userID = 10;
export function getName(name){
//data
}
We can import userID variable and getName method using import statement
import {userID, getName} from ‘module’;
console.log(userID); // 10
In conclusion,
We also learned about the top 10 features of ES6😎 which makes it very popular.
ES6 provides classes, modules, arrow functions, template literals, destructuring assignments and many more features which makes working with JavaScript a lot easier.
Top comments (0)