JavaScript ES6 Features that make your life easier

Hello & welcome to today’s article on JavaScript ES6 Features that will make your life much easier as a JavaScript developer, So without wasting anytime let’s dive in

For the first time after releasing JavaScript’s 6th edition known as ES6, JavaScript started becoming so popular with tons of features that made developers life so much easier. in today’s writing we will be talking about some of the most useful features of es6 like enhanced object literals, spread & rest operators, destructuring, multi-line strings and so on

Destructuring

With the help of es6 feature destructuring we can get out array items and object properties as variable in a efficient and cleaner way, which is less code and more readable. let’s see how it works

const frontEnd = [
'html - structure',
'css - style ',
'bootstrap - css framework', 
'javascript - script language'];

So we have an array of front-end technologies named frontEnd, now in order to get out every time we need to write code this way

var html = frontEnd[0];
var css = frontEnd[1];
var bootstrap = frontEnd[2];
var javascript = frontEnd[3];

This was the way we was writing to get out array items from an array until destructuring feature comes. Doesn’t it look a bit repetition? Which breaks DRY principle. Let’s see how destructuring made it efficient to get out stuffs from arrays and objects

var [html, css, bootstrap, javascript] = frontEnd;

So we are just giving a third-bracket after var keyword and assignment operator then the array we are looking for to get out items from as local variables. we can name it anything and we will get the item from the array and use as variable by following the index

The exact system is for object destructuring means, getting out object properties from object as local variable in a easier way

var backEnd = {database: 'mongodb', library: 'express'};
// instead of get out items like this
var dataBase = backEnd.database;
var library = backEnd.library;

// we can use destructuring to make it in shorter code like this
var {dataBase, library} = backEnd;

Spread & Rest Operator

Spread & Rest Operator Looks same, indicated with … (tripple dot) but works slightly different way. spread operator used to spread iterables( arrays / objects / strings ) and make every item single on the other hand rest operator used to take in arguments in function as a array. let’s see each of them

var fullName = [ 'John', 'Smith'];
function sayHi(first,last){
console.log("hi " + first+ " " + last)
}
sayHi(...fullName);
// spreading the fullName array in sayHi function as a result every item of array goes as single argument by order

function makeArgumentsArray(...args){
console.log(args);
}
makeArgumentsArray(1,2,3,4,5);

by writing …args (can be anyname ) we are taking all the arguments passed down to the function and putting in args array with the help of rest operator

Enhanced Object Literals

this feature in es6 made writing object literals a bit easier, let’s explore it

var name = "Meer estiyak";
var age = 19;
var person = {
name: name,
age: age,
city: 'bangladesh',
gender: function () { 
 console.log('male');
}};

So if we want to make a object property’s value a variable, even the variable name and the object property name same we need to write which seems repetition but for the es6 we don’t need to write that value just only object property also we can make object method shorter by cutting the clone after method name as well the function keyword. let’s see how it looks in es6

var name = "Meer estiyak";
var age = 19;
var person = {
name,
age,
city: 'bangladesh',
gender() { 
 console.log('male');
}};
// doesn't it seem much readable and clean than the old one?

Another useful feature of es6 enhanced object literals that let us keep object encapsulated, let’s say we have an object property which will come from user input we don’t know, it can be non-standard to object property naming standard so we used to use bracket notation to add non-standard object property in object from outside which is against the encapsulation the fundamental of OOP. let’s see write it in older way as well the latest way down

var userInputProperty = 'Home Town';
var userInputPropertyValue = 'Dhaka'
const person = {
age: 33,
country: 'Bangladesh',
};
person[userInputProperty] = userInputPropertyValue;
// this is the older way to put non-standard object property in object which is from outside the object
var userInputProperty = 'Home Town';
var userInputPropertyValue = 'Dhaka'
const person = {
[userInputProperty]: userInputPropertyValue,age: 33,
country: 'Bangladesh',
};
// now we are adding non-standard object property from inside the object which follows the encapsulation paradigm as well more readable

Multi-line string

There was a time when we was only be able to write string with single and double quote only which have many difficulties and one of them is we can’t write multi-line string even we skip to the next line with an escape character, in output it’s not actually multi-line, So javaScript es6 feature bring us the way to write multi-line string with back tick (``). Let’s see how it works

var sentence = "Hello My name is meer estiyak \
i live in bangladesh \
it's beautiful country \
";
// even we was possible to write multi line in quotes with the help of escape character but in reality it's not actual multiline string as well disgusting
var sentence = ` Hello My name is Meer estiyak
I live in bangladesh
It's beautiful country
`;
// by writing this way we are able write multi-line string and we also don't need to think about that if we have a single quote inside we should be wrap this string with double and if double with single and if both we need to escape with character but it's really not the way to live life. so with the back tick now we can write multi-line string easily

For in loop

In order to loop through object properties in a much easier way es6 gave us the for of loop, let’s see how it works

var personDetails = {
name: 'Meer estiyak',
age: 18,
country: 'Bangladesh'
}
for (var property in personDetails) {
 console.log(property) 
 // we will get every property of personDetails Object
 console.log(personDetails[property])
 // we will get every property's value of personDetails Object
}

For of loop

for of loop is similar to for in loop but for of loop makes array items looping much easier, let’s see

var arrayOfNames = ['rifat', 'shifat', 'jahir', 'kabir'];
// now we will be looping through every item in this array with the help of for of loop
for (var name of arrayOfNames) {
 console.log(name)
 // we are logging in console every item in arrayOfNames array
}