JAVASCRIPT ARROW FUNCTION

What is arrow function in JavaScript?

Arrow function is one of the features introduced in ES6 for writing better javascript.

Arrow function in javascript is an alternative way to write a function with shorter and cleaner syntax than a regular function.

An arrow function is also called fat arrow function.

Syntax of arrow function

() => { ... } // no parameter
arg1 => { ... } // single parameter
(arg1, arg2, arg3, ...) => { ... } // multiple parameter

Below is an example of arrow function which takes 3 argument and returns the sum of the arguments.

// basic arrow function
const add = (a, b) => { return a + b };
// calling function
console.log(add(5, 15));

In the above example 'add' is name of the function, parenthesis holds arguments and curly braces contains statement of the function.

In arrow function when there is only one statement then You can omit curly braces and just write the statement.

let increment = (a) => a + 5;
console.log(increment(10));

When there are multiple statements in the arrow function then you can't omit curly braces. Here is an example of an arrow function which has multiple statements.

const fxn = () => {
  const date = new Date();
  const hour = date.getHours();
  if (hour => 12) {
    console.log("PM");
  }
  else {
    console.log("AM");
  }
}
fxn();

Javascript Arrow Function Without return Keyword

Now you have a basic understanding of how to write arrow function, let's explore it more.

Writing arrow function with single statement is even shorter with a javascript arrow function.

In the above example, a + b is returned using return keyword, but when there is an only single statement in arrow function then you can omit return keyword and remove curly braces ( {} ) and it still works in the same way.

Arrow function return value by default.

// arrow function without return keyword
const add = (a, b) => a + b;
console.log(add(1, 2));
const multiply = (a, b, c) => a * b * c;
console.log(multiply(5, 3, 4));

Javascript Arrow Function With Single Argument

Arguments are wrapped up in small bracket () in any kind of function, but when there is only 1 argument in arrow function then you can omit parenthesis and write the only argument.

In the example below there is only one argument 'name' for the 'greeting function'.

// removing parenthesis for a single argument
const greetings = name => "Hello " + name;
console.log(greetings("John"));
console.log(greetings("Jeany"));

Note: Removing parenthesis only works when there is only 1 argument.

Javascript Arrow Function With No Argument

When there is no argument in arrow function then you can write arrow function in 2 different ways. First, simply use parenthesis () before the arrow (=>) with no argument, and second, you can use underscore ( _ ) replacing parenthesis.

const greet = () => "Hello World!";
console.log(greet());

Let's see another example which has underscore _ in the place of parenthesis.

// using an underscore in place of ()
const greet = _ => "Hello World!";
console.log(greet());

Javascript Arrow Function VS Function

An arrow function is very much different from a regular function. At some places, it is better to use arrow function while at different place regular function is better.

Let's see the difference between arrow function and regular function for better understanding.

this In Arrow Function Javascript

Javascript arrow function handles this differently.

In regular function, this represents the object that calls the function, like button, document, window etc but this in arrow function represents only the object that defines the arrow function.

Let's see an example to understand the difference.

let car = function (carName,speed) {
  this.carName = carName;
  this.speed = speed;
  this.info = function () {
    setTimeout(function () {
      console.log(this.carName + " runs at " + this.speed);
    }, 2000)
  }
}
let bmw = new car("BMW", 120);
bmw.info();

The output is "undefined runs at undefined". You got undefined because the callback function set in setTimeout for invokation is regular function and this mean that this for the function is set to window object, because this in regular function depends on who invoked the function.

So if some how we could have referred this to the same object which defined the function then we can solve the problem.

This is what an arrow function can do. The this of arrow function refer to the object which defines it. See the example below to understand.

let car = function (carName,speed) {
  this.carName = carName;
  this.speed = speed;
  this.info = function () {
    setTimeout(() => {
      // this represent the object which defines the function
      console.log(this);
      console.log(this.carName + " runs at " + this.speed);
    }, 2000)
  }
}
let bmw = new car("BMW", 120);
bmw.info();