Arrow Functions in JavaScript

Functions are a core feature of the JavaScript syntax, helping you accomplish tasks or compute values without redundancy. The JavaScript language has come a long way since its creation, and one of its largest additions came with ES6 (ECMAScript 2015), introducing arrow functions in JavaScript. Knowing about ES6 arrow functions, how they work, and when to use them is critical to writing modern JavaScript clean code.

In this blog, you will learn everything you need about JavaScript arrow functions, from the syntax to the advantages and examples of when mid use them. Let’s get into it!

Table of Contents:

• What is an Arrow Function in JavaScript?
  • Syntax of the arrow function
  • Example of Arrow Function in JavaScript
• Types of Arrow Functions in JavaScript
  1. Arrow Function without Parameters
  2. Arrow Function with a Single Parameter
  3. Arrow Function with Multiple Parameters
  4. Arrow Function with Default Parameters
  5. Arrow functions: Returning Objects
• Arrow Function vs Regular Function
• Real-World Example of Arrow Functions
  • Async Arrow Functions
  • Filtering and Mapping Data
• Advantages of Arrow Functions
• Disadvantages of Arrow Functions
• Best Practices for Arrow Functions
• Conclusion

What is an Arrow Function in JavaScript?

An arrow function in JavaScript is a shorter and more modern way to write a function. Instead of using the function keyword, you can use a special symbol =>, which helps to define a function. This makes your code look simple and easier to read, especially when the function is small. Arrow functions are mostly used in situations where you need quick and one-line logic, like inside methods such as map(), filter(), or forEach(), which work with arrays.

Get Job-Ready Web Development Skills

Kickstart Your Tech Career

Explore Program

Syntax of the arrow function

const functionName = (parameter1, parameter2, ...) => {
  // body of the function
  // statements or logic
};

Explanation: The above syntax is used to define an arrow function that is assigned to a constant variable. It takes the parameters and executes the code inside the body of the function.

Example of Arrow Function in JavaScript

Given below is a simple code to help you understand the concept:

Output:

Explanation:

In the above code, at first, the traditional function is defined, which is named greetTraditional. It takes a name as input and then returns a greeting message by adding “Hello” before the name. Next, the arrow function is defined called greetArrow, which does the same thing but in a shorter way using the => syntax. Finally, the traditional function is called with the name “Intellipaat” and the result is printed using the console.log(), which displays “Hello Intellipaat” as the output. Both the traditional function and the arrow function do the same thing, but the arrow function is shorter.

Types of Arrow Functions in JavaScript

You can write an arrow function in JavaScript in different ways depending on the number of parameters it takes and what it returns. It is important for you to understand these types, as it will help you to write cleaner and efficient code. Given below are the different types of arrow functions in JavaScript:

1. Arrow Function without Parameters

An arrow function without parameters means that the function does not need any input values. In this case, you have to use empty parentheses () before the arrow. This can be helpful when you want the function to perform actions without any arguments.

Code:

Output:

Explanation:

The above JavaScript code is used to define an arrow function named sayHello. It uses no parameters; therefore, it uses empty parentheses (). Inside the function, it returns the string “Hello!”. When the function sayHello() is called using console.log, it returns the function and prints the returned message to the console.

2. Arrow Function with a Single Parameter

If the arrow function takes only one parameter, you don’t have to put that value inside the parentheses. You can just write the name of the parameter directly before the arrow. This helps to make the code shorter and easier to read.

Code:

Output:

Explanation:

In the above code, an arrow function is created named greet, which takes one input called name. Since there is only one parameter, you don’t have to use parentheses around it. Inside the function, “Hello” is combined with the value that is passed, and returns the full message. When the function greet(“Intellipaat”) is called, it returns with “Hello, Intellipaat”, and it is printed on the screen using console.log.

3. Arrow Function with Multiple Parameters

When the arrow function needs more than one parameter, you have to write them in parentheses like this: (param1, param2) => { }. This helps you to write functions that work with more than one value, like adding two numbers or comparing two items. This helps to make your code shorter and easier to read while you are still handling more than one argument.

Code:

Output:

Explanation:

In the above JavaScript code, the arrow function is named as add, which takes two inputs, a and b. These values are written inside the parentheses because there is more than one parameter. Inside the function, the two numbers are added together using a + b, and then the result is returned. When you call add(5, 3), it adds the numbers 5 and 3. After that, console.log prints the result.

4. Arrow Function with Default Parameters

Arrow functions may also take default values for their parameters. This means that if you don’t pass a value while calling the function, it will use a default value. This makes your function flexible as it can still operate even if you don’t provide it with all the inputs.

Code:

Output:

Explanation:

