DevPremier
Ashwani Garg Arrow functions were introduced with ES6 as a new syntax for writing JavaScript functions. They save developers time and simplify function scope. And every developer should know What Javascript ES5 function vs Fat arrow function in ES6 is. Posted at:

Javascript ES5 function vs Fat arrow function in ES6

Javascript ES5 function vs Fat arrow function in ES6

Table of Contents

Arrow functions were introduced with ES6 as a new syntax for writing JavaScript functions. They save developers time and simplify function scope. And every developer should know What Javascript ES5 function vs Fat arrow function in ES6 is.

Why you should use ES6?

With ES6 you now have another option for creating Javascript functions. You are probably familiar with the ES5 way of creating a function with the ‘function’ keyword.

ECMAScript, or ES6, was published in June 2015. It was subsequently renamed to ECMAScript 2015. Web browser support for the full language is not yet complete, though major portions are supported. Major web browsers support some features of ES6. However, it is possible to use software known as a transpiler to convert ES6 code into ES5, which is better supported on most browsers.

Let us now look at some major changes that ES6 brings to JavaScript.

Constants

Support for constants (also known as "immutable variables"), i.e., variables which cannot be re-assigned new content. Notice: this only makes the variable itself immutable, not its assigned content (for instance, in case the content is an object, this means the object itself can still be altered).
ECMAScript 6 — syntactic sugar: reduced | traditional
const PI = 3.141593
PI > 3.0
ECMAScript 5 — syntactic sugar: reduced | traditional
//  only in ES5 through the help of object properties
//  and only in global context and not in a block scope
Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,
    writable:     false,
    configurable: false
})
PI > 3.0;

Arrow Functions

ES6 brings a new syntax for defining functions using an arrow. As you can see, the ‘function’ keyword is no longer necessary. By using the fat arrow syntax ( => ) ES6 knows you are using a function.

Syntax

()=>{}

Fat arrows functions are my favorite function of addition in Javascript.

Although all the latest browser supports the ES6 functions, if you are using some old browser, always try to add this like on the top of the code to throw errors and to tell the browser to use the latest javascript functionality.

"use strict"; 

Now try with an example between ES5 and ES6

"use strict";

//In ES5
var getA = function(a){
   return a;
}

//In ES6, we will use fat arrow function
let getA = a => a;
//or 
let getA = (a) => {return a};
console.log(getA(16));
// expected output: 16

//that's it

Now let's look at some pretty ES6 functionalities and where you should use or not to use Fat arrow ES6 function

let's look at the below example

ECMAScript 6 

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)
ECMAScript 5 

odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });