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.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

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
PREVIEW READY
Loading Editor...
Live Preview

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
Code Example
PREVIEW READY
Loading Editor...
Live Preview

4️⃣ With Single Parameter

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

Code Example
PREVIEW READY
Loading Editor...
Live Preview

5️⃣ With Multiple Parameters

Use parentheses to enclose multiple parameters.

Code Example
PREVIEW READY
Loading Editor...
Live Preview

6️⃣ Arrow Function with Block Body

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

Code Example
PREVIEW READY
Loading Editor...
Live Preview

🧠 Test Your Knowledge

3 Questions

Progress: 0 / 3
Keep Going!AJS - Truthy & Falsy Values