Arrow functions in JavaScript -

Arrow functions were an ES6 addition to the JavaScript standard. They were a pretty significant update to the base language, and the first update since ES5 to be standardized. The list of other ES6 features including enhanced object literals, new operators, and libraries can be found here.

Arrow functions are syntactical sugar to the regular JavaScript function expression notion. They are quite similar to other lambda procedures in C#, Java, and CoffeeScript. Arrow functions were introduced to the standard in order to write shorter and more compact functions. They have some differences and limitations compared to the regular function declaration syntax. If you want to find out what those differences and limitations are, keep on reading!

Basic syntax

This is the regular declaration syntax:

let sumNumbers = function(num1, num2) {
  return num1 + num2;
}

Simple, right? It is just a regular function bound to a variable called sumNumbers with two arguments num1 and num2. And below we rewrote the same function, with the only difference being is that it uses the arrow syntax:

let sumNumbers = (num1, num2) => {
  return num1 + num2;
}

So, we removed the function keyword, opting for just the argument list inside the braces. We introduced a new operator =>, called the “fat arrow operator”, which is essential to arrow function declaration.

We can further deconstruct an arrow function by removing the return statement and writing it in the simplest possible way paramList => expression, without the curly braces.

let sumNumbers = (num1, num2) => num1 + num2;

The arrow function will return the expression immediately upon execution and we don’t need to write the return statement (if it is a one-line return statement, otherwise for multi-line arrow functions we create the whole function block with curly braces).

Another arrow function syntax is that we can omit the parenthesis around the parameter if we have only one parameter, namely:

let squareNum = num => num * num;

If we have no arguments then the parenthesis are required but should be empty.

let sayHello = () => console.log("Hello Everyone!");

There is a slight difference when it comes to regular functions, and it is not purely cosmetic. The this is scoped inside the arrow function, compared to the different values we might get depending on the context in regular function expressions.

let obj1 = {
  myName: "Mehmed",
  print() {
    console.log("My name is " + this.myName);
  }
}

let obj2 = {
  myName: "Mehmed",
  print: () => {
    console.log("My name is " + this.myName);
  }
}

obj1.print(); //"My name is Mehmed"
obj2.print();  //"My name is undefined"

The this in the first object is immediately resolved to the obj1, because the scope in the regular function is the object itself. On the other hand, when we use the arrow functions the this is bound to the scope where it was defined (the global scope in our case), and it will refer to the global object during invocation. And it will return undefined when trying to access object properties. There are some ways to fix this, but the easiest is to use regular functions in these cases.

Final Words

Hope you had fun reading about arrow functions in JavaScript.

For more articles please click below, or check the blog.

Facebook Tweet Pin LinkedIn