6 Must Known New Features in ES6 – Part 3: Arrows

These are the newest and most crucial features in ES6 or also known as ECMAScript 6, ES2015, or JavaScript 6. This series of articles explains them super simple for you. Plus, each article states how to use the specific feature at its best.

This is article 3 of the series. This is my favorite new feature in ES6. Arrows => in ES6 substitute the function keyword. And they do not only substitute them but come with a handy twist for the this thing too.

Arrow Function Syntax

For example there is an array and and a forEach to loop through the elements of the array. Before ES6 it would have looked like this:

const aArray = [

  "foo",
  "bar"

];

aArray.forEach(function(sString) { // before es6

  console.log(sString);

});

But now with the new arrow keyword in ES6 it looks like this:

const aArray = [

  "foo",
  "bar"

];

aArray.forEach(sString => { // es6

  console.log(sString);

});

The arrow can be used in different ways if there is only one parameter. With or without parentheses. This is a matter of taste. I prefer to use the arrows without parentheses if there is only one parameter.

aArray.forEach((sString) => { // parentheses optional

  console.log(sString);

});

// or

aArray.forEach(sString => { // no parentheses

  console.log(sString);

});

But if the function has no parameter or more than one parameter then the brackets are obligatory:

aArray.forEach(() => { // parentheses obligatory

  console.log("foo");

});

// or

aArray.forEach((sString, iIndex) => { // parentheses obligatory

  console.log(sString);

});

Furthermore, the curly brackets can be omitted if there is only one statement within the function. This is the inline version of the arrow function. It is kind of like the inline version of an if statement.

aArray.forEach((sString) => { // curly brackets optional

  console.log("foo");

});

// or

aArray.forEach((sString) => console.log("foo"); // no curly brackets

And now it is even possible to get the leanest version of an arrow function. By combining the omitting of the parentheses if there is only one parameter and the omitting of the curly brackets if there is only one statement within the function:

aArray.forEach(sString => console.log("foo"); // no parentheses and no curly brackets

With the inline arrow function version the return keyword is implicit:

let iX = 1;
let iY = 0;

iY = iX => iX++; // return is implicit: iY = iX => return iX++;
 
console.log(iY); // 2

This means:

  • => substitutes function
  • one parameter then the parentheses are optional
  • one statement then the curly brackets are optional
  • inline version of the arrow function has an implicit return

this and Arrow Functions

But it is not possible to go to a project before ES6 and just search and replace all function keywords with =>. Because the arrow function handles the this keyword differently as the function function.

With the function keyword the this keyword changes within the function and it reference to the global window object:

let fnFunction = function() {

  console.log(this);

};

let oObject = {

  function: fnFunction;

};

oObject.function(); // this refers to the global window object

But with an arrow function the this keyword refers to the scope of the function like one would expect it who is not familiar with JavaScript:

let fnFunction = () => console.log(this);

let oObject = {

  function: fnFunction;

};

oObject.function(); // this refers to the function fnFunction
No Comments

Get Exclusive SAP Tips

Learn about exclusive SAP tips and insights that are only shared with the private newsletter subscribers.

Will SAP UI5 replace the SAP Web UI?

Result

Essential Ressources

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu