Understanding Arrow Functions In JavaScript

Understanding Arrow Functions In JavaScript

In this tutorial, you’ll learn about arrow functions in JavaScript. You’ll see what are arrow functions in JavaScript and how to use it.

What are Arrow Functions in JavaScript ?

Arrow functions or the “fat arrow” functions as they are popularly know is a new way of writing concise JavaScript functions with minimal syntax. Arrow functions came into existence with ES 6. Here is bare bone syntax for arrow functions:

// syntax for arrow functions
() => { // statements to be executed  }

Let’s take a look at the arrow functions with the help of an example. Assuming that you have an array with some stuff. You’ll be iterating over the array and modifying the names with an extra underscore at the end of the names. Here is how the simple code looks:

const fruits = ['apple', 'orange', 'pineapple','kiwi'];

const fruits_ = fruits.map(function(item){
  return item + '_'
})

console.log('modified fruits list is  ', fruits_);

As seen in the above code, you have used the JavaScript Array Map method to manipulate the array.

Output of the above code will be:

["apple_", "orange_", "pineapple_", "kiwi_"]

You can make use of the JavaScript arrow functions to make the above code more concise. Here is how it will look:

const fruits = ['apple', 'orange', 'pineapple','kiwi'];
const fruits_ = fruits.map((fruit) => { return fruit + '_' })
console.log('modified fruit list is ', fruits_);

Passing Parameters To Arrow Functions In JavaScript

An arrow function without a parameter is as shown:

const func = () => { console.log('arrow function without parameter'); }
func();

() denotes the function enclosure. For passing parameters to the arrow function you need to pass it inside the (). Here is an example showing arrow functions in JavaScript with parameter.

const func = (a, b) => { console.log('arrow function with parameter', a , b); }
func(10, 20);

Arrow Functions Helps In Retaining Scope

Let’s see how arrow functions helps in retaining the scope. Define a function called employee as shown:

function employee(a,b){
    this.first_name = a;
    this.last_name = b;
    this.sample_list = ['a','b','c'];
}

Add a prototype method to the employee class to get the full name of the employee. Here is how it looks:

employee.prototype.fullName = function() {
    const m_list = this.sample_list.map(function(item){
        console.log('first name is ',this.first_name)
        return this.first_name + item;
    })
};

As seen in the above piece of code, inside the fullName method you have applied a map method to the sample_list array of the employee class. Inside the map method’s callback function you are trying to access the parent scope using this.first_name.

Add the following code to execute the above piece of code and check what you see in the browser console.

const emp = new employee('john','cena');
emp.fullName();

The output of the above code is

// Output
first name is  undefined

It happens because the parent scope is in accessible from the map method’s callback function.

The arrow function gives you the privilege to retain the parent scope inside the callback. Here is how the modified code looks:

employee.prototype.fullName = function() {
    const m_list = this.sample_list.map((item) => {
        console.log('first name is ',this.first_name)
        return this.first_name + item;
    })
};

Save the above changes and on executing you will have the following output in the browser console.

// Output
first name is  john

Wrapping It Up

In this tutorial, you saw what are Arrow Functions In JavaScript. You learnt how to use arrow functions for a more concise syntax.

How was your experience learning arrow functions in JavaScript ? Do let me know your thoughts in the comments below.