Nearby lessons
4 of 22JavaScript Arrow Function
📌 What are Arrow Functions?
In modern JavaScript (ES6+), arrow functions provide a concise way to write function expressions. They simplify syntax and handle the this keyword differently than traditional functions.
Arrow functions are especially useful in callbacks, array methods, and concise return logic.
Syntax: (parameters) => expression
1️⃣ Traditional Function Declaration
This is the basic way to declare functions using the function keyword. It allows reusability and is hoisted in JavaScript.
Code Example
2️⃣ Function Expression (Old Way)
In function expressions, a function is stored inside a variable. It is not hoisted and must be declared before use.
Code Example
3️⃣ Arrow Function
Arrow functions are a modern alternative to function expressions. They use the => syntax and are shorter.
- No need for the
functionkeyword - No need for
returnkeyword in one-liners - Do not bind their own
this
Code Example
4️⃣ With Single Parameter
If there’s only one parameter, parentheses are optional. This makes it super concise.
Code Example
5️⃣ With Multiple Parameters
Use parentheses to enclose multiple parameters.
Code Example
6️⃣ Arrow Function with Block Body
When the function body is more complex, you must use curly braces and an explicit return.