Why I am in love with ES6

Satish Sharma
3 min readMay 8, 2021

es6 having many new features to vanilla javascript making the language do more with less syntax.

New features like let and fat arrows let us manage scope very easily too.

Today I am trying to cover some features here.

Fat arrows

The most noticed feature of ES6 The Fat Arrows. Fat arrows allows you to bind the this context of your current scope with the executing function. Fat arrows also helps to write less code thanks to its minimal syntax.

// es5
function returnArgPlusOne (arg) {
return arg + 1;
}

//es6

const returnArgPlusOne = arg => arg + 1;

//es5

sampleArray.forEach(function(elem, index){

console.log(elem + ‘ comes at ‘ + index);

});

//es6

sampleArray.forEach((elem, index) => console.log(`${elem} comes ate ${index} `))

//es5

var resultArray = sampleArray.filter(function(elem){

return elem !==2;

})

//es6

var resultArray = sampleArray.filter(elem => elem !== 2)

Fat arrows comes in many flavours for e.g if you just have one parameter you can define parameter without using parenthesis.

const returnArgPlusOne = args => args + 1;

if you don’t put braces around your functional body the expression will be automatically returned

One more interesting feature about Fat arrows is it will automatically bind your current this context with the executing function.

fat arrows will automatically bind your current context with the execution function.

Rest/Spread Operators

They basically lets you expend and use your Object or Array. For Eg

// ES5
var a = [5,2,3];function plusThree (a, b, c) {
return a + b + c;
}
plusThree(a[0],a[1],a[2]);
// ES6
let a = [5,2,3];
const plusThree = (a, b, c) => a + b + cplusThree(...a);
// Whoa That was totally cool !!!// Or merge objectslet user = {
name: "Satish",
age: "19",
profession: "Javascript Developer"
}
let userModified = {...user, age: "20"} // takes all the properties from user then replace age with 20

This is the spread operator which can be used to expand the Object or an array.

Object Deconstruction

I love this more than any other feature Fat Arrows and Object Deconstruction are one of my favourite features among ES6. Object Deconstruction simply lets you deconstruct an Object, extract its properties and use them as local variables. For e.g.

let user = {
name: "Satish",
age: "19",
profession: "Javascript Developer"
}
let {name, age} = user;console.log(name, age) // should output "Satish" and "19"

This is something ground breaking now you don’t have to do something like this

var user = {
name: "Satish",
age: "19",
profession: "Javascript Developer"
}
var name = user.name;
var age = user.age;
console.log(name, age) // should output "Satish" and "19"

The ES6 Object Deconstructor let you cleanly extract value out of objects.

Default Parameters

So yeah we can do this now. ES6 brings the support of Default Parameters So you don’t have to do something like this

function defArg (arg, defa) {
var arg = arg || 2;
var defa = defa || 6;
// your computation here
}

Instead you can do something like this

const defArg (arg = 2, defa = 6) {
// your computation here
}

You can also use default parameters with Object Deconstructions. For e.g.

let user = {
name: "Satish",
age: "19",
profession: "Javascript Developer"
}
let {name, city = "Gurgaon" } = user;console.log(name, city) // should output "Satish" and "Gurgaon"

import & export keywords

Days gone when we use module.exports and require to import and export modules in our Javascript projects. Meet import and export the new ways to make your code reusable. Let’s take a look at them.

// ES5
var YourModule = require('./YourModule');// ES6
import YourModule from './YourModule';// ES5
var child = require('./YourModule').child;// ES6
import {child} from './YourModule';

Saw how easily I used Object Deconstruction with importing child module ;). Exporting your modules are also pretty easy. For e.g.

// ES5
var child = "toSomething";module.exports = {
child: child
}
// ES6export const child = "toSomething";// ORconst child = "toSomething";export default {
child
}

See how easy it was ? :)

--

--