Mastering Arrow
Functions in
JavaScript : A
Deep Dive into
Types and Usage
Are you new to JavaScript ? Wondering about
JavaScript Arrow Functions ? This presentation
will provide all the answers you need!
by Gourav Roy
1) 🎰 Basic Arrow Function:
The simplest form of an arrow function.
const add = (a, b) => a + b;
2) 🌈 Arrow Function with Parameters:
Arrow functions can take parameters, just like regular functions.
const greet = (name) => Hello, ${name}!;
3) Arrow Function with Single Parameter:
Parentheses can be omitted if there is only one parameter.
const square = x => x * x;
4) Arrow Function with No Parameters:
Parentheses must be used, even for an empty parameter list.
const sayHello = () => "Hello!";
5) 📏 Arrow Function with Block Body:
For multiple statements or more complex logic, use a block body.
const multiply = (a, b) => {
const result = a * b;
return result;
};
6) 💡 Arrow Function as a Callback:
Arrow functions are commonly used as concise callbacks.
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
7)🔄 Arrow Function in Object Literal:
Arrow functions can be used in object literals as methods.
const person = {
name: "John",
greet: () => Hello, ${this.name}, // Be cautious with 'this' in arrow
functions
};
8)🔄 Arrow Function in Higher-Order
Functions:
Arrow functions are handy in higher-order functions like map, filter, and reduce.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);