JavaScript Arrow Functions
Modern and concise way to write functions
🏹 What are Arrow Functions?
Arrow functions provide a shorter syntax for writing functions in JavaScript. They were introduced in ES6 and are especially useful for simple functions and callbacks.
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
Output:
8
Arrow Function Syntax
Basic Syntax
Parameter => expression
const square = x => x * x;Multiple Parameters
Use parentheses for multiple params
const add = (a, b) => a + b;Block Body
Use braces for multiple statements
const greet = name => {
return `Hello, ${name}!`;
};No Parameters
Use empty parentheses
const sayHi = () => "Hi there!";🔹 Arrow Function Examples
Here are different ways to write arrow functions:
// Single parameter, single expression
const double = x => x * 2;
// Multiple parameters
const multiply = (a, b) => a * b;
// No parameters
const getRandomNumber = () => Math.random();
// Multiple statements (need braces and return)
const processName = name => {
const trimmed = name.trim();
const capitalized = trimmed.charAt(0).toUpperCase() + trimmed.slice(1);
return capitalized;
};
// Usage
console.log(double(5)); // 10
console.log(multiply(3, 4)); // 12
console.log(getRandomNumber()); // Random number
console.log(processName(" john")); // "John"Output:
10
12
0.7834592847 (random)
John
🔹 Arrow Functions vs Regular Functions
Comparison between arrow functions and regular functions:
// Regular function
function regularFunction(name) {
return "Hello, " + name;
}
// Arrow function
const arrowFunction = name => "Hello, " + name;
// Both work the same way
console.log(regularFunction("Alice")); // Hello, Alice
console.log(arrowFunction("Bob")); // Hello, Bob
// Arrow functions are great for array methods
const numbers = [1, 2, 3, 4, 5];
// Using arrow functions with map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Using arrow functions with filter
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]Output:
Hello, Alice
Hello, Bob
[2, 4, 6, 8, 10]
[2, 4]
🔹 When to Use Arrow Functions
Arrow functions are perfect for:
✅ Good for:
- Short functions: Simple one-line operations
- Array methods: map, filter, reduce callbacks
- Event handlers: Simple event handling
- Functional programming: When you need concise syntax
❌ Avoid for:
- Object methods: When you need 'this' binding
- Constructors: Cannot be used with 'new'
- Complex functions: When readability matters more
// Good use cases
const students = ["Alice", "Bob", "Charlie"];
// Transform array
const upperCaseNames = students.map(name => name.toUpperCase());
// Filter array
const shortNames = students.filter(name => name.length <= 3);
// Find element
const foundStudent = students.find(name => name.startsWith("B"));
console.log(upperCaseNames); // ["ALICE", "BOB", "CHARLIE"]
console.log(shortNames); // ["Bob"]
console.log(foundStudent); // "Bob"