Arrow Functions in JavaScript: A Simpler Way to Write Functions

In this article we'll cover arrow functions in simple understanding and examples. Many beginner faces problem with arrow functions and if you are one of those then you do not have to anymore!

Let's first understand what is arrow functions and why were they introduced at all.

What is an arrow function and why use it?

Arrow function was introduced in ES6 as alternative to normal traditional function with some variations. Simply put together arrow functions are mostly like your normal function, with just simplification in syntax. But it does not mean that they behave exactly same. In other words they are similar but not same, we will discuss more about it in this article later. We use arrow functions for the sake of simplicity in syntax.

Writing arrow function

We make a normal function like this:

function sum(a,b){
return a + b
}

Arrow function of the above traditional functions:

const sum = (a,b) => a + b 

Understanding simplicity of arrow function syntax

Below given all syntax are valid

// traditional anonymous function
(function (a) {
return a * 2
});

// making arrow function from above function
// remove function keyword, add arrow after param
(a) => { 
return a * 2
}

// making it more simpler 
// remove return keyword (implicit return here)
(a) => a * 2

// if there is only one param, we can remove the parentheses
a => a * 2

As you can see how simpler the syntax of arrow function is compare to traditional function.

Understanding implicit and explicit return

In arrow function there is this implicit and explicit return concept understanding this will make you write good arrow functions. Implicit return is where the function automatically return output. Whereas explicit return where you specifically write return keyword.

// explicit return 
// {} curly braces require return keyword
a => { return a * 2 }

// implicit return 
// absence of {} curly braces automatically return output 
a => a * 2  

Required parentheses

Rest parameters, default parameters, and destructuring within params are supported, and always require parentheses:

(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression

Syntax

Now look at these syntax, they are most common arrow function syntax you will come across with:

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
} 

Also understanding statements and expression in arrow function context

An expression evaluate to a single value whereas statement perform an action and does not as a whole, return a value.

Arrow functions have two forms:

1. Expression body

2. Statement body

Function with Expression:

const add = (a, b) => a + b;

Here:

a + b → expression

Arrow functions automatically return it.

Equivalent to:

const add = (a, b) => {
  return a + b;
}

Arrow Function with Statements:

const add = (a, b) => {
  const sum = a + b;
  return sum;
};

Inside {} you can write multiple statements.

Special Case (Very Important)

Returning objects.

Wrong:

const user = () => {name: "Alex"}

JS thinks {} is statement block.

Correct:

const user = () => ({name: "Alex"})

Parentheses force expression.

Difference between arrow function and normal function

Now we'll understand the difference between arrow function and normal function. These differences exist because arrow function were introduced with deliberate limitations in usage. These are:

• Arrow functions don't have their own bindings to this, arguments, or super, and should not be used as methods.

• Arrow functions cannot be used as constructors. Calling them with new throws a TypeError. They also don't have access to the new.target keyword.

• Arrow functions cannot use yield within their body and cannot be created as generator functions.

Before getting confused over their limitations let's slowing learn each one with simple understanding.

Between normal function and arrow function the most important difference is of 'this' keyword.

1. Arrow functions DO NOT HAVE THEIR OWN this. They inherit this from surrounding scope.

This is called:

Lexical this

Normal function and 'this' keyword:

const obj = {
  name: "Alexa",
  show: function() {
    console.log(this.name);
  }
};

obj.show();
// output: "Alexa"

Arrow function and 'this' keyword:

const obj = {
  name: "Alexa",
  show: () => {
    console.log(this.name);
  }
};

obj.show();
// output: undefined

Because arrow function does not bind this. It takes this from outer scope.

2. Arrow Functions do not have their arguments they inherit it from their parent.

Normal function and argument:

function test(){
  console.log(arguments)
}
// works

Arrow function and argument:

const test = () => {
  console.log(arguments);
}
// does not work
//only works if a parent function has arguments.

3. Arrow Functions Cannot Be Constructors

Normal function:

function Person(name){
  this.name = name;
}

const p = new Person("Alex");

Works.

---

Arrow function:

const Person = (name) => {
  this.name = name;
}

new Person("Alex");

Error

Person is not a constructor

4. Arrow Functions Do NOT Have prototype

Normal function:

function test(){}

console.log(test.prototype);

Exists.

---

Arrow function:

const test = () => {};

console.log(test.prototype);

undefined

5. Arrow Functions Cannot Use super or new.target

Arrow functions still create an execution context but they do not create their own this, arguments, super, or new.target. Remember that : 4 No's of Arrow Functions

Arrow functions do not have their own:
this
arguments
prototype
super
new.target

They borrow from parent scope.

6. Arrow functions also cannot be generators:

const test = *() => {} // invalid

Generators require normal functions.

Conclusion

Arrow functions were introduced in ES6 as a shorter way to write functions in JavaScript. They allow cleaner syntax and support both implicit and explicit return. Unlike normal functions, arrow functions do not create their own this or arguments; instead they inherit them from the surrounding scope (lexical binding). They also cannot be used as constructors and do not have a prototype. Arrow functions are best used for short functions and callbacks, but normal functions are usually better for object methods and constructors.