In the above JavaScript code, an arrow function is used. It is named as greetUser, which contains a default parameter. The name of the parameter is set to “Guest” by default. This means if you call the function without giving any name to it, it will use the name “Guest” by default.

• In greetUser(), no name is given to the function, so it returns the value “Welcome to, Guest”.
• In greetUser(“Intellipaat”), the name Intellipaat is given to the function; therefore, it returns “Welcome to, Intellipaat”.

5. Arrow functions: Returning Objects

In JavaScript, if you want an arrow function to return an object directly, you need to write the object in parentheses like this: () => ({ key: value }). This informs JavaScript that you are just returning an object and not opening a new block of code. It is a simple way to create and return an object in one line.

Code:

Output:

Explanation:

In the above code, an arrow function is used, which is named as getUser, and it returns an object directly. Since an object is returned in one line, you can write it in parentheses () so that JavaScript doesn’t get confused and think it is a code block.

The object consists of two properties:

• name which has the value “XYZ”.
• age, which has the value 25.

When the function getUser() is called, it returns XYZ and 25, and the result is printed using console.log.

Arrow Function vs Regular Function

The difference between an Arrow function and a Regular function is given below in tabular format:

Real-World Example of Arrow Functions

Arrow functions are not just a shorter way to write functions—they are also extremely useful in real-world JavaScript applications. Here’s a practical scenario where ES6 arrow functions make your code cleaner and more efficient.

Async Arrow Functions

Arrow functions in JavaScript can also be used to handle asynchronous tasks by using the async keyword. This helps you to write non-blocking code for fetching data or reading files. The code execution can be paused until the promise has resolved by taking the following actions: before the arrow function, you can write async, and inside the function, add await. This causes your asynchronous code to look cleaner and more functional, particularly when you are operating with APIs or dynamic information.

The JavaScript code for the async arrow function is given below:

Code:

Explanation:

The above code is used to define an async arrow function named fetchData. It is used to fetch data from the API link https://jsonplaceholder.typicode.com/users/1. It waits for the output using await and converts the response into JSON. After that, the data is displayed inside an HTML element with the ID output. 

Given below is the entire HTML code so that you can get the desired output:

Output:

Filtering and Mapping Data

Suppose you have an array of users and you want to get a list of the names of users who are above 18 years old:

Output:

Explanation: In this example, the filter() arrow function selects users aged above 18. Then the map() arrow function extracts their names, and the results are displayed on the page inside the <pre> tag and also logged in the console.

Advantages of Arrow Functions

The advantages of arrow functions in JavaScript are given below:

• Shorter Syntax: Arrow functions allow developers to write less code while achieving the same functionality, which makes JavaScript faster to write and easier to read.
• Lexical this Binding: Arrow functions automatically use the this value from the surrounding context, which prevents common errors in callbacks and event handlers.
• Cleaner Callbacks: Developers can write concise logic inside array methods such as map(), filter(), and forEach() using arrow functions.
• Improved Readability for Small Tasks: When used for simple operations, arrow functions make the code easier to understand and maintain.

Disadvantages of Arrow Functions

The disadvantages of arrow functions in JavaScript are given below:

• Cannot Be Used as Constructors: Arrow functions cannot be called with the new keyword, so they cannot create new object instances like traditional functions.
• No Own this Context: Arrow functions do not have their own this keyword, which can cause issues when methods rely on a separate this context.
• No arguments Object: Unlike traditional functions, arrow functions do not provide the built-in arguments object.
• Not Suitable for Complex Logic: Developers should avoid using arrow functions for long functions, class methods, or complex operations because traditional functions improve readability.
• Potential Overuse Reduces Clarity: Using arrow functions in every situation, including where regular functions are more appropriate, can make the code harder to understand.

Best Practices for Arrow Functions

Some of the best practices for Arrow functions are given below:

• You should always use arrow functions for short and simple tasks. This makes your code clean and readable.
• You should not use arrow functions as object methods if you use this keyword. 
• You should not use arrow functions as constructors. This is because they cannot be called with the new keyword.
• You should use parentheses for multiple parameters. This will make your code easy to read.
• You should always write object returns in parentheses so that JavaScript knows that you are returning an object, and not a block of code. 

Conclusion

In conclusion, arrow function in JavaScript makes your code shorter, cleaner, and easier to read when you are writing basic tasks or working with functions like map() or filter(). They help avoid confusion with the this keyword by using the value from the surrounding code. Although arrow functions have some limitations, like not being usable as constructors, they are still a great tool in modern JavaScript development. By learning how to use them the right way, you make your JavaScript code more powerful and efficient. You need to keep practicing and use these functions in your projects so that you can write better and shorter code in JavaScript. To learn more about JavaScript, explore the JavaScript Interview Questions and subscribe to our Web Development Course.

Arrow Function in JavaScript - FAQs