JavaScript Arrow Function

What is Arrow Function in JavaScript?

Arrow function in JavaScript is an alternative to regular function in Javascript. ES6 introduced the feature of the arrow function, which looks cleaner compared to the regular javascript function.

For example- Let's see a function to multiply two numbers in javascript.

1. Using Regular Javascript function.

2. Using Arrow function

In the above arrow function, as only a single statement is thereafter arrow, we can write it without the "return" keyword. However, if there is more than one statement after the arrow, then we need to use curly braces and the "return" keyword.

Example :

As you can see in the above example since there is more than one statement so we have to use curly braces and the return keyword.

Arrow Function Syntax

The general syntax of the arrow function is:

where,

• ArrowFunctionSyntax is the name of the function,
• (arg1,arg2,arg3....argN) are the function arguments
• statement(s) is the function body.

If the body contains only a single statement then we can write the arrow function as :

Arrow Function Example

1. No Argument arrow function: In this function, no argument is provided to the function.

2. One argument Arrow function: In this function, only one argument is provided in the function.

3. Arrow function as an Expression: The function can be dynamically created, which can be used as an expression.

4. Multiline arrow function: If there is more than one statement in the arrow function body, then the statements are kept inside curly braces.

Arrow Functions as Object Methods

The arrow function can not be used inside an object to create methods. For example:

In the above object, the "this" in showLanguage arrow function points to the window object. So, when "this" try to reference the language property in the window object, it is unable to find it and therefore returns undefined.

More Examples of Arrow Functions in JavaScript

Some more examples of arrow functions in Javascript are :

1. Sorting function written in the arrow function

2. Converting a string array to the length of a string array written using the arrow function

Regular Function Example

Some examples of traditional regular functions are :

1. Multiply two numbers written using the arrow function.

2. Sorting function is written in regular function

3. Converting a string array to the length of a string array written using a regular function

Regular Function Vs Arrow Function in JavaScript

Arrow function in JavaScript is a much cleaner way to write traditional regular functions. Let's see both with an example.

The main difference between the arrow function and traditional regular function is:

Some examples of Arrow Function vs Regular Javascript Function are :

1. Regular Javascript function.

2. Arrow function

'this' with Arrow Function

"this" inside arrow functions work differently as compared to "this" inside the regular function.

"this" inside arrow function does not create its own context, whereas the regular function creates its own context.

Let's understand this with an example.

In the above function, "this" inside the setTimeout function shadows this inside the show function. So, it returns undefined.

In order to make the above code work, we can define a variable self and assign it to "this".

If the arrow function is used instead of a regular function, then "this" takes the value of the enclosing context instead of creating its own context.

Arguments Binding

arrow function does not have the argument object. Also, the arrow function does not have new.target keyword.

Example

The arrow function inside the myFunction() function references the arguments object. However, this argument's object belongs to the myFunction() function, not the arrow function.

JavaScript Arrow Functions and the Prototype Property

The regular function has a property called prototype.

Arrow functions do not have a prototype property.

Example

Example for Arrow Function

Advantages of Arrow Function in JavaScript

Some of the advantages of the arrow function are:

• The code is much cleaner to read when written using the arrow function.
• Arrow function removes the complexity of using this keyword.
• Objects can be directly returned using the arrow function by wrapping the object in parenthesis.

• The arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.
• Arrow functions can never have duplicate named parameters.

Example

Things You Should Avoid with Arrow Functions

• Arrow Function in Javascript should not be used to create methods inside the object.

  Example :

• Arrow function in javascript should not be used as a constructor.

  Example :

• Arrow function should not be used for event handlers, object methods, prototype methods, and functions that use the arguments object as argument object are not available with an arrow function.

Supported Browsers

Every browser except Internet explorer supports the arrow function.

See Also

• Functions in JavaScript