- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fat vs concise arrow functions in JavaScript
The consice arrow is more stream lined form of fat arrow functions for one-line functions. If the function body only has one line of code, then there isn’t any need of curly braces {} for function body as conscie arrow functions have implicit return. Also, if there is only one parameter then that can be written without the parenthesis () but if there is no parameter then the parenthesis is necessary.
Syntax
Fat arrow function −
let add = (a,b) =>{return a+b;}
Consice arrow function:
let add = (a,b)=>a+b;
If one parameter only −
let add = a=>a+22;
Following is the code for fat vs concise arrow functions in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } </style> </head> <body> <h1>Fat vs concise arrow functions</h1> <div class="result"></div> <button class="Btn">CLICK HERE</button> <h3>Click on the above button to call the add() and multiply() arrow function</h3> <script> let resEle = document.querySelector(".result"); let add = (a, b) => a + b; let multiply = (a, b) => { return a * b; }; document.querySelector(".Btn").addEventListener("click", () => { resEle.innerHTML = "Sum of 32 and 19 = " + add(32, 19) + "<br>"; resEle.innerHTML = "Multiplication of 32 and 19 = " + multiply(32, 19) + "<br>"; }); </script> </body> </html>
Output
On clicking the ‘CLICK HERE’ button −
- Related Articles
- Concise arrow functions in JavaScript
- Fat arrow functions in JavaScript
- Regular functions vs Arrow functions in JavaScript?
- Arrow functions in Javascript
- Lambdas with Arrow Functions in JavaScriptLambdas with Arrow Functions in JavaScript
- What is a fat arrow function in JavaScript?
- Higher-Order Arrow Functions in JavaScript.
- Difference between regular functions and arrow functions in JavaScript
- When you should not use JavaScript Arrow Functions?
- JavaScript closures vs. anonymous functions
- How to use arrow functions used as methods in JavaScript?
- Macros vs Functions in C
- Functions vs Methods in Golang
- Detecting arrow key presses in JavaScript?
- Explain str() vs repr() functions in Python

Advertisements