Arrow functions in JavaScript

Introduction

Arrow functions are a type of function in JavaScript that have no name which is why they are called anonymous functions and if you want them to have a name that’s callable you would have to assign them to a variable.

Basic Syntax

Single-Line Arrow Functions

An arrow function can just be a line of code, and in arrow functions you can omit the curly bracket and the return keyword if it’s a single line. This way of returning a value in a single line arrow function is called an implicit return

if there’s a single parameter, This code snippet is a function that just returns the name. You can omit the bracket and just use the name of the parameter.

If there’s no parameter, you can omit the bracket. This code doesn't require a parameter, which means you can just use the underscore symbol ( _ )

Multi-Line Arrow Functions

Most functions you will write will fall into this category of a multi-line arrow function. Just like a regular function, we have to use the curly brackets and the return keyword to return a value. When you use the return keyword, it’s called an explicit return

Comparison with Traditional Functions

Syntax Differences

Arrow Function

In single line format

In Multi-line format

Regular Function

Behaviour Differences

1. Arrow functions don’t have their own context (this) so they inherit it from the part of the code they were written and not where they were called. We call this lexical scoping.

   Example:
   

   We have two arrow functions, one defined in a regular function and the other in the object's root. The arrFunc() is undefined even if it was defined in obj. That’s because arrow functions don’t have access to this context of obj so it will look for it in the global scope and since it didn’t find a name, it returns undefined.

   But the arrFuncInRegFunc returns John, that’s because it’s inheriting this from the function it’s defined in and not the obj.

2. Arrow functions don’t have their argument object, if you try to access the argument object of an arrow function it will empty

   Example in global scope:

   

   Example in a regular function:

   

   Here the arrow function inherits the arguments object from the regular function because it doesn’t have access to its argument object

3. Arrow functions cannot be used as constructors and will throw an error if used with the new keyword

   

   Example of using constructors with regular functions:

Practical Example

Arrow functions are mostly used as callback functions to other functions, here are a few examples:

In Array Methods

1. Map method

1. Filter method

In Event Handlers

Conclusions

Arrow functions were a great introduction to ES6 they allow for concise syntax because they are shorter and more compact than regular function expressions, making them easier to read and write, and also have implicit returns for single-line functions, so you don't need to use the return keyword if the value is directly after the arrow ⇾. However, if you use curly brackets, you must have a return statement or the function will return undefined.

You can read more about arrow functions here

Thanks for reading, let me know what you think about this and if you would like to see more, if you think i made a mistake or missed something, don't hesitate to comment