Arrow function in JavaScript

 

What Are Arrow Functions

“Arrow functions were like rocket fuel for the functional programming explosion in JavaScript.” 

— Eric Elliott

Arrow functions, also called “fat arrow functions”, were a new feature added in ES6. Simply they are a shorthand way of writing a function but there’s a catch: they don’t work exactly like traditional functions. Why you ask? We’ll be discussing that later after we learn how to write arrow functions in JavaScript.

Let’s start by taking a normal function and then convert it to an arrow function. We’ll be looking at this simple function and convert it to an arrow function.

Lets take a look at a regular function:

var add = function(x, y) {
	var total = x + y;
	return total;
	}
	console.log(add(2, 3));

To convert it to an arrow function simply remove function then place a =>

 just before the function block starts.

var add = (x, y) => {
	var total = x + y;
	return total;
	}
	console.log(add(2, 3));

That already looks cleaner than before. We can make further improvements by removing extra code. Next we make the function “one liner” by removing the total variable and return the result directly.

var add = (x, y) => { return x + y; }
	console.log(add(2, 3));

Pretty cool. This example is obviously an extreme simplification, but hopefully illustrates my point. Let's take a look at the syntax of arrow functions a little more in-depth:

Arrow functions with single argument

(parameters) => { statements }

When you only have one parameter, the opening parenthesis are optional:

parameters => { statements }

Finally, if you are returning an expression, you remove the brackets:

parameters => expression// is equivalent to:function (parameters){
  return expression;
}

Arrow functions with no arguments

If there are no arguments present you cannot just start the function with a => arrow. The following code will throw error “Unexpected token =>”.

var hello = => "Hello";
	console.log(hello());

There are two ways to solve this problem.

Provide empty pair of brackets

You can just use () without any arguments.

var hello = () => "Hello";
	console.log(hello());

This is how you would want to handle the no argument case most of the times.

Provide a “throwaway variable”

Another alternative for the () brackets is the_ (underscore) sign.

var hello = _ => "Hello";
	console.log(hello());

_ is also called the throwaway variable because it acts as a variable but is (most of the times) never used inside the function. So in the end the function acts as a no argument function. You can also use this in case you want to ignore any argument passed into the function.

Advantages of arrow functions

1. Concise/Shorter Syntax.
2. Lexical scoping — Arrow functions have a lexical this while normal functions have a dynamic this . What this means is that in arrow functions the value of this is determined by the surrounding scope as opposed to how they are called as in normal functions. The advantage is that you no longer need to use .bind(this) or have to use that = this . Other variables that are determined in a lexical way include arguments , super , this and new.target .

Limits of arrow functions

While being very useful and full of features arrow functions aren’t perfect in a sense. Now we discuss some limitations while using arrow functions.

1. Cannot be used as constructors: Because arrow functions don’t have a prototype property or other internal functions, if you use new on an arrow function, it’ll throw an error.
2. Cannot be used as generators: There are no workarounds to use arrow functions as generators. Using yield inside arrow function will throw error.
3. No arguments variable: You can use the rest parameter instead.
4. No line breaks after parameters: After the parameters list and before writing the fat arrow (=> ) you cannot add a line break.
5.  The following code will result into an error

var add = (x, y)
	=> {
	var total = x + y;
	return total;
	}
	console.log(add(2, 3));

See more Arrow Functions And Related Exercises in My GitHub Repository

https://github.com/nushkymohamed/APLICATION-FRAMEWORKS-LAB/blob/main/lab2.html