Arrow Functions
- This lesson covers ES6 arrow function syntax and examples.
Introduction to Arrow Functions
In earlier lessons, we learned how to define functions using the function keyword.
Modern JavaScript (ES6) introduced a new, shorter, and cleaner way to write functions called Arrow Functions.Arrow functions help developers:
Write less code
Improve readability
Maintain cleaner logic
Handle this differently (important concept later)
What is an Arrow Function ?
An Arrow Function is a shorter syntax for writing functions using the => (arrow) symbol.
It is also known as a fat arrow function.
Basic Definition
An arrow function is a function expression that:
Uses => instead of the function keyword
Is always anonymous
Is commonly stored in variables
Arrow Function
Uses a shorter syntax with => to define functions more cleanly.
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function
const addArrow = (a, b) => {
return a + b;
};Both functions work the same way, but the arrow function is shorter and cleaner.
Basic Syntax of Arrow Function
const functionName = (parameters) => {
// function body
};
Arrow Function Variations
Covers different ways to write arrow functions with parameters and return values.
// Simple arrow function
const greet = () => {
console.log("Hello, Welcome!");
};
greet();
// Arrow function with parameters
const greetUser = (name) => {
console.log("Hello " + name);
};
greetUser("Rahul");
// Arrow function with one parameter (no parentheses)
const greetUser2 = name => {
console.log("Hello " + name);
};
greetUser2("Amit");
// Arrow function with return
const square = (num) => {
return num * num;
};
console.log(square(5)); // 25Implicit Return in Arrow Functions
If the function body has only one statement, and that statement is a return, you can remove:
Curly braces { }
return keyword
Arrow Function Advanced Usage
Uses concise syntax for returning values and objects in arrow functions.
// Implicit return
const square = num => num * num;
console.log(square(4)); // 16
// Multiple parameters
const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 12
// Returning an object
const getUser = () => ({
name: "Amit",
age: 25
});
console.log(getUser());Without parentheses, JavaScript will think { } is a function block.
Arrow Functions and this Keyword
Arrow functions do not have their own this.
They inherit this from their surrounding scope.
this in Arrow vs Traditional Function
Highlights how this behaves differently in regular and arrow functions.
// Traditional function
function show() {
console.log(this); // refers to calling object
}
// Arrow function
const showArrow = () => {
console.log(this); // inherits from surrounding scope
};The value of this behaves differently.
This topic will be covered in detail in later lessons.When to Use Arrow Functions ?
Short functions
Callback functions
Array methods (map, filter, forEach)
Cleaner functional code
When NOT to Use Arrow Functions ?
Object methods
Constructor functions
When you need your own this
Event handlers (in some cases)
Arrow Functions in Callbacks and Arrays
Uses arrow functions for cleaner callbacks and array operations.
// Arrow function in setTimeout (callback)
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);
// Arrow function in array method
const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16]- Comparison: Traditional vs Arrow Functions
Feature Traditional Function Arrow Function Syntax Long Short function keyword Required Not required this binding Own this Lexical this Constructor usage Yes No Readability Normal Better for small logic
Common Mistakes
Forgetting parentheses while returning objects
Overusing arrow functions
Using arrow functions as object methods
Confusion with this
Best Practices
Use arrow functions for small, simple logic
Avoid arrow functions for object methods
Prefer readability over compactness
Understand this behavior clearly