ES6 and Arrow Function Expressions

MDN
4 min readNov 13, 2020

Javascript’s function expressions before 2015 ECMA Script (ES6) resembled many languages in its syntax:

// Traditional Function Declaration
function plusOneHundred(a){
return a + 100;
}

Here is a function, plusOneHundred(), and within parentheses an argument, a which is used to return a value a+100. A JavaScript function declaration pre-ES6 is similar to a C++ Constructor, in that it is not the execution of the function. Another difference is that a Constructor is used to build classes; prior to ES6 JavaScript, did not have classes.

// Traditional Function Expression
var value = plusOneHundred(1);
return value;
//101

The pre-ES6 function expression can be shown here as an integer variable value assigned with the value of the function(1) ; one could execute the function plusOneHundred without assigning it to a variable, but why would you? The data then is not being used for anything. Programmatically, we usually want to perform a calculation and apply it to an application. This is is why we use var in this case.

We can take value and apply it anywhere in our code. Though this can cause a lot of trouble if we only use var. If you want to learn more about why ES6 conventions encourage us to dispense with the use of var, please read this blog that I wrote on scope and hoisting:

How is an arrow function different?

//declaration
plusOneHundred = (a) => {return a+100};
//expression
let value = plusOneHundred(1);
return value;
// 101

We can see one immediate advantage. We get a very clear line of code. The way an arrow function works is param => expression. In this example it is difficult to see the advantage of arrow functions aside from just prettier code.

So why do we use arrow functions? A short answer would be, to simplify the code needed to bind object in a JavaScript library like React. When React was first building stateful objects, they required using .bind in the declaration of state.

--

--