Nearby lessons

4 of 22

JavaScript 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.

Example02
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

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.

Example03
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

3️⃣ Arrow Function

Arrow functions are a modern alternative to function expressions. They use the => syntax and are shorter.

  • No need for the function keyword
  • No need for return keyword in one-liners
  • Do not bind their own this
Example04
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

4️⃣ With Single Parameter

If there’s only one parameter, parentheses are optional. This makes it super concise.

Example05
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

5️⃣ With Multiple Parameters

Use parentheses to enclose multiple parameters.

Example06
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

6️⃣ Arrow Function with Block Body

When the function body is more complex, you must use curly braces and an explicit return.

Example07
🚀Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3