What is a fat arrow function in JavaScript?

Fat arrow functions (also called arrow functions) were introduced in ES6 to provide a shorter syntax for writing functions. They use the => syntax, which resembles a "fat arrow", eliminating the need to write the function keyword repeatedly.

Syntax

For a single argument:

argument => expression

For multiple arguments or no arguments:

(argument1, argument2) => expression
// or
() => expression

Example: Traditional vs Arrow Function

Traditional Function:

var rank = [7, 8, 9];
var display = rank.map(function(num) {
    return num * num;
});
console.log(display);

[ 49, 64, 81 ]

Arrow Function:

var rank = [7, 8, 9];
var display = rank.map((num) => num * num);
console.log(display);

[ 49, 64, 81 ]

Key Differences

Multiple Syntax Forms

// Single parameter (parentheses optional)
const square = x => x * x;
console.log(square(5));

// Multiple parameters
const add = (a, b) => a + b;
console.log(add(3, 4));

// No parameters
const greet = () => "Hello World!";
console.log(greet());

// Block body (explicit return needed)
const multiply = (x, y) => {
    const result = x * y;
    return result;
};
console.log(multiply(6, 7));

25
7
Hello World!
42

Conclusion

Arrow functions provide cleaner, more concise syntax than traditional functions. They're especially useful for short expressions and callbacks, reducing code verbosity significantly.