🔐 What is Closure in JavaScript? ? Explained with Simple Examples

-
Image
In JavaScript, a closure is created when a function "remembers" the variables from its outer scope even after the outer function has finished executing . This concept allows functions to access variables from an enclosing scope or function — even after that outer function has returned. Closures are a powerful feature in JavaScript that enable data encapsulation, callback handling, and the creation of private variables. 💡 Let's Understand with an Example function outerFunction() { let outerVariable = "I am from outer scope!"; function innerFunction() { console.log(outerVariable); // Accessing variable from outer scope } return innerFunction; } const closureFunc = outerFunction(); closureFunc(); // Output: I am from outer scope! 🔍 Explanation: outerFunction defines a variable outerVariable . innerFunction is declared inside outerFunction and uses that variable. Even after outerFunction() has finished executing, innerFunc...
Post a Comment

🚀 Unlock the Power of React JS: Build a Functional Component in Minutes!

-
Build Dynamic UIs with React' in a modern, tech-style layout

React JS has revolutionized the way we build modern web applications. If you’re new to React or want a refresher on creating functional components, this post will guide you through it step by step—with a live example included!

🎯 Why React JS?

  • 🧠 Component-based architecture
  • ⚡ Fast performance with Virtual DOM
  • 🔁 Reusable code
  • 🎨 Rich ecosystem for UI/UX

📦 What is a Functional Component?

A functional component is a JavaScript function that returns a React element (JSX). It’s the simplest way to create components in React.

💻 Example: Creating a Simple Functional Component

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

Now, use this component in your main app file:

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(
  <Greeting name="Ankur" />,
  document.getElementById('root')
);

✅ Output:

Hello, Ankur!

This is a dynamic and reusable component. You can change the name prop to anything you want!

🧠 Bonus: Using ES6 Arrow Function

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

Both styles are valid. Choose what suits your coding style.

🛠️ Project Setup (Quick Notes):

Use Create React App to set up your project:

npx create-react-app my-react-app
cd my-react-app
npm start

Add your component files in the src/ folder. Use the App.js or index.js to render them.

📢 Final Thoughts

Functional components are the heart of modern React. With hooks and clean syntax, they are perfect for beginners and pros alike. Try experimenting with props, JSX, and styles to create something amazing!

✅ What’s Next?

  • Dive into useState, useEffect, and other hooks
  • Build a simple project like a Todo App or Calculator
  • Learn about React Router for page navigation

🏷️ Tags:

react js functional components frontend development javascript react hooks web development create react app

Comments

Post a Comment

Popular posts from this blog

🚀 “JavaScript Debounce Made Simple + Live Example!”

-
Image
🧠 Debounce in JavaScript — Explained Simply! Have you ever noticed a search box firing too many requests as you type? Or a button that triggers a function multiple times when clicked repeatedly? That’s where Debounce becomes your best friend! 🚀 What is Debounce? Debounce is a programming pattern used to limit the rate at which a function is executed. It ensures that a function runs only once after a specific delay , and only if the event hasn’t occurred again during that delay. "Debounce waits… and if no new event happens during that wait, it triggers the function!" 🛠 Why Do We Need Debounce? Without debounce, continuous user actions like: Typing in a search input Resizing the window Scrolling the page …can flood your application with function calls, degrading performance and user experience. ✅ With debounce: Smooth performance Controlled API calls Reduced CPU load 📦 Real-Life Example: Search Bar <input type=...
Read more

What is Hoisting in JavaScript? 🔄 Explained with Example

-
Image
📌 What is Hoisting in JavaScript? In this post, we’ll understand one of the most commonly asked JavaScript interview questions: What is Hoisting? I’ve also added a video below that explains hoisting visually. 👇 🔍 What is Hoisting? Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. 🧠 Think of it like this: Even if you declare your variables or functions at the bottom of the file, JavaScript will act as if they were declared at the top — but only the declarations, not initializations. 📂 Example 1: Variable Hoisting console.log(x); // undefined var x = 10; 🔎 Explanation: The declaration var x is hoisted to the top, but the assignment = 10 is not. So x exists but is undefined at the time of the console.log . ⚠️ Let’s Try with let or const console.log(y); // ReferenceError let y = 20; Note: Variables declared with let and const are also hoisted but are not initi...
Read more

🧩 Event Delegation in JavaScript – Write Cleaner, More Efficient Code

-
Image
When building modern web applications, adding event listeners to multiple DOM elements can quickly become a hassle — and impact performance. But what if you could use just one event listener to control many elements? That’s the power of Event Delegation in JavaScript! 🔍 What is Event Delegation? Event Delegation is a JavaScript technique where a single event listener is attached to a parent element , and events from child elements are caught during the bubbling phase . Instead of assigning handlers to each item individually, you delegate the event to the parent, checking the event’s target to determine what was clicked or interacted with. 🌟 Benefits of Using Event Delegation ✅ Better Performance 📉 Reduce memory usage by attaching fewer event listeners. ✅ Simplified Code 🧹 Cleaner, more maintainable code by avoiding repetition. ✅ Dynamic Element Handling ⚙️ Easily manage elements added to the DOM after the initial page load. ✅ Improved Scalability 📈...
Read more