DEV Community: WebTechnology Tutorials

Logical Operators in JavaScript – Complete Guide with Real Examples

WebTechnology Tutorials — Fri, 11 Jul 2025 07:20:46 +0000

Learn how &&, ||, and ! work in JavaScript. Understand truthy/falsy, real-world usage, short-circuiting, and more with easy examples.

📘 Introduction
Logical operators in JavaScript are essential for writing conditions and controlling program logic. They’re used in almost every JavaScript project—from form validation to access control.

In this complete guide, you’ll learn:

How &&, ||, and ! work in JavaScript
Truthy and falsy values
Real-world and interview-level examples
Common mistakes to avoid

🔹 What Are Logical Operators?
JavaScript has three main logical operators:

| Operator | Name        | Description                              |            |                                     |
| -------- | ----------- | ---------------------------------------- | ---------- | ----------------------------------- |
| `&&`     | Logical AND | Returns true if **both** values are true |            |                                     |
| \`       |             | \`                                       | Logical OR | Returns true if **any one** is true |
| `!`      | Logical NOT | Reverses the truth value (negates it)    |            |                                     |

✅ 1. Logical AND (&&)

const age = 25;
const isCitizen = true;

if (age > 18 && isCitizen) {
  console.log("You can vote!");
}

💡 If the first condition is false, JavaScript skips the second—this is called short-circuiting

✅ 2. Logical OR (||)

const hasLicense = false;
const hasPermit = true;

if (hasLicense || hasPermit) {
  console.log("You can drive!");
}

💡 If the first condition is true, the second is ignored.

✅ 3. Logical NOT (!)

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in!");
}

The ! operator flips the value. !true becomes false, and !false becomes true.

🔍 Truthy vs Falsy Values in JavaScript
In JavaScript, non-boolean values can be treated as true or false.
Falsy values:

false
0
""
null
undefined
NaN

Truthy values:

Any non-zero number
Non-empty string
Objects/Arrays

const username = "";

if (!username) {
  console.log("Username is required!");
}

🔄 Real-World Examples
✅ 1. Using || for Defaults

const name = "" || "Guest";
console.log(name); // Guest

✅ 2. Conditional Rendering with &&

const user = { isAdmin: true };

user && user.isAdmin && console.log("Welcome Admin!");

⚠️ Gotchas to Know

console.log(0 || "fallback"); // "fallback"
console.log(0 && "fallback"); // 0

console.log(!!"hello"); // true
console.log(!!0); // false

Use !! to explicitly convert to boolean.

✅ Ternary with Logical Check

const isLoggedIn = true;
const message = isLoggedIn ? "Welcome back!" : "Please log in.";
console.log(message);

🧩 Practice Challenge

function canAccess(age, isLoggedIn) {
  return age >= 18 && isLoggedIn;
}

console.log(canAccess(20, true)); // true
console.log(canAccess(15, true)); // false

❓ FAQs
Q: Can logical operators work on non-booleans?
Yes! JavaScript uses type coercion to convert them into truthy or falsy.

Q: Why use || for default values?
Because if the first value is falsy, it returns the fallback.

📖 Original Blog:
👉 Read more Logical Operators in JavaScript

How to Use indexOf() in JavaScript – Complete Guide with Examples

WebTechnology Tutorials — Tue, 08 Jul 2025 07:31:32 +0000

A beginner-friendly deep dive into JavaScript’s powerful indexOf() method — from strings to arrays, and real-world examples.

🔍 What is indexOf() in JavaScript?
The indexOf() method is used to find the position (index) of a specific element inside a string or array. If it’s not found, it returns -1.

🧪 Syntax
For Strings:

string.indexOf(searchValue, startIndex)

For Arrays:

array.indexOf(searchElement, fromIndex)

📘 Using indexOf() with Strings

const text = "JavaScript is amazing";
console.log(text.indexOf("Script")); // 4

✅ Case Sensitivity

console.log(text.indexOf("script")); // -1

🔁 First Occurrence

const sentence = "I love JavaScript because JavaScript is fun!";
console.log(sentence.indexOf("JavaScript")); // 7

🕵️‍♂️ Find All Occurrences

const str = "JS is cool. JS is powerful. JS is everywhere!";
let index = str.indexOf("JS");
while (index !== -1) {
  console.log("Found at:", index);
  index = str.indexOf("JS", index + 1);
}

🧾 Using indexOf() with Arrays

const fruits = ["apple", "banana", "cherry", "apple"];
console.log(fruits.indexOf("apple")); // 0
console.log(fruits.indexOf("cherry")); // 2

const numbers = [1, 5, 10, 15];
console.log(numbers.indexOf(10)); // 2
console.log(numbers.indexOf(20)); // -1

🎯 Check if an Element Exists

if (fruits.indexOf("banana") !== -1) {
  console.log("Banana is in the list!");
}

🧠 indexOf() vs includes()

| Feature  | indexOf()     | includes()      |
| -------- | ------------- | --------------- |
| Returns  | Index or -1   | true / false    |
| Use Case | Find position | Check existence |

⚡ Performance Tip

// Simpler check
arr.includes("item");

// More flexible
arr.indexOf("item") !== -1

📌 Real-World Use Case

const input = "Learn JavaScript the fun way!";
const term = "JavaScript";

if (input.indexOf(term) !== -1) {
  console.log(`The term "${term}" exists in the sentence.`);
}

❓ Common Interview Question
Q: How can you check if a string contains a word without using regex?
A: Use .indexOf() and compare the result with -1.

🧩 Practice Challenge
Write a function that finds if the word "React" exists in a sentence and returns its position.

function findReact(sentence) {
  return sentence.indexOf("React");
}

console.log(findReact("I love React and JavaScript")); // 7

✅ Summary

Works on strings and arrays
Returns index if found, -1 if not
Case-sensitive
Use includes() for existence check only

🧠 FAQs
Q: Can indexOf() find objects in an array?
A: No, only primitive values like strings, numbers.

Q: What if multiple matches exist?
A: It returns the first index only.

Q: Does indexOf() modify the array or string?
A: No, it is non-mutating.

🔥 Want More?
Read the full blog with images and formatting here:
👉 https://webcodingwithankur.blogspot.com/2025/07/indexof-in-javascript-complete-guide.html

What’s New in React Router 7? Features & Setup Guide

WebTechnology Tutorials — Sun, 06 Jul 2025 06:28:18 +0000

React Router 7 is officially out and packed with powerful new features that make routing in React apps more efficient, scalable, and intuitive.

Whether you’re upgrading from v6 or starting a new project, this guide covers everything you need:

✅ New features in React Router 7

⚙️ How to install and set it up
💻 Code examples using createBrowserRouter, loaders, layouts
📦 Real-world use cases for Suspense and nested routing
🤔 Developer Q&A and migration tips

✨ Why React Router 7 is a Big Deal
React Router 7 supports the latest advancements in React — including Suspense, lazy loading, data loaders, and layout-based routing. It's designed to work seamlessly with React 18+ and future React 19 features.

🔍 Key Features in React Router 7

✅ Built-in Suspense support for route-level code-splitting
✅ Better nested routing via layouts
✅ Loader and action support to fetch data before rendering
✅ New hooks like useNavigation() and useRouteLoaderData()
✅ Optimized support for modern rendering patterns

⚙️ Installation & Setup
Run the following to install:

npm install react-router-dom@7

For a new app with Vite:

npm create vite@latest my-app --template react
cd my-app
npm install
npm install react-router-dom@7

📦 Basic Router Example

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
]);

function App() {
  return <RouterProvider router={router} />;
}

🧱 Nested Routes with Layout

import RootLayout from "./layouts/RootLayout";
import Dashboard from "./pages/Dashboard";
import Profile from "./pages/Profile";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "dashboard", element: <Dashboard /> },
      { path: "profile", element: <Profile /> },
    ],
  },
]);

React Router 7 makes layout nesting easier using its built-in child routes structure.

⚡ Preload Data with Loaders

// routes.js
{
  path: "user/:id",
  loader: async ({ params }) => {
    return fetchUser(params.id);
  },
  element: <UserProfile />
}

// Inside UserProfile.jsx
import { useLoaderData } from "react-router-dom";

const UserProfile = () => {
  const user = useLoaderData();
  return <div>Welcome {user.name}</div>;
}

❓ FAQ: Common Questions About React Router 7
Q. Is this compatible with React 18 or 19?
✔️ Yes, fully compatible.

Q. Do I need to rewrite my app?
🔁 Not completely. But you may need to migrate Routes → RouterProvider, and update hooks.

Q. Can I use it with Suspense and lazy?
✅ Yes! It's designed for it.

Q. Is react-router-dom still used?
🎯 Yes, just install version @7.

📖 Read Full Guide on Blogger
👉 https://webcodingwithankur.blogspot.com/2025/07/whats-new-in-react-router-7-features.html

How to Create a React App with Vite and Tailwind (Beginner Guide)

WebTechnology Tutorials — Sat, 05 Jul 2025 05:36:09 +0000

Creating fast, customizable, and modern web apps has never been easier with React, Vite, and Tailwind CSS. This beginner-friendly guide will help you build a fully functional React project with Tailwind styling using Vite as your development tool.

🚀 Why Use React + Vite + Tailwind?

⚡ Vite: Superfast dev server and build tool.
⚛ React: Flexible and scalable UI library.
💨 Tailwind CSS: Utility-first CSS for rapid UI development.

🧰 Prerequisites

Make sure you have the following installed:

Node.js (v18+)
npm or yarn
VS Code or any code editor

📦 Step 1: Create a React App Using Vite

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

💨 Step 2: Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✍️ Step 3: Configure Tailwind
Update tailwind.config.js:

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add this to src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

🔄 Step 4: Start the Dev Server

npm run dev

Visit http://localhost:5173 in your browser.

🧪 Step 5: Test Tailwind Styling
Replace the content of App.jsx with:

function App() {
  return (
    <div className="flex items-center justify-center h-screen bg-gradient-to-r from-purple-500 to-blue-500 text-white text-4xl font-bold">
      Hello Tailwind + React + Vite! 🚀
    </div>
  );
}

export default App;

✅ Folder Structure

my-react-app/
├── index.html
├── tailwind.config.js
├── postcss.config.js
└── src/
    ├── App.jsx
    ├── main.jsx
    └── index.css

❓ FAQs
Q: Can I use TypeScript with this setup?
A: Yes! Choose react-ts template while initializing with Vite.

Q: Is this production-ready?
A: Yes. Vite offers optimized builds and Tailwind supports purging unused CSS.

Q: Can I use UI libraries with Tailwind?
A: Absolutely. Try Headless UI, Radix UI, or ShadCN for React-compatible components.

🧠 Final Thoughts
Combining React, Vite, and Tailwind gives you:

🚀 Speedy dev experience and build times
✨ Clean, scalable, component-based architecture
🎨 Beautiful, responsive UIs using utility-first CSS

📎 Original Blog Post Link
👉 Read it on How to Create a React App with Vite and Tailwind (Beginner Guide)

Fixing `npx tailwindcss init` Error – Could Not Determine Executable

WebTechnology Tutorials — Thu, 03 Jul 2025 06:42:28 +0000

📖 Intro:
If you've run into the frustrating error:

npx tailwindcss init
npm ERR! could not determine executable to run

You're not alone. This error often appears when setting up Tailwind CSS in a new project. In this post, I’ll explain why it happens and how to fix it quickly using the right commands and setup.

Whether you're working with React, Node.js, or just setting up Tailwind for the first time, this guide is for you.

🚨 Why Does This Error Happen?
This typically happens when:

The tailwindcss CLI is not installed
There is no package.json in your project
npx can’t locate the executable

✅ Fixes (With Steps)
✅ Fix 1: Install Tailwind CSS First

npm install -D tailwindcss
npx tailwindcss init

✅ Fix 2: Initialize package.json if Missing

npm init -y
npm install -D tailwindcss
npx tailwindcss init

✅ Fix 3: Clear NPX Cache (Optional)

npx clear-npx-cache
npx tailwindcss init

✅ Fix 4: Run Directly from Node Modules

node_modules/.bin/tailwindcss init

💡 Bonus: Use CDN for Quick Testing (No Init Required)

<script src="https://cdn.tailwindcss.com"></script>

Not recommended for production.

❌ Common Mistakes

| Mistake                         | Fix                         |
| ------------------------------- | --------------------------- |
| Running `npx` before installing | Install `tailwindcss` first |
| No package.json                 | Run `npm init -y`           |
| Using outdated Node/npm         | Update Node.js to v14+      |

🔎 Also Read:
If you're exploring performance in React:

👉 How to useMemo in React to Improve Performance

📘 Conclusion
This error is just a small roadblock when working with Tailwind CSS. With the right install sequence and project setup, you’ll be up and running in no time.

Want a full visual guide and code examples?

👉 Read the full blog post here

Understanding `filter()` as a Higher-Order Function in JavaScript

WebTechnology Tutorials — Wed, 02 Jul 2025 08:29:36 +0000

JavaScript treats functions as first-class citizens, allowing us to pass them around, return them, and even compose them. This flexibility gives birth to higher-order functions, a concept that powers much of modern JavaScript — especially array methods like filter().

🔍 What is a Higher-Order Function?

A higher-order function is one that either:

Accepts another function as an argument, or
Returns a function as its output.

function greetUser(greetingFn) {
  greetingFn();
}

function sayHello() {
  console.log("Hello, Developer!");
}

greetUser(sayHello); // Output: Hello, Developer!

Here, greetUser is a higher-order function because it takes a function as a parameter.

☕ Real-World Analogy: Filter Coffee
Imagine you’re brewing coffee through a filter. Only the finest particles pass through, giving you the perfect brew. Similarly, JavaScript’s filter() method passes only the elements that meet a condition — defined via a callback function.

💡 What is filter() in JavaScript?
The filter() method creates a new array with elements that pass a specific test (provided by a callback).
Syntax:

array.filter(callbackFunction(element, index, array), thisArg)

🔧 Why is filter() a Higher-Order Function?
Because filter() accepts a callback function, it is by definition a higher-order function.

You define the logic; filter() applies it dynamically to each array element — making it modular, reusable, and clean.

✅ Practical Examples
1. Filter Even Numbers

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

2. Filter Adults from User List

const users = [
  { name: "Ankur", age: 28 },
  { name: "Rahul", age: 17 },
  { name: "Priya", age: 21 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);

3. Modular Filtering with Named Functions

function isAdult(user) {
  return user.age >= 18;
}

const adultUsers = users.filter(isAdult);

🔄 Chaining with Other Array Methods
You can chain filter() with map() and reduce() for powerful data transformations:

const prices = [100, 200, 300, 400];

const discounted = prices
  .filter(price => price > 200)
  .map(price => price * 0.9);

console.log(discounted); // [270, 360]

❓ Common Questions
Q: Does filter() mutate the original array?
A: No. filter() returns a new array.

Q: Can I filter based on multiple conditions?
A: Yes, just use logical operators in the callback:

const filtered = numbers.filter(num => num > 10 && num < 50);

Q: Can I use filter() with objects?
A: Use Object.entries() + filter():

const obj = { a: 1, b: 2, c: 3 };
const filtered = Object.entries(obj)
  .filter(([key, value]) => value > 1);

console.log(Object.fromEntries(filtered)); // { b: 2, c: 3 }

✅ Final Thoughts
Understanding filter() as a higher-order function is essential for writing clean, functional, and maintainable JavaScript. It’s not just about filtering — it’s about mastering function composition and code reusability.

🔗 Original Blog Link
📖 https://webcodingwithankur.blogspot.com/2025/07/javascript-filter-higher-order-function.html

🧠 Mastering useCallback in React: Prevent Unnecessary Re-Renders and Boost Performance

WebTechnology Tutorials — Mon, 30 Jun 2025 08:06:53 +0000

Ever wondered why your child components keep re-rendering even when their props haven't changed? Or why performance drops in large React apps? The answer might lie in one powerful but underused hook — useCallback.

In this blog post, we’ll explore React’s useCallback hook in depth. You’ll learn how it works, when to use it, and how to pair it with tools like React.memo, useState, and useMemo for real-world performance optimization.

🔍 What is useCallback in React?
useCallback is a React Hook that returns a memoized version of a callback function. It prevents the function from being re-created on every render — unless the dependencies change.

const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

This becomes crucial when you're passing callbacks to memoized child components (React.memo), which rely on reference equality to avoid re-rendering.

🧠 Real-World Analogy
Think of your callback as a phone number. If it changes every time, the person you're calling (your child component) thinks it's someone new — and answers again. useCallback keeps the number the same unless there's a real reason to change.

✅ Why Use useCallback?

Prevent unnecessary re-renders
Improve app performance
Stabilize function references passed as props
Avoid expensive recalculations

❌ Without useCallback

const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log("Clicked");
  };

  return (
    <>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child onClick={handleClick} />
    </>
  );
};

const Child = React.memo(({ onClick }) => {
  console.log("Child re-rendered");
  return <button onClick={onClick}>Click me</button>;
});

Here, Child re-renders even when it doesn’t need to — because handleClick is recreated on every render.

✅ With useCallback

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

Now the Child component won’t re-render unnecessarily, thanks to the stable function reference.

🧪 useCallback vs useMemo

| Hook          | Purpose                 | Returns                 |
| ------------- | ----------------------- | ----------------------- |
| `useCallback` | Memoizes a **function** | Same function reference |
| `useMemo`     | Memoizes a **value**    | Result of computation   |

const memoizedCallback = useCallback(() => compute(a, b), [a, b]);
const memoizedValue = useMemo(() => compute(a, b), [a, b]);

🔍 Debug With React DevTools
Use the Profiler in React DevTools to:

Inspect render frequency
Validate optimizations
Track function reference changes

⚙️ Best Practices

✅ Use with React.memo for child components
✅ Use when function dependencies change infrequently
✅ Avoid overuse — it has memory overhead
✅ Always pass accurate dependencies
✅ Combine with useMemo when needed

💡 Bonus: Working with useState

const [count, setCount] = useState(0);
const increment = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

💬 Let's Connect
Have questions or want to share how you use useCallback? Drop a comment below or explore more tips on my blog:
🔗 Mastering useCallback in React

🔍 Deep Dive into useMemo in React.js: Optimize Performance Like a Pro

WebTechnology Tutorials — Sun, 29 Jun 2025 07:45:12 +0000

React is blazing fast, but as your app scales, performance issues like unnecessary re-renders and repeated calculations can sneak in. That’s where the useMemo Hook becomes your secret weapon.

✅ In this post, you'll learn:

What is useMemo in React?
Why and when to use it
Real-world analogies
Optimization use cases with child components
Code examples and diagrams

🧠 What is useMemo?

useMemo is a React Hook that memoizes the result of a function, meaning it will only re-run the computation when its dependencies change.

Example syntax:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

It helps avoid recomputing things unnecessarily and boosts performance, especially in large React apps.

🎯 Why use useMemo?

React re-renders on every state or prop change. That means:

Expensive calculations may re-run every time
Child components may re-render even with the same data
Object and function references get recreated, causing unnecessary changes

useMemohelps by:

Improving performance
Keeping references stable
Preventing unnecessary child re-renders

🚀 When should you use it?

Use useMemo when:

You have expensive computations
You're passing filtered or derived data to child components
You want to keep prop references stable

But don’t use it everywhere — only where it's needed. Overusing useMemo can actually reduce performance due to memory and complexity overhead.

📊 Real-World Example: Factorial Calculator

Let’s memoize a factorial calculation:

const factorial = (n) => {
  console.log('Calculating...');
  if (n === 0) return 1;
  return n * factorial(n - 1);
};

const result = useMemo(() => factorial(number), [number]);

Without useMemo, the factorial would re-run every time the component re-renders. This optimization avoids that.

👶 Child Component Optimization

Example of stabilizing props passed to a memoized child component:

const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(query));
}, [query]);

<ChildComponent data={filteredItems} />

This avoids unnecessary re-renders in ChildComponent.

🔄 useMemo vs useCallback

| Hook          | What it Memoizes       | Best For                   |
| ------------- | ---------------------- | -------------------------- |
| `useMemo`     | The return value       | Expensive computed values  |
| `useCallback` | The function reference | Stable event handler props |

🙋‍♂️ Frequently Asked Questions

Q: Does useMemo always improve performance?
A: No. It’s useful only when there are expensive operations or frequent renders.

Q: Can it be used with async functions?
A: No. useMemo is synchronous. Use useEffect or a data-fetching library for async behavior.

Q: How to track when it works?
A: Use React DevTools to monitor re-renders and props.

🎬 Watch Video Tutorial
Watch this topic explained on YouTube:
👉 https://youtu.be/7opz5TfYyws

📌 Read Full Blog Post with HTML, code formatting, and visuals:
👉 https://webcodingwithankur.blogspot.com/2025/06/usememo-in-react-performance-optimization.html

Mastering Promises in JavaScript (With Real-World Examples)

WebTechnology Tutorials — Sat, 28 Jun 2025 06:32:05 +0000

Have you ever struggled to understand how JavaScript handles asynchronous code with .then() and .catch()?

In my latest blog, I break down JavaScript Promises using:

🍕 Simple real-life analogies (like ordering pizza)
💡 Code examples you can copy and run
🔁 Chaining techniques for cleaner async logic
❌ Error handling best practices
✨ Bonus: async/await explained with clarity

Whether you're a beginner or brushing up your skills, this post will help you move from callback hell to writing modern, clean, and readable asynchronous JavaScript.

👉 Read the full post here:
🔗 https://webcodingwithankur.blogspot.com/2025/06/javascript-promises-explained.html.html

I’d love to hear your feedback or questions — drop a comment or let me know what topic you’d like next!

What is Hoisting in JavaScript? | Explained with Examples & Visuals

WebTechnology Tutorials — Fri, 27 Jun 2025 07:01:16 +0000

🚀 Introduction
Have you ever encountered an error like undefined is not a function or wondered why a variable seems to exist before it's declared?
Welcome to the quirky world of hoisting in JavaScript — a concept that surprises most developers when they first see it in action.

In this blog post, you'll learn:

What is hoisting in JavaScript?
How variables and functions are hoisted
The difference between var, let, and const
Real examples and a mental model to remember hoisting

🔍 What is Hoisting?
Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope (function or global).

This means you can use variables and functions before you declare them — but there’s a catch!

📌 Example 1: Variable Hoisting with var

console.log(name); // undefined
var name = "Ankur";

Explanation:
The variable name is hoisted, but only the declaration (not the value) is moved to the top.It’s as if you wrote:

var name;
console.log(name); // undefined
name = "Ankur";

🚫 What about let and const?

console.log(age); // ❌ ReferenceError
let age = 25;

Variables declared with letand const are not initialized during hoisting.
They remain in a Temporal Dead Zone (TDZ) until the line of declaration is reached.

📌 Example 2: Function Hoisting

greet();

function greet() {
  console.log("Hello there!");
}

✅ This works!
Function declarations are hoisted with their definitions.

⚠️ Function Expressions are NOT Hoisted

sayHi(); // ❌ TypeError

var sayHi = function () {
  console.log("Hi!");
};

🧠 Visual Model of Hoisting

📝 Summary

Concept	Hoisted?	Accessible before declaration?
`var`	✅ Yes	⚠️ Yes, but value is undefined
`let` / `const`	✅ Yes	❌ No, in TDZ
Function Declaration	✅ Yes	✅ Yes
Function Expression	❌ No	❌ No

💬 Final Thoughts
Understanding hoisting helps prevent bugs and write cleaner JavaScript code.
Next time you write a function or a variable, remember this internal "lift" that JavaScript performs.

🔗 Read Full Blog with Code and Visuals
👉 https://webcodingwithankur.blogspot.com/2025/06/what-is-hoisting-in-javascript.html

What is Closure in JavaScript? Explained with Real-World Examples

WebTechnology Tutorials — Thu, 26 Jun 2025 07:25:14 +0000

🔐 What is Closure in JavaScript?

In JavaScript, a closure is created when a function "remembers" variables from its outer lexical scope, even after the outer function has returned.

Closures enable inner functions to continue accessing variables from the outer function. This powerful concept is key to writing flexible and secure code.

Example of a Closure

function outerFunction() {
  let outerVariable = "Hello from the outer scope";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const myClosure = outerFunction();
myClosure(); // Output: Hello from the outer scope

How it works:

outerFunctiondefines a local variable outerVariable.
innerFunctionis declared inside outerFunction and uses outerVariable.
When outerFunction() is called, it returns innerFunction.
Even though outerFunction() has completed, the returned innerFunction still has access to outerVariable.

This behavior is what we call a closure.

Why Use Closures?

Closures are useful when:

You want to keep certain data private.
You need to preserve a value between function calls.
You work with asynchronous functions like setTimeout, setInterval, or API calls.

Real-World Example: Counter

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log(count);
  };
}

const counter1 = createCounter();
counter1(); // 1
counter1(); // 2

const counter2 = createCounter();
counter2(); // 1

Each counter instance has its own independent count value. This happens because each call to creates a new closure.

Summary

A closure is a function bundled with its lexical environment. It gives you the ability to:

Maintain state across executions
Hide and protect variables
Work more efficiently with asynchronous or functional code

Closures are a core concept in JavaScript and are commonly used in practical applications like module patterns, callbacks, currying, and event handlers.

Read More

To see the original version of this blog with additional formatting and examples, visit:
https://webcodingwithankur.blogspot.com/2025/06/what-is-closure-in-javascript.html.html

💡 Understanding the JavaScript Event Loop (With Diagrams & Code)

WebTechnology Tutorials — Wed, 25 Jun 2025 06:10:21 +0000

If you're learning JavaScript and asynchronous code makes your brain hurt — you're not alone! 😅

In my latest blog post, I explain the JavaScript Event Loop in a beginner-friendly way using:

🧩 Diagrams
🧪 Code examples
📌 Clear explanation of Call Stack, Web APIs, Microtask & Callback Queues
🎓 Real-world reasoning behind Promise vs setTimeout execution order

Here’s a quick snippet:

console.log("Start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Do you know why Promise logs before setTimeout even when both are async?
💭 The Event Loop knows!

👉 Read the full article here: https://webcodingwithankur.blogspot.com/2025/06/what-is-event-loop-in-javascript.html

🔖 If you're preparing for JavaScript interviews or building complex web apps, this guide is a must-read!