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

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

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

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

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 disgustingvar 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

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

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
}

Front End Developer