Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Fat arrow functions in JavaScript
Fat arrow functions, introduced in ES6, provide a shorter syntax for writing functions in JavaScript. They use the => operator instead of the function keyword.
Syntax
// Basic syntax
(param1, param2, ...) => { }
// Single parameter (parentheses optional)
param => { }
// No parameters
() => { }
// Single expression (return implicit)
(a, b) => a + b
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fat Arrow Functions</title>
</head>
<body>
<h1>Fat Arrow Functions</h1>
<div id="result"></div>
<button id="btn">CLICK HERE</button>
<h3>Click the button to see arrow function in action</h3>
<script>
let resEle = document.getElementById("result");
// Fat arrow function
let add = (a, b) => {
return a + b;
};
document.getElementById("btn").addEventListener("click", () => {
resEle.innerHTML = "Sum of 32 and 19 = " + add(32, 19);
});
</script>
</body>
</html>
Different Arrow Function Forms
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Function Forms</title>
</head>
<body>
<h1>Arrow Function Forms</h1>
<div id="output"></div>
<script>
let output = document.getElementById("output");
let result = "";
// Multiple parameters with block body
let multiply = (x, y) => {
return x * y;
};
// Single parameter (no parentheses needed)
let square = x => x * x;
// No parameters
let greeting = () => "Hello World!";
// Single expression (implicit return)
let subtract = (a, b) => a - b;
result += "multiply(4, 5): " + multiply(4, 5) + "<br>";
result += "square(6): " + square(6) + "<br>";
result += "greeting(): " + greeting() + "<br>";
result += "subtract(10, 3): " + subtract(10, 3);
output.innerHTML = result;
</script>
</body>
</html>
Comparison with Regular Functions
| Feature | Regular Function | Arrow Function |
|---|---|---|
| Syntax | function(a, b) { return a + b; } |
(a, b) => a + b |
| this binding | Dynamic (depends on call) | Lexical (inherited from enclosing scope) |
| Hoisting | Yes | No |
| Constructor | Can be used with new
|
Cannot be used with new
|
Key Benefits
Arrow functions provide several advantages:
- Shorter syntax: Less code to write, especially for simple functions
-
Implicit return: Single expressions return automatically without
returnkeyword -
Lexical this: Inherits
thisfrom the surrounding scope, useful in callbacks - No function hoisting: Must be defined before use, leading to more predictable code
Conclusion
Fat arrow functions offer a concise way to write functions in JavaScript. They're particularly useful for short functions, callbacks, and when you need lexical this binding. Use them to make your code more readable and maintainable.
Updated on: 2026-03-15T23:18:59+05:30
377 Views
Advertisements