---
title: "What is arrow function in JavaScript with example?"  
description: "What is arrow function in JavaScript with example?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93749/what-is-arrow-function-in-javascript-with-example  
category: "web application"  
tags: ["javascript", "web application development", "web development"]  
reading_time: 3 minutes  

---

# What is arrow function in JavaScript with example?

What is [arrow function](https://www.mindstick.com/forum/160054/how-to-pass-parameter-values-in-javascript-arrow-function) in [JavaScript](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) with example?

## Answers

### Answer by user

[Arrow](https://answers.mindstick.com/qa/95602/which-country-test-flighted-arrow-3-anti-ballistic-missile-system-and-its-interceptors) functions allow us to write shorter [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-function). It gets shorter If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword. If you have parameters, you pass them inside the parentheses. An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations. 1. Does not have its own bindings to this or super, and should not be used as methods. 2. Does not have arguments, or new.target keywords. 3. Not suitable for call, apply and bind methods, which generally rely on establishing a scope. 4. Can not be used as constructors. 5. Can not use yield, within its body. **Syntax:**

```
[variable] = ( [arguments,---] ) => { statement }
```

**Example:**

```
hello = () => {
  return 'Hello World!';
}
hello = () => 'Hello World!';
hello = (val) => 'Hello ' + val;
```

```
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(material => material.length));
```

```
let add = (x, y) => { return x + y; };console.log(add (5,9));
```

### Answer by Ethan Karla

The Anonymous Functions and Arrow Functions functions are created by implementing the Closure Class. Arrow Functions also support the same functionalities that Anonymous Functions does, the only difference is that we do not have to use the use keyword for external variables in Arrow Functions. We can access these variables directly.

Like Anonymous Functions and Normal Functions, in Arrow Functions also we can easily use Normal Variables, Variable reference, defining variable type, declare function return type, default parameter, optional parameter, variable length arguments etc.

```
Syntax
[variable] = ( [arguments,---] ) => { statement }
```

Example:

```
hello = () => {
  return 'Hello World!';
}
```

```
hello = () => 'Hello World!';
hello = (val) => 'Hello ' + val;
```

```
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];
console.log(materials.map(material => material.length));
```

```
// Traditional Function
function (a){
  return a + 100;
}
let add = (x, y) => { return x + y; };
```

```
Example<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Function</h2>
<p id='demo'></p>
<script>
var hello;
hello = () => {
  return 'This is arrow function !!!';
}
document.getElementById('demo').innerHTML = hello();
</script>
</body>
</html>
```

Output:

```
JavaScript Arrow Function
This example shows the syntax of an Arrow Function, and how to use it.
This is arrow function !!!
```


---

Original Source: https://answers.mindstick.com/qa/93749/what-is-arrow-function-in-javascript-with-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
