Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...

🔁 Day 42: Advanced Functions & Callbacks

🔁 Day 42: Advanced Functions & Callbacks

Welcome to Day 41! Today, we’ll explore how functions can be more powerful — they can accept other functions as arguments, return them as results, and manage asynchronous logic.

🔹 1. Function Expressions

You can assign a function to a variable just like any other value.

const greet = function(name) {
  return `Hello, ${name}!`;
};
console.log(greet("Rahul"));

🔹 2. Callback Functions

A callback is a function passed into another function as an argument, executed later.

function fetchData(callback) {
  console.log("Fetching data...");
  setTimeout(() => {
    console.log("Data fetched!");
    callback();
  }, 2000);
}

function displayData() {
  console.log("Displaying data...");
}

fetchData(displayData);

🔹 3. Higher-Order Functions

Functions that accept or return other functions are called higher-order functions.

function multiply(factor) {
  return function(num) {
    return num * factor;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

🔹 4. Closures

A closure gives you access to an outer function’s variables even after the outer function has finished executing.

function counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment());
console.log(increment());

🧠 Practice Task

Write a higher-order function calculate that takes two numbers and a callback (add, subtract, multiply).

💻 Try It Yourself

Comments