Forem: Preyum Kumar

Modern React Essentials: From Component Architecture to Advanced Hooks

Preyum Kumar — Thu, 09 Apr 2026 17:55:27 +0000

In an AI-driven world, we should keep our basics clear at all times. This is the second post in my next.js learning series where we will learn about React as it's a fundamental part of Next.js. In the future, I may also add an optional HTML & CSS post, but since I'm already familiar with their fundamentals, I'm not creating one just now.

Index

Modern React Development with Vite
Core React Concepts
React with TypeScript
Building UIs with Components
State Management and Hooks
Advanced Hooks and Patterns
Working with APIs: Loading and Error States
Navigation (React Router)
Performance and Optimization
Professional Testing with Vitest

Modern React Development with Vite

While you can use React by adding script tags to an HTML file, the industry standard for building real-world applications is using a build tool. Currently, Vite is the most popular and recommended tool for creating new React projects.

Prerequisites: Node.js

Before using modern tools like Vite, you must have Node.js installed. Node.js is a JavaScript runtime that allows you to run JavaScript outside of a browser.

npm (Node Package Manager): Used to download and manage libraries (like React).
npx (Node Package Execute): Allows you to run a package without installing it globally. For example, npx create-vite runs the creator tool once and then cleans up.

Why Vite?

Vite is significantly faster than older tools like create-react-app because of its modern architecture:

Native ESM: It serves code as native ES modules, which browsers can parse directly, skipping the slow bundling step during development.
Hot Module Replacement (HMR): Updates only the specific module you changed, keeping the application state intact.

Strict Mode: Why useEffect runs twice

In a new Vite project, you'll see your code wrapped in <React.StrictMode>.

The Behavior: In Development Mode, React intentionally mounts every component, unmounts it, and mounts it again. This causes useEffect to run twice.
The Why: This helps catch bugs where you've forgotten cleanup logic, but more importantly, it identifies Stale Closures and ensures your logic is Idempotent.

Idempotency Visualization:

Run 1 (Mount) → Effect Setup (e.g., Subscribe)
Run 2 (Unmount) → Effect Cleanup (e.g., Unsubscribe)
Run 3 (Re-mount) → Effect Setup (e.g., Subscribe)
Result: App remains stable. If step 2 is missing, step 3 creates a DUPLICATE subscription.

Production: This behavior is stripped away in the final build.

Environment Variables (.env)

In real applications, you never hardcode API keys or secret URLs. You store them in a .env file at the root of your project.

Definition (.env file):

# Variables MUST start with VITE_ to be visible to your React code
VITE_API_URL=https://api.myapp.com
VITE_ANALYTICS_KEY=abc123secret

Usage (in your JS code):

const apiUrl = import.meta.env.VITE_API_URL;
console.log("Connecting to:", apiUrl);

Using npm (Node Package Manager)

Local Install (npm install <package> or npm i): Adds the package to package.json under dependencies. Used for libraries your app needs to run (like React or Axios).
Development Install (npm install -D <package>): Adds to devDependencies. Used for tools needed only during coding (like Tailwind or Vite) and removed in production.
Global Install (npm install -g <package> or npm i -g): Installs the package system-wide. Typically used for CLIs (e.g., firebase-tools, nodemon).

Dev vs. Prod: Different Commands

Modern development distinguishes between "writing code" and "shipping code."

Command	Usage	Result
`npm run dev`	Development	Starts a local server with HMR.
`npm run build`	Production	Minifies JS/CSS, optimizes images into a `dist/` folder.
`npm run preview`	Production Test	Locally serves the optimized `dist/` folder for final checking.

Proxying API Requests (vite.config.js)

To avoid CORS (Cross-Origin Resource Sharing) errors, where the browser blocks requests between different ports (e.g., 5173 to 3000).

The Scenario:
Imagine your backend has an endpoint http://localhost:3000/api/users.

Before Proxy (CORS Error): axios.get('http://localhost:3000/api/users') ❌ Blocked by browser.
After Proxy (Success): axios.get('/api/users') ✅ Vite forwards this to localhost:3000.

Config (vite.config.js):

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
})

Core React Concepts

React Fundamentals

To see how React works "under the hood," you can run it in a single HTML file.

Definition:

<!DOCTYPE html>
<html>
  <head>
    <title>React Fundamentals</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function App() {
        return <h1>Hello from fundamental React!</h1>;
      }
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(<App />);
    </script>
  </body>
</html>

The Virtual DOM and Reconciliation

One of the main reasons React is so fast is how it handles updates.

Visualization of the flow:

State Change → New Virtual DOM → Diffing (Compare with Old VDOM) → Patch Real DOM

Virtual DOM: Instead of changing the real browser HTML (which is slow) every time data changes, React creates a lightweight "copy" of the UI in memory.
Diffing: When state changes, React compares the new Virtual DOM with the old one to see exactly what changed.
Reconciliation: React then updates only the parts of the real DOM that actually changed.

The Immutability Principle: Why Spread?

React only re-renders if it detects a new reference in state. Direct mutation fails to trigger re-renders.

Definition:

const [user, setUser] = useState({ name: 'Preyum', age: 25 });

// ❌ WRONG: Mutation (React won't re-render)
user.age = 26;
setUser(user);

// ✅ CORRECT: Create a NEW object (React re-renders)
setUser({ ...user, age: 26 });

Technical Insight: If asked why we use the spread operator, mention Referential Equality. React uses shallow comparison (Object.is) to check if state has changed. If you mutate the object, the reference remains the same, and React assumes nothing has changed.

Babel and JSX

JSX is a syntax extension for JavaScript. Babel compiles it into React.createElement calls.

Key Rules and Why They Exist:

Strict Tag Closing: Every tag must be closed. If an element doesn't have children, you must use a self-closing tag.
```
<input type="text" /> // ✅ Correct
```
className instead of class: In JS, class is a reserved keyword for ES6 classes. React uses className to avoid conflicts.
One Root Element: A component must return a single element because a function can only return one value. Use Fragments <> </> if you don't want a wrapper div.

The .render() Method

The .render() call is the entry point where your React tree is injected into the real browser DOM.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

React with TypeScript

TSX vs. JSX: The Power of Types

In .tsx, your code won't even compile if types don't match, catching errors before they reach the browser.

Before (JSX - Dangerous):

const User = ({ name }) => <h1>{name.toUpperCase()}</h1>;
<User name={123} /> // ❌ Crash: .toUpperCase() is not a function for numbers

After (TSX - Safe):

interface UserProps { name: string; }
const User = ({ name }: UserProps) => <h1>{name.toUpperCase()}</h1>;
// <User name={123} /> // ❌ TypeScript Error: 123 is not a string!

Interface vs. Type

For 90% of React work, they are interchangeable. The key difference is extensibility:

Interfaces are "Open": They support Declaration Merging.

interface User { name: string; }
interface User { age?: number; } // ✅ Merged: User now has both

Types are "Closed": They are aliases. To combine them, you must use Intersections (&).

type Name = { name: string; };
type Age = { age: number; };
type User = Name & Age;

Required vs. Optional Properties

By default, every property is Required. Use the question mark (?) to make them optional.

Definition:

interface UserProps {
  name: string;   // Required
  age?: number;  // Optional
}

Usage:

const Greet = ({ name, age }: UserProps) => (
  <h1>Hello {name} {age ? `(${age})` : ""}</h1>
);

const App = () => (
  <>
    <Greet name="Preyum" />          {/* ✅ Works (age omitted) */}
    <Greet name="Kumar" age={25} /> {/* ✅ Works (age provided) */}
  </>
);

Typing Events in TypeScript

A major pain point is knowing how to type function arguments for events.

Definition:

const Input = () => {
  // Use React.ChangeEvent for inputs
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  // Use React.FormEvent for form submissions
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={handleChange} />
    </form>
  );
};

Type Inference: Implicit vs. Explicit

1. Implicit Type Inference

TypeScript "guesses" the type based on the initial value.

Example:

const [count, setCount] = useState(0); 
// TypeScript automatically knows 'count' is a number.

2. Explicit Type Definition

Necessary when the initial value is empty (like null) or complex.

Example:

interface Task { id: number; text: string; }
const [tasks, setTasks] = useState<Task[]>([]);
const [user, setUser] = useState<User | null>(null);

Building UIs with Components

Note on File Structure: In real-world projects, every component is typically defined in its own file (e.g., Button.jsx) and then imported where needed. For clarity in these examples, we show the Definition and the Usage together.

Components

Definition:

const Button = ({ text, color, handleClick }) => (
  <button 
    onClick={handleClick}
    style={{ backgroundColor: color, color: 'white', padding: '10px' }}
  >
    {text}
  </button>
);

Usage:

const App = () => (
  <Button text="Save Changes" color="green" handleClick={() => alert("Saved!")} />
);

Event Handling: Passing Arguments

A common mistake is calling a function directly in the onClick.

Definition:

const List = () => {
  const deleteItem = (id) => console.log("Deleting", id);

  return (
    <ul>
      {/* ❌ WRONG: Runs immediately on render because of (5) */}
      <button onClick={deleteItem(5)}>Delete 5</button>

      {/* ✅ CORRECT: Wrapped in an arrow function */}
      <button onClick={() => deleteItem(5)}>Delete 5</button>

      {/* ✅ CORRECT: If no arguments, pass by reference */}
      <button onClick={console.log}>Log Event</button>
    </ul>
  );
};

Props (Properties)

Props are read-only data passed from parent to child.

Definition (Destructuring with Default Values):

const Card = ({ title = "Untitled", children, category = "General" }) => (
  <div className="card">
    <small>{category}</small>
    <h2>{title}</h2>
    <div className="content">{children}</div>
  </div>
);

The Magic "children" Prop

The children prop automatically passes whatever you put between the opening and closing tags.

Usage:

const App = () => (
  <Card title="React Basics">
    <p>This paragraph is passed as the children prop!</p>
  </Card>
);

Component Composition: Avoiding Prop Drilling

Before reaching for useContext, you can often avoid prop drilling by passing components as props. This is a sign of clean architecture.

Definition:

const Layout = ({ sidebar, content }) => (
  <div className="layout">
    <aside>{sidebar}</aside>
    <main>{content}</main>
  </div>
);

Usage:

const App = () => (
  <Layout 
    sidebar={<nav>Menu</nav>} 
    content={<h1>Dashboard</h1>} 
  />
);

Portals: Rendering Outside the Tree

Sometimes you need a component (like a Modal or Tooltip) to render at the top level of the HTML hierarchy (near <body>), even if the component is deep inside your React tree.

1. Setup (in your index.html)

<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Add this for Portals -->
</body>

2. Definition (in JS)

import ReactDOM from 'react-dom';

const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal-overlay">{children}</div>,
    document.getElementById('portal-root')
  );
};

Usage:

const App = () => (
  <div style={{ overflow: 'hidden' }}>
    <p>I am deep in the tree.</p>
    <Modal>I am rendering outside this hidden div!</Modal>
  </div>
);

Lifting State Up: Sibling Communication

When two sibling components need to share data, you move the state to their closest common parent.

Definition:

const Parent = () => {
  const [text, setText] = useState("");
  return (
    <>
      <InputComponent value={text} onType={setText} />
      <DisplayComponent content={text} />
    </>
  );
};

This pattern is the foundation of React architecture because of the One-Way Data Flow principle. Data in React can only flow down from parent to child via props.

By "lifting" the state to the Parent:

The InputComponent can update the state using the onType function.
The Parent re-renders with the new value.
The new value is automatically passed down to the DisplayComponent as a prop.

Rendering Lists: The "No Index" Rule

Definition:

const Navbar = ({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.label}</li>
    ))}
  </ul>
);

Rule of Thumb: Avoid using the array index as a key if the list is dynamic (sortable, filterable, or removable).
The Nuance: React uses the key to identify which items have changed, been added, or removed. When the index is used, shifting an item changes the index of every subsequent item, forcing a full re-render of the entire list instead of just one targeted move.
Static Lists: If your list is strictly static (like a fixed footer menu), using index is perfectly fine and performant.

Conditional Rendering

Definition:

const AuthPanel = ({ user, error }) => (
  <div className="auth">
    {user ? (
      <button>Logout ({user.name})</button>
    ) : (
      <>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button>Login</button>
      </>
    )}
  </div>
);

In React, we use standard JavaScript logic to decide which UI to show:

Ternary Operator (? :): Best for "If-Else" scenarios, like switching between a Login and Logout button.
Logical AND (&&): Best for "Show-Hide" scenarios, where you only want to render an element (like an error message) if a specific condition is met.

Usage:

const App = () => {
  const currentUser = { name: "Preyum" };
  const loginError = "Session Expired";

  return (
    <AuthPanel user={null} error={loginError} />
  );
};

Fragments and Keyed Fragments

Fragments <> </> allow you to group multiple elements without adding an extra <div> to the real DOM, which prevents breaking CSS layouts like Flexbox or Grid.

Keyed Fragments: If you are in a loop and need to use a fragment with a key, you cannot use the shorthand. You must use the full name.

Definition & Usage:

const Glossary = ({ items }) => (
  <dl>
    {items.map(item => (
      <React.Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.desc}</dd>
      </React.Fragment>
    ))}
  </dl>
);

Error Boundaries: The App Safety Net

A JavaScript error in a component shouldn't crash the whole app. Error Boundaries are Class Components that catch errors in their child tree.

Definition:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Usage:

const App = () => (
  <ErrorBoundary>
    <MyBuggyComponent />
  </ErrorBoundary>
);

Styling in React: Inline vs CSS Modules vs Tailwind

1. Inline Styles (JavaScript Objects)
Styles are written as objects using camelCase instead of kebab-case.

const style = { color: 'blue', fontSize: '20px' };
const Header = () => <h1 style={style}>Styled Header</h1>;

2. CSS Modules (The Vite Standard)
Prevents global naming conflicts. Styles only apply to the component that imports them.

// Button.module.css
// .btn { background: green; }

import styles from './Button.module.css';
const Button = () => <button className={styles.btn}>Module Button</button>;

3. Tailwind CSS (The Modern Standard)
Utility-first CSS. This is the go-to for modern developers.

const Button = () => (
  <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Tailwind Button
  </button>
);

State Management and Hooks

The Rules of Hooks

To keep React stable, Hooks must follow two strict rules:

Only at the Top Level: Don't call Hooks inside loops, conditions, or nested functions.
Only in React Functions: Only call Hooks from Functional Components or Custom Hooks.

Why the "Top Level" Rule?
React keeps track of your state by the order in which Hooks are called.

Internal Visualization:

Render 1: [Hook 1 (useState), Hook 2 (useEffect), Hook 3 (useState)]
Render 2: [Hook 1 (useState), Hook 2 (useEffect), Hook 3 (useState)]

If you put a Hook inside an if statement, the order breaks, and React loses track of which state belongs to which variable!

Example: Why the "Top Level" rule matters

// ❌ WRONG: Hook inside a condition
if (user) {
  useEffect(() => {
    console.log("Logged in!");
  }, []);
}

// ✅ CORRECT: Condition inside the Hook
useEffect(() => {
  if (user) {
    console.log("Logged in!");
  }
}, [user]);

State vs. Props vs. Refs: Which one to use?

Data Flow Visualization:

Parent (Owner of State) --[Passes Props]--→ Child (Receiver)
Ref (Side Channel) ----------------------→ Target DOM Element

Tool	Trigger Render?	Mutable?	Best For...
Props	Yes (Parent re-renders)	No	Receiving data from parent.
State	Yes (Instant)	No	Data that changes over time & affects UI.
Refs	No	Yes	Accessing DOM or storing "silent" values.

useState: Controlled vs Uncontrolled

Controlled (Recommended): React state handles the input value.
Uncontrolled: The DOM handles the input value (using useRef).

Definition (Controlled Input):

const Input = () => {
  const [val, setVal] = useState("");
  return <input value={val} onChange={(e) => setVal(e.target.value)} />;
};

Definition (Uncontrolled Input):

const UncontrolledInput = () => {
  const inputRef = useRef(null);
  const getValue = () => console.log(inputRef.current.value);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={getValue}>Get Value</button>
    </>
  );
};

useState: Handling Multiple Inputs

Instead of multiple state calls, use a single object.

Definition:

const Form = () => {
  const [data, setData] = useState({ name: "", email: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData(prev => ({ ...prev, [name]: value })); // Spread operator is KEY
  };

  return (
    <form>
      <input name="name" value={data.name} onChange={handleChange} />
      <input name="email" value={data.email} onChange={handleChange} />
    </form>
  );
};

useState: Asynchronous Updates and Batching

React "batches" updates together for performance.

Definition:

const Profile = () => {
  const [profile, setProfile] = useState({ name: 'Preyum', role: 'Dev' });

  const promote = () => {
    setProfile(prev => ({ ...prev, role: 'Senior Dev' }));
    // Note: profile.role will STILL be 'Dev' on this line because state updates are scheduled, not immediate.
  };

  return <button onClick={promote}>Promote {profile.name}</button>;
};

Technical Insight: React 18+ uses Automatic Batching. Even if you update state inside a setTimeout or a fetch call, React will now group them into one single render to ensure high responsiveness.

useEffect: The Dependency Array

Determines when the effect should re-run.

1. No Dependency Array

Runs after every render. This is rarely used and can lead to performance issues or infinite loops if you update state inside the effect.

useEffect(() => {
  console.log("I run on every single render!");
});

2. Empty Dependency Array ([])

Runs only once, immediately after the component is mounted. This is the ideal place for API calls or setting up subscriptions.

useEffect(() => {
  console.log("I run only once on mount (componentDidMount)");
  fetchData();
}, []);

3. Dependency Array with Values ([count])

Runs on mount and then re-runs whenever any value in the array changes. This is used to sync your effect with specific state or props.

useEffect(() => {
  console.log("I run on mount and whenever 'count' changes");
}, [count]);

useEffect: The Lifecycle Mental Model

Dependency Array	Lifecycle Phase
`[]` (Empty)	Mount
`[var]` (Populated)	Update
`return () => ...`	Unmount

useEffect Cleanup: AbortController

To prevent memory leaks or "state updates on unmounted components," always clean up API calls.

Definition & Usage:

useEffect(() => {
  const controller = new AbortController();

  const fetchData = async () => {
    try {
      const res = await axios.get('/api/data', { signal: controller.signal });
      setData(res.data);
    } catch (err) {
      // Bulletproof: Handle both native fetch and Axios abort patterns
      if (err.name === 'AbortError' || axios.isCancel(err)) return;
      console.error(err);
    }
  };

  fetchData();

  // 🧹 CLEANUP: Runs when component is destroyed
  return () => controller.abort();
}, []);

useLayoutEffect vs useEffect

useEffect: Runs after the screen is painted. Best for most tasks.
useLayoutEffect: Runs before the screen is painted. Use for measuring DOM elements to prevent UI flickering.

useRef and forwardRef

While useRef lets you access a DOM node inside your component, forwardRef allows you to pass that access to a custom child component.

Definition (forwardRef):

import { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => (
  <input ref={ref} className="fancy-input" {...props} />
));

Usage:

const Parent = () => {
  const inputRef = useRef(null);
  const handleFocus = () => inputRef.current.focus();

  return (
    <>
      <MyInput ref={inputRef} placeholder="Focus me!" />
      <button onClick={handleFocus}>Focus the Input</button>
    </>
  );
};

useImperativeHandle

Used together with forwardRef. It allows you to "expose" only specific functions or properties of a child component to its parent, rather than giving the parent full access to the underlying DOM node. This is often used for animations or manual focus management in reusable UI libraries.

Definition:

import { forwardRef, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    shake: () => {
      console.log("Shaking the input!");
    }
  }));

  return <input ref={inputRef} {...props} />;
});

Usage:

const App = () => {
  const customRef = useRef();

  return (
    <>
      <FancyInput ref={customRef} />
      <button onClick={() => customRef.current.focus()}>Focus Child</button>
      <button onClick={() => customRef.current.shake()}>Shake Child</button>
    </>
  );
};

Advanced Hooks

useReducer: Managing Complex State with Payloads

useReducer is better than useState when you have complex data logic.

Definition:

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM': 
      // 'action.payload' is the extra data passed
      return [...state, action.payload];
    case 'REMOVE_ID':
      return state.filter(item => item.id !== action.payload);
    default: 
      return state;
  }
};

Usage:

const ShoppingCart = () => {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addToCart = (product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return <button onClick={() => addToCart({ id: 1, name: 'Laptop' })}>Buy</button>;
};

useContext: The Provider Pattern

Professional apps refactor the context into a dedicated Provider component.

Definition (UserContext.jsx):

const UserContext = React.createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({ name: "Preyum" });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

Usage:

// 1. Wrap your app (usually in App.js or main.js)
<UserProvider>
  <Dashboard />
</UserProvider>

// 2. Consume in any child component
const Dashboard = () => {
  const { user } = useContext(UserContext);
  return <h1>Welcome, {user.name}</h1>;
};

Technical Insight: When does Context become a problem? Context is great for static-ish data (Theme, User). If the data changes every second, Context causes the entire child tree to re-render. For high-frequency state, reach for a global manager like Zustand.

Global State Alternatives (Zustand & Redux)

When Context isn't enough, developers move to dedicated state management libraries.

Redux: The traditional industry standard. It uses a "Flux" architecture with a strict unidirectional data flow. However, it is famous for requiring a lot of "boilerplate" code (Actions, Reducers, Store, Dispatch).
Zustand: A modern, lightweight alternative that is much simpler than Redux and doesn't require wrapping your whole app in Providers.

Definition (Zustand):

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

Custom Hooks: Reusing Logic

Custom hooks allow you to extract component logic into reusable functions. They must start with the word use.

Definition:

const useFetch = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
};

Usage:

const UserProfile = () => {
  const userData = useFetch('/api/user/1');
  return <div>{userData?.name}</div>;
};

useId (Accessibility)

The useId hook generates unique, stable IDs that work correctly on both the server and the client. This is the professional standard for linking <label> elements to <input> fields, ensuring your forms are accessible to screen readers without risk of "ID collisions" (where two elements accidentally share the same ID).

Definition & Usage:

import { useId } from 'react';

const PasswordField = () => {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
};

Working with APIs: Loading and Error States

Real-world API calls are not instant. You must handle three states: Idle/Loading, Success, and Error.

Definition:

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      try {
        setLoading(true);
        const res = await axios.get(`/api/users/${userId}`);
        setUser(res.data);
      } catch (err) {
        setError("Failed to load user profile.");
      } finally {
        setLoading(false);
      }
    };
    loadData();
  }, [userId]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p style={{ color: 'red' }}>{error}</p>;
  return <h1>{user.name}</h1>;
};

Next.js Bridge: While we use useEffect + axios here (Client-side fetching), Next.js 14+ often handles data fetching on the Server (Server Components). This eliminates Loading states entirely for the user!

For Single Page Applications (SPAs), we swap components based on the URL without refreshing the page (using React Router v6 syntax).

Definition (Dynamic Routes):

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom';

const UserPage = () => {
  const { id } = useParams(); // Extracts '123' from /user/123
  return <h1>Profile of ID: {id}</h1>;
};

const RouterApp = () => (
  <BrowserRouter>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/user/123">My Profile</Link>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user/:id" element={<UserPage />} />
    </Routes>
  </BrowserRouter>
);

Performance and Optimization

React.memo

Wraps a component to prevent re-renders if its props haven't changed.

Definition:

const PureChild = React.memo(({ name }) => {
  console.log("Child render");
  return <div>{name}</div>;
});

useMemo and useCallback

useMemo: Caches a calculated Value.
useCallback: Caches a Function instance.

Fundamental Rule: Referential Equality
In JavaScript, objects and functions are compared by reference, not by value.

{} === {} // false
() => {} === () => {} // false

Because of this, React will often re-render child components even if the "data" looks the same, simply because the reference changed. This is exactly what useMemo and useCallback prevent.

The Danger of Over-Optimization:
Don't wrap everything in useMemo. The overhead of dependency checking and memory allocation for the cache can be more expensive than the calculation itself.

Only use them for:

Truly Expensive Calculations: (e.g., sorting 10,000 items).
Referential Equality: When passing functions/objects to React.memo children.

useTransition (React 18)

Allows you to mark state updates as "non-urgent" to keep the UI responsive. It returns [isPending, startTransition].

Definition:

const [isPending, startTransition] = useTransition();

// Marking an update as non-urgent
startTransition(() => {
  setNonUrgentState(newValue);
});

Usage:

import { useState, useTransition } from 'react';

function ListFilter({ names }) {
  const [query, setQuery] = useState('');
  const [highlight, setHighlight] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // Urgent update (input field)
    setQuery(e.target.value);

    // Non-urgent update (list filtering)
    startTransition(() => {
      setHighlight(e.target.value);
    });
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending && <p>Filtering...</p>}
      <ul>
        {names.map(name => (
          <li key={name} style={{ color: name.includes(highlight) ? 'red' : 'black' }}>
            {name}
          </li>
        ))}
      </ul>
    </div>
  );
}

useDeferredValue

Defers updating a value until the main UI thread is free. This is perfect for expensive filtering or rendering that doesn't need to be immediate.

Definition:

const deferredValue = useDeferredValue(originalValue);

Usage:

import { useState, useDeferredValue, useMemo } from 'react';

function SearchResults({ query, items }) {
  // Defer the query value itself
  const deferredQuery = useDeferredValue(query);

  // Use the deferred value for expensive filtering
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(deferredQuery));
  }, [deferredQuery]);

  return (
    <ul style={{ opacity: query !== deferredQuery ? 0.5 : 1 }}>
      {filteredItems.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

Lazy Loading and Suspense

This splits your application into smaller chunks. Instead of loading the entire app on the first visit, React only loads the parts the user actually navigates to.

Definition:

import { lazy, Suspense } from 'react';

// This component is loaded only when needed
const HeavyDashboard = lazy(() => import('./Dashboard'));

const App = () => (
  <Suspense fallback={<div>Loading Page Chunks...</div>}>
    <HeavyDashboard />
  </Suspense>
);

Professional Testing with Vitest

Testing ensures your components don't break when you add new features.

Definition (Install):

npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

Usage (Simple Test):

import { render, screen } from '@testing-library/react';
import { test, expect } from 'vitest';
import Button from './Button';

test('renders button with correct text', () => {
  render(<Button text="Click Me" />);
  const btnElement = screen.getByText(/Click Me/i);
  expect(btnElement).toBeInTheDocument();
});

Stay tuned for my next post, where we'll be exploring Next.js Fundamentals! While this covers the essentials of React, if there’s anything you feel I should have included, let me know in the comments below and I'll gladly add it!

Modern JavaScript Essentials: From Basics to Asynchronous Programming

Preyum Kumar — Mon, 23 Mar 2026 15:19:44 +0000

In an AI-driven world, a strong foundation in core technologies is essential. To keep my skills sharp, I'm starting a regular blog series covering the tech stack I use. Welcome to the first post in my Next.js journey, where we'll start by mastering the JavaScript fundamentals.

JavaScript

Index

Index
Foundations
Operators and Logic
Strings
Control Flow
Arrays
Functions and Scope
Modern ES6+ Features
Objects
Classes and OOP
Built-in Objects and Web APIs
Document Object Model (DOM)
Asynchronous JavaScript
Modules (Import and Export)

Foundations

How to Install JavaScript

We don't install javascript. If we have any internet browser, there is support for JavaScript there.
Chrome/Safari/Firefox all have javascript support.
Along with browsers we can also use platforms like codepen.io or platforms like scrimba.com

Putting Comments in the Code

To put comment in the code we use //

let val = "apple" // It is a comment

For multiline comment we can use /* */

let fruit = "apple"
/* This is a 
    Multiline
    Comment
*/
let number = 9

The Variables

JavaScript has three types of variables var, let and const.
var can be used to define a variable and the values can be redefined. It was used mainly in the past as it was the only option but now a days it is not intended to be used normally. It is because it has issues like ignoring block scope, and getting attached to the window scope in global scope. var has function scope meaning if defined inside a function it will be remembered only inside that function. var variables can also be redeclared which can cause silent bugs.

var fruitName = "Apple";
var fruitName = "Mango"; // Redeclaration is allowed (can cause bugs)
fruitName = "Banana"; // Reassignment is allowed
console.log(fruitName); // "Banana"

if (true) {
    var blockVar = "I ignore block scope!";
}
console.log(blockVar); // "I ignore block scope!" (Accessible outside the block)

Implicit global variable creation - Recipe for bugs: If you assign a value to a variable without declaring it with var, let, or const, JavaScript automatically makes it a global variable (attached to the window object). This can lead to unexpected overwrites and hard-to-trace bugs.

function createBug() {
    // Implicit global variable creation
    rogueFruit = "Mango"; 
}
createBug();
console.log(rogueFruit); // Outputs "Mango" even outside the function!

let is similar as var but with block scoping. Also in case of hoisting var is set as undefined while let and const can go to TDZ (Temporal Dead Zone) meaning they will have no value and get Reference Error if accessed. let does not allow redeclaration of the same variable and so does const.

let myName = "Preyum Kumar";
myName = "Preyum"; // Allowed: Reassignment
// let myName = "Kumar"; // Error: Cannot redeclare block-scoped variable

const is used when we want to define a variable only once and freeze its reference. Strings and numbers defined as const are locked in while arrays can be inserted with more values as only their reference is constant. const needs to be defined at the time of declaration unlike the other two variables.

const favoriteFruit = "Apple";
// favoriteFruit = "Banana"; // TypeError: Assignment to constant variable.

const fruitBasket = ["Apple"];
fruitBasket.push("Orange"); // Allowed: We are modifying the array, not the reference.
console.log(fruitBasket); // ["Apple", "Orange"]

The DataTypes

undefined: Represents a variable that has been declared but not yet assigned a value.
number: Represents both integer and floating-point numbers.
boolean: Represents a logical entity and can have two values: true or false.
string: Represents a sequence of characters used to represent text.
null: Represents the intentional absence of any object value.
object: Represents a collection of properties (key-value pairs) or complex data structures (like arrays, functions).
symbol: Represents a unique and immutable primitive value, often used as object property keys.
bigint: Represents whole numbers larger than the maximum safe integer (Number.MAX_SAFE_INTEGER, which is 9007199254740991 or 2^53 - 1).

let notAssigned;
console.log(typeof notAssigned); // "undefined"

let age = 25;
console.log(typeof age); // "number"

let isComputerScienceExpert = true;
console.log(typeof isComputerScienceExpert); // "boolean"

let name = "Preyum Kumar";
console.log(typeof name); // "string"

let emptyValue = null;
console.log(typeof emptyValue); // "object" (This is a known quirk in JavaScript!)

let person = { name: "Preyum", domain: "Computer Science" };
console.log(typeof person); // "object"

let uniqueId = Symbol("id");
console.log(typeof uniqueId); // "symbol"

// The 'n' at the end tells JavaScript to treat this as a BigInt
let largeNumber = 9007199254740992n; // 1 larger than MAX_SAFE_INTEGER
console.log(typeof largeNumber); // "bigint"

Auto-Boxing

Auto-boxing is a process where JavaScript automatically wraps primitive data types (like strings, numbers, and booleans) in their corresponding object wrappers (String, Number, Boolean) behind the scenes when you try to access properties or methods on them.
Primitives themselves don't have properties or methods. However, thanks to auto-boxing, you can use methods as if they were objects. JavaScript creates a temporary object, calls the method, and then immediately discards the temporary object.

let myString = "hello world";

// "myString" is a primitive string, not an object. 
// But when we access .length, JavaScript temporarily wraps it in a String object.
console.log(myString.length); // 11

// Same happens when we call methods like .toUpperCase()
console.log(myString.toUpperCase()); // "HELLO WORLD"

let myNum = 123.456;
// Number primitive temporarily boxed to use .toFixed()
console.log(myNum.toFixed(1)); // "123.5"

Operators and Logic

Operators, Shorthand and Semicolon

The lines are recognizable with or without semicolon. Semicolons are optional but recommended for clarity.

let fruit1 = "Apple"
let fruit2 = "Orange"; // Both lines are valid

Operators +, -, /, %, <, >, <=, >=, *, &&, || etc and their shorthand use:

let total = 10 + 5; // 15
let diff = 10 - 5; // 5
let mult = 10 * 5; // 50
let div = 10 / 5; // 2
let remainder = 10 % 3; // 1

// Comparison
console.log(10 > 5); // true
console.log(10 <= 10); // true

// Logical
console.log(true && false); // false
console.log(true || false); // true

// Shorthand assignments
let count = 5;
count += 5; // Equivalent to: count = count + 5 (Result: 10)
count *= 2; // Equivalent to: count = count * 2 (Result: 20)

Operators like == and === also != and !==:
- == checks for value equality (with type coercion).
- === checks for strict equality (both value and type must match).

console.log(5 == "5"); // true (Type coercion happens)
console.log(5 === "5"); // false (Different types: Number vs String)
console.log(5 != "5"); // false
console.log(5 !== "5"); // true

Object.is(): A static method that determines whether two values are the same value. It is similar to === but has two important differences: it considers NaN to be equal to NaN, and it considers +0 and -0 to be different.

console.log(Object.is(5, 5)); // true
console.log(Object.is("5", 5)); // false

// Differences from ===
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

Also incrementing and decrementing shorthand like ++, --:

let step = 1;
step++; // Increments step by 1 (Result: 2)
step--; // Decrements step by 1 (Result: 1)

Operator Precedence

Operator precedence determines the order in which operators are evaluated. Operators with higher precedence are evaluated first.
Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-).
You can use parentheses () to override the default precedence and force a specific order of evaluation.

let result1 = 10 + 5 * 2; // 20 (Multiplication first)
let result2 = (10 + 5) * 2; // 30 (Parentheses evaluated first)

console.log(result1);
console.log(result2);

Type Coercion and Conversion

Type Coercion is the implicit (automatic) conversion of values from one data type to another by JavaScript. Because JavaScript is a weakly-typed language, it will often try to "help" you by converting types on the fly to complete an operation. This can lead to unexpected bugs.

// --- Implicit Type Coercion ---
// 1. String Coercion: Happens when using the + operator with a string
let strCoercion = "5" + 2; // "52" (The number 2 is coerced into a string)
let boolCoercion = "Hello " + true; // "Hello true"

// 2. Number Coercion: Happens with math operators like -, *, / (but NOT +)
let numCoercion1 = "5" - 2; // 3 (The string "5" is coerced into a number)
let numCoercion2 = "10" * "2"; // 20 

// 3. Boolean Coercion: Happens in if-statements or logical operators
if ("hello") {
    console.log("This runs because 'hello' is truthy!");
}

Type Conversion (Explicit Casting)

To avoid bugs caused by implicit coercion, you should use Type Conversion (explicitly forcing a value to be a specific type).
You can do this using the built-in functions: Number(), String(), and Boolean().

// --- Explicit Type Conversion ---
// 1. Convert to Number (Prevents the "52" concatenation bug)
let userInput = "5";
let total = Number(userInput) + 2; 
console.log(total); // 7 (Correct math, not "52")

// 2. Convert to String
let myNum = 100;
let explicitString = String(myNum); // "100"
// Alternatively, using the auto-boxed .toString() method:
// let explicitString = myNum.toString();

// 3. Convert to Boolean
// Often used to quickly force a truthy/falsy value into an actual true/false boolean
let hasData = Boolean("Some User Data"); // true
let hasEmptyData = Boolean(""); // false

// A common shorthand for converting to boolean is using double negation (!!)
let quickBool = !!"Some Data"; // true

Truthy and Falsy Values

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context (like an if statement). A falsy value is a value that is considered false.
Everything in JavaScript is truthy except for a specific list of falsy values.
The Falsy values are exactly these:
- false
- 0 (zero)
- -0 (minus zero)
- 0n (BigInt zero)
- "", '', (empty strings) * null * undefined * NaN (Not-a-Number) * Truthy values are everything else, including empty arrays ([]), empty objects ({}), and strings with just a space (" ").

if ("") {
    console.log("This won't run because an empty string is falsy.");
}

if (" ") {
    console.log("This WILL run because a string with a space is truthy.");
}

if ([]) {
    console.log("This WILL run because an empty array is truthy.");
}

Ternary Operator and Short-Circuit Evaluation

Ternary Operator: A concise way to write an if-else statement. It takes three operands: a condition followed by a question mark (?), an expression to execute if truthy, and a colon (:), followed by an expression to execute if falsy. Heavily used in React for conditional rendering.

let age = 20;
// Condition ? exprIfTrue : exprIfFalse
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"

Short-Circuit Evaluation (&& and ||):
- && (Logical AND): Returns the first falsy value, or the last truthy value if all are truthy. Very commonly used in React to render components conditionally (e.g., isLoggedIn && <Dashboard />).
- || (Logical OR): Returns the first truthy value, or the last falsy value if all are falsy. Useful for assigning default values.

let isLoggedIn = true;
// The second part only executes if the first part is true
isLoggedIn && console.log("User dashboard rendered");

let userTheme = null;
let defaultTheme = "dark";
// If userTheme is falsy (like null), it falls back to "dark"
let activeTheme = userTheme || defaultTheme;
console.log(activeTheme); // "dark"

Optional Chaining and Nullish Coalescing

Optional Chaining (?.): Enables reading the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid. It returns undefined if the reference is nullish (null or undefined) instead of throwing an error. Very helpful when dealing with API data in Next.js.

let userProfile = {
    name: "Preyum Kumar",
    // address is missing here
};

// Trying to access userProfile.address.city directly would throw an error.
// Using ?. safely handles it:
let city = userProfile?.address?.city;
console.log(city); // undefined

Nullish Coalescing Operator (??): A logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
- Why use ?? instead of ||? The Logical OR (||) operator falls back to the right side if the left side is any falsy value (like 0, "", false, null, undefined). This causes bugs when 0 or "" are actually valid, intended values (e.g., a video with 0 views). The ?? operator fixes this by only falling back if the value is explicitly missing (null or undefined).

// Scenario: A video has exactly 0 views.
let videoViews = 0; 
let defaultViews = 10;

// Bug with OR operator (||): 
// JavaScript sees 0 as "falsy" and thinks the value is missing, so it applies the default.
console.log(videoViews || defaultViews); // Output: 10 (Incorrect: it overwrote our valid 0 views!)

// Fix with Nullish Coalescing (??):
// JavaScript checks if videoViews is exactly `null` or `undefined`. Since it's a valid 0, it keeps it.
console.log(videoViews ?? defaultViews); // Output: 0 (Correct!)

// If the value was actually missing:
let missingViews = null;
console.log(missingViews ?? defaultViews); // Output: 10 (Correctly applies default)

Strings

The Escape Character and Strings

Example of string with "" and inside also double quotes:

let quote = "Preyum Kumar said, \"Computer Vision is fascinating!\"";

Other ways like using single quote to cover double quotes:

let singleQuoteStr = 'Preyum Kumar said, "NLP is amazing!"';

Other way to use back ticks `` to put both single and double quotes inside:

let backtickStr = `Preyum's favorite subject is "Computer Science".`;

To put backslash itself we use two backslashes:

let path = "C:\\Users\\PreyumKumar\\Documents";

Backtick for Strings with values

Backticks () are used to create Template Literals, allowing for string interpolation (embedding variables/expressions inside strings).
Example with backtick strings with values:

let author = "Preyum Kumar";
let topic = "NLP";
let message = `${author} is an expert in ${topic}.`;
console.log(message);

Also if we want $ sign also to be printed use escape character for the same:

let price = 500;
let costMessage = `The total cost is \$${price}.`;
console.log(costMessage); // "The total cost is $500."

Control Flow

For, While, Do While and Switch

For Loop: Repeats a block of code a specific number of times.

let fruits = ["Apple", "Mango", "Banana"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

While Loop: Executes a block of code as long as a specified condition is true.

let count = 0;
while (count < 3) {
    console.log("Count is: " + count);
    count++;
}

Do...While Loop: Similar to a while loop, but it executes the block of code at least once before checking the condition.

let runs = 0;
do {
    console.log("This runs at least once!");
    runs++;
} while (runs < 0);

Switch Statement: Evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case.

let chosenFruit = "Apple";

switch (chosenFruit) {
    case "Banana":
        console.log("You chose Banana.");
        break;
    case "Apple":
        console.log("You chose Apple.");
        break;
    default:
        console.log("Unknown fruit.");
}

Break and Continue

Control flow statements like loops can be altered using break and continue.
break: Immediately exits the entire loop (or switch statement). Execution continues with the code that follows the loop.
continue: Skips the current iteration of the loop and immediately jumps to the next iteration.

// Using 'break' to stop the loop early
for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        console.log("Found 3! Breaking out of the loop.");
        break; // Loop stops completely here
    }
    console.log("Iteration: " + i);
}
/* Output:
Iteration: 1
Iteration: 2
Found 3! Breaking out of the loop.
*/

// Using 'continue' to skip a specific iteration
for (let j = 1; j <= 5; j++) {
    if (j === 3) {
        console.log("Skipping 3!");
        continue; // Skips to j = 4
    }
    console.log("Iteration: " + j);
}
/* Output:
Iteration: 1
Iteration: 2
Skipping 3!
Iteration: 4
Iteration: 5
*/

Error Handling (try...catch and throw)

try...catch: Allows you to test a block of code for errors (try) and handle the error if one occurs (catch). This prevents the entire script from crashing.
throw: Used to create custom errors. You can "throw" an exception (an object, string, or number).
finally: A block that runs regardless of whether an error was thrown or caught.

function checkAge(age) {
    if (age < 18) {
        // Throwing a custom error
        throw new Error("You must be at least 18 years old.");
    }
    return "Access granted.";
}

try {
    console.log(checkAge(15));
} catch (error) {
    // Handling the error
    console.error("Caught an error:", error.message);
} finally {
    console.log("Age check process completed.");
}

Synchronous Limitation of throw: A standard throw statement is synchronous. It only works within the current execution stack. If you try to use throw inside an asynchronous callback (like setTimeout), it cannot be caught by a try...catch block that surrounds the async call. This is why reject is used for future (asynchronous) errors.

// --- 1. The PROBLEM: throw fails in Async ---
try {
    setTimeout(() => {
        // throw new Error("Async Error!"); 
        // ^ This would crash the program because the 'try...catch' 
        // block below has already finished executing!
    }, 1000);
} catch (e) {
    console.log("This will NEVER run:", e); 
}

// --- 2. The SOLUTION: reject() in a Promise ---
const asyncTask = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("Async Error caught via Promise!"); 
        }, 1000);
    });
};

asyncTask()
    .then(msg => console.log(msg))
    .catch(err => console.log("SUCCESSFULLY caught:", err));

Arrays

Array Methods

push() and pop(): push() adds one or more elements to the end of an array and returns the new length. pop() removes the last element from an array and returns that element.

let fruits = ["Apple", "Mango"];
fruits.push("Banana"); // ["Apple", "Mango", "Banana"]
let last = fruits.pop(); // Removes "Banana". Array is back to ["Apple", "Mango"]

splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. It mutates the original array.
- Syntax: array.splice(startIndex, deleteCount, item1, item2, ...)

let colors = ["Red", "Green", "Blue", "Yellow"];
// Start at index 1, delete 2 elements ("Green", "Blue"), and insert "Purple"
colors.splice(1, 2, "Purple"); 
console.log(colors); // ["Red", "Purple", "Yellow"]

forEach(): Executes a provided function once for each array element. It is used purely for executing side-effects (like logging or modifying external variables) and always returns undefined, unlike map() which returns a new array.

let techStack = ["JavaScript", "React", "Next.js"];
techStack.forEach((tech, index) => {
    console.log(index + ": " + tech);
});
// Output:
// 0: JavaScript
// 1: React
// 2: Next.js

map(): Creates a new array populated with the results of calling a provided function on every element in the calling array. This is the primary way to render lists of elements in React.

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

filter(): Creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. Constantly used for manipulating state arrays, like deleting an item from a list.

let ages = [15, 21, 18, 12, 30];
let adults = ages.filter(age => age >= 18);
console.log(adults); // [21, 18, 30]

reduce(): Executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

let prices = [10, 20, 30];
let totalCost = prices.reduce((acc, current) => acc + current, 0);
console.log(totalCost); // 60

Typed Arrays

Typed Arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers. While standard arrays can grow dynamically and hold any data type, Typed Arrays have a fixed length and only store a specific numeric type (like integers or floats).
They are heavily used in performance-critical applications, WebGL, and when handling binary data from APIs or files.
Common types: Int8Array, Uint8Array, Int32Array, Float64Array, etc.

// Create a buffer of 16 bytes
let buffer = new ArrayBuffer(16);

// Create a view that treats the buffer as an array of 32-bit signed integers
let int32View = new Int32Array(buffer);

int32View[0] = 42;
int32View[1] = 100;

console.log(int32View.length); // 4 (Since 16 bytes / 4 bytes per Int32 = 4)
console.log(int32View[0]); // 42

// You can also initialize directly with an array
let uint8 = new Uint8Array([10, 20, 30]);
console.log(uint8[1]); // 20

Functions and Scope

Regular, Anonymous and Arrow Functions

Regular Functions: Declared using the function keyword. They have their own this context.

function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Preyum Kumar"));

Anonymous Functions: Functions without a name, often assigned to variables or passed as callbacks (discussed in detail later).

let sayGoodbye = function(name) {
    return "Goodbye, " + name;
};

Arrow Functions: A concise syntax for writing functions. They do not have their own this binding (they inherit it from the parent scope).
- Explicit Return: When using curly braces {}, you must explicitly use the return keyword to return a value.
- Implicit Return: If you omit the curly braces, the arrow function implicitly returns the single evaluated expression. You can wrap the expression in parentheses () for multi-line implicit returns, which is very common in React JSX.

// Explicit Return (uses {})
const greetArrow = (name) => {
    return "Hello, " + name;
};

// Implicit Return (no {}, evaluates the expression on the same line)
const greetShort = name => "Hello, " + name;

// Implicit Return with Parentheses (useful for returning objects)
const getUser = (name) => ({
    name: name,
    role: "Admin"
});

Closures

A Closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables—a scope chain. Closures are a fundamental concept that explains how React Hooks (like useState and useEffect) "remember" values between renders.

function makeCounter() {
    let count = 0; // count is a local variable created by makeCounter

    return function() { // The inner function is a closure
        count++; // It has access to count from the outer function
        return count;
    };
}

let myCounter = makeCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2
console.log(myCounter()); // 3

The this Keyword

The this keyword refers to the context in which a function is executed. Its value depends on how the function is called, not where it's defined (except for arrow functions).

1. Global Context

In the global scope (outside any function), this refers to the global object (window in browsers).

console.log(this === window); // true

2. Inside a Regular Function

Non-strict mode: this defaults to the global object (window).
Strict mode ('use strict'): this is undefined. This is a safety feature to prevent accidental modification of the global object.

function showThis() {
    "use strict";
    console.log(this); 
}
showThis(); // undefined

3. Inside a Method (Object Context)

When a function is called as a method of an object, this refers to the object itself.

const user = {
    name: "Preyum",
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
user.greet(); // "Hello, my name is Preyum"

4. Arrow Functions (Lexical this)

Arrow functions do not have their own this. Instead, they inherit this from the surrounding (lexical) scope at the time they are created. This makes them ideal for callbacks (like in setTimeout or array methods) where you want to keep the original context.

const group = {
    title: "Our Team",
    members: ["Preyum", "John"],
    showList() {
        // Regular function inside forEach would have 'this' as undefined (in strict)
        this.members.forEach((member) => {
            // Arrow function inherits 'this' from showList()
            console.log(`${this.title}: ${member}`);
        });
    }
};
group.showList(); 
// "Our Team: Preyum"
// "Our Team: John"

5. Changing this Context (call, apply, bind)

JavaScript provides three methods to explicitly set the value of this.
.call(thisArg, arg1, arg2, ...): Invokes the function immediately with the specified this and arguments passed individually.
.apply(thisArg, [argsArray]): Invokes the function immediately with the specified this and arguments passed as an array.
.bind(thisArg, arg1, ...): Returns a new function with this permanently bound to the specified object. It does not invoke the function immediately.

const person1 = { name: "Preyum" };
const person2 = { name: "Alice" };

function introduce(skill, hobby) {
    console.log(`I'm ${this.name}. I'm good at ${skill} and I like ${hobby}.`);
}

// .call() - Arguments passed individually
introduce.call(person1, "NLP", "Chess");

// .apply() - Arguments passed as an array
introduce.apply(person2, ["Computer Vision", "Gaming"]);

// .bind() - Creates a new function
const boundIntro = introduce.bind(person1, "Next.js", "Blogging");
boundIntro(); // Can be called later

Function Arguments

Default Arguments use case: We can assign default values to parameters to ensure the function works even if some arguments are missing.

function makeJuice(fruit1, fruit2 = "Water") {
    return `Making juice with ${fruit1} and ${fruit2}`;
}
console.log(makeJuice("Apple")); // "Making juice with Apple and Water"

Order in which default arguments must be: Default arguments must be placed at the end of the parameter list. If they are placed first, JavaScript won't know which arguments to skip when fewer arguments are passed.

// WRONG: function wrongOrder(fruit1 = "Apple", fruit2) { ... }
// CORRECT:
function correctOrder(fruit1, fruit2 = "Banana") {
    console.log(fruit1, fruit2);
}

Modern ES6+ Features

Spread Operator

The spread operator (...) allows an iterable (like an array or string) to be expanded in places where zero or more arguments or elements are expected, or an object expression to be expanded.
How spread operator is used to actually copy array:

let originalFruits = ["Apple", "Mango"];
// let badCopy = originalFruits; // This just copies the reference!

let goodCopy = [...originalFruits]; // Creates a true, independent copy
goodCopy.push("Banana");

console.log(originalFruits); // ["Apple", "Mango"]
console.log(goodCopy); // ["Apple", "Mango", "Banana"]

Rest Parameters

The Rest Parameter syntax (...args) allows a function to accept an indefinite number of arguments as an array. While the spread operator expands iterables into individual elements, the rest parameter collects multiple elements and condenses them into a single array.

function calculateSum(...numbers) {
    // numbers is an array containing all passed arguments
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(calculateSum(1, 2, 3)); // 6
console.log(calculateSum(10, 20, 30, 40, 50)); // 150

Destructuring object values for assignment

Destructuring makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
Destructing single layer example:

let user = {
    name: "Preyum Kumar",
    domain: "Computer Science"
};

let { name, domain } = user;
console.log(name); // "Preyum Kumar"

Destructuring nested object for assignment:

let expertUser = {
    profile: {
        firstName: "Preyum",
        expertise: "Computer Vision"
    }
};

let { profile: { firstName, expertise } } = expertUser;
console.log(expertise); // "Computer Vision"

Objects

Objects: Dot and Bracket Notation

Objects store data in key-value pairs. You can access these values using either dot notation or bracket notation.
Dot Notation (object.property): The most common and readable way to access properties. The property name must be a valid JavaScript identifier (no spaces, doesn't start with a number).
Bracket Notation (object["property"]): Required when the property name contains spaces, special characters, or when you are accessing a property dynamically using a variable.

let car = {
    make: "Toyota",
    "model year": 2022,
    color: "blue"
};

// Dot notation
console.log(car.make); // "Toyota"

// Bracket notation required for strings with spaces
console.log(car["model year"]); // 2022

// Bracket notation for dynamic property access
let propName = "color";
console.log(car[propName]); // "blue"

Object Shorthand Syntax

ES6 introduced concise ways to define properties and methods inside objects, reducing boilerplate code.
Shorthand Property Names: If the key and the variable name you want to assign to it are the exact same, you can just write the variable name once instead of key: value.
Shorthand Method Names: You can omit the function keyword and the colon : when defining methods inside an object.

let name = "Preyum";
let role = "Admin";

// Traditional ES5 way
let oldUser = {
    name: name,
    role: role,
    greet: function() {
        return "Hello " + this.name;
    }
};

// ES6 Shorthand Syntax (Cleaner and more common in React/Next.js)
let modernUser = {
    name, // Shorthand property
    role, // Shorthand property
    greet() { // Shorthand method
        return "Hello " + this.name;
    }
};

console.log(modernUser.greet()); // "Hello Preyum"

Object Methods

JavaScript provides several built-in methods to work with objects, returning arrays of their keys, values, or entries (key-value pairs).
Object.keys(): Returns an array of a given object's own enumerable string-keyed property names.
Object.values(): Returns an array of a given object's own enumerable string-keyed property values.
Object.entries(): Returns an array of a given object's own enumerable string-keyed property [key, value] pairs.

let user = {
    name: "Preyum Kumar",
    domain: "Computer Science",
    expertise: "Computer Vision"
};

console.log(Object.keys(user)); 
// ["name", "domain", "expertise"]

console.log(Object.values(user)); 
// ["Preyum Kumar", "Computer Science", "Computer Vision"]

console.log(Object.entries(user)); 
// [["name", "Preyum Kumar"], ["domain", "Computer Science"], ["expertise", "Computer Vision"]]

Shallow and Deep Copy

In JavaScript, primitive types (like numbers and strings) are passed by value, but objects and arrays are passed by reference. This means if you assign an object to a new variable and modify it, you are modifying the original object. To prevent this, we need to create copies.

Shallow Copy

A shallow copy creates a new object and copies over the top-level properties. However, if the object contains nested objects or arrays, the nested structures are still passed by reference.
Ways to create a shallow copy:
- Spread Operator (...) for both objects and arrays.
- Object.assign() for objects.
- .slice() specifically for arrays. It returns a shallow copy of a portion of an array into a new array object. If used without arguments, it copies the entire array.

const originalArray = ["Apple", "Mango", "Banana"];

// Direct assignment just copies the reference (BAD!)
// const badCopy = originalArray; 

// Using .slice() to create a true shallow copy (GOOD!)
const copiedArray = originalArray.slice();

copiedArray.push("Orange"); // Modifies only the copy

console.log(originalArray); // ["Apple", "Mango", "Banana"]
console.log(copiedArray); // ["Apple", "Mango", "Banana", "Orange"]

let originalObj = { 
    name: "Preyum", 
    details: { age: 25 } 
};

// Shallow copy using Spread Operator
let shallowCopy = { ...originalObj };

shallowCopy.name = "Preyum Kumar"; // Only changes the copy (top-level)
shallowCopy.details.age = 30;      // Changes BOTH original and copy! (nested)

console.log(originalObj.name); // "Preyum"
console.log(originalObj.details.age); // 30 (Oops, original was mutated)

Deep Copy

A deep copy creates a completely independent clone of the original object, including all nested objects and arrays. Modifying the deep copy will never affect the original.
Ways to create a deep copy:
- JSON.parse(JSON.stringify(object)): The traditional, hacky way. It works for most simple objects but fails if the object contains functions, undefined, Date objects, or circular references.
- structuredClone(object): The modern, native JavaScript way (introduced recently in browsers/Node.js). It perfectly clones complex objects, including Dates, Sets, Maps, and more.

let user = { 
    name: "Preyum", 
    details: { age: 25 },
    joined: new Date()
};

// Deep copy using structuredClone (Modern native method)
let deepCopy = structuredClone(user);

deepCopy.details.age = 30; // Modifies ONLY the copy

console.log(user.details.age); // 25 (Original remains completely untouched)

Getters and Setters

Getters (get) bind an object property to a function that will be called when that property is looked up.
Setters (set) bind an object property to a function to be called when there is an attempt to set that property.

let person = {
    firstName: "Preyum",
    lastName: "Kumar",

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },

    set updateFirstName(newName) {
        if(newName.length > 0) {
            this.firstName = newName;
        } else {
            console.log("Name cannot be empty");
        }
    }
};

console.log(person.fullName); // "Preyum Kumar"
person.updateFirstName = "PreyumK";
console.log(person.fullName); // "PreyumK Kumar"

Classes and OOP

Classes and Private Fields (#)

Classes are a blueprint for creating objects. They encapsulate data with code that works on that data.
Private Fields (#): By default, class properties and methods are public. To make them private, prefix their name with a hash #. Private fields cannot be accessed or called from outside the class or from its subclasses.
Benefits of Private Fields: Encapsulation, preventing unintended access to internal state, and reducing potential for bugs.

class User {
    // 1. Private fields declaration (must be declared at the top)
    #id;
    #password;

    constructor(name, id, password) {
        this.name = name;      // Public property
        this.#id = id;        // Private property
        this.#password = password;
    }

    // 2. Public method
    displayInfo() {
        console.log(`User: ${this.name}, ID: ${this.#getId()}`);
    }

    // 3. Private method
    #getId() {
        return this.#id;
    }

    // 4. Getter for private field (can add validation)
    get userId() {
        return this.#id;
    }
}

const myUser = new User("Preyum", 12345, "securePass123");

console.log(myUser.name); // "Preyum"
// console.log(myUser.#id); // Syntax Error: Private field '#id' must be declared in an enclosing class

myUser.displayInfo(); // "User: Preyum, ID: 12345"

// Using getter to access private field
console.log(myUser.userId); // 12345

Inheritance (extends and super())

Inheritance allows a class to inherit properties and methods from another class. This promotes code reuse and hierarchical organization.
extends: Keyword used to create a child class from a parent class.
super(): This keyword is used to call the constructor of the parent class. It must be called before using this in the child class constructor.
super.methodName(): It can also be used to call methods from the parent class, which is useful when overriding a method but still wanting to include the parent's logic.

// Parent Class
class Animal {
    constructor(name) {
        this.name = name;
    }

    eat() {
        console.log(`${this.name} is eating.`);
    }
}

// Child Class using extends
class Dog extends Animal {
    constructor(name, breed) {
        // Call the parent constructor using super()
        super(name);
        this.breed = breed;
    }

    // Overriding a parent method and calling it using super.methodName()
    eat() {
        super.eat(); // Call the parent's eat method
        console.log(`${this.name} the ${this.breed} is still hungry!`);
    }

    bark() {
        console.log("Woof! Woof!");
    }

    displayInfo() {
        console.log(`I am a ${this.breed} named ${this.name}.`);
    }
}

const myDog = new Dog("Buddy", "Golden Retriever");

myDog.eat();        
/* Output:
Buddy is eating.
Buddy the Golden Retriever is still hungry!
*/

myDog.bark();       // "Woof! Woof!"
myDog.displayInfo(); // "I am a Golden Retriever named Buddy."

Built-in Objects and Web APIs

JavaScript provides several globally available built-in objects and functions to perform common tasks without needing to write custom logic.
Global Functions: Functions like parseInt(), parseFloat(), and isNaN() can be called directly from anywhere.
Static Objects: Objects like Math, JSON, and Array (when used for its static methods) are static. This means you do not use the new keyword with them; you call their properties and methods directly (e.g., Math.max(), JSON.stringify()).

Array.isArray()

In JavaScript, arrays are technically objects. If you use the typeof operator on an array, it returns "object", which isn't very helpful when you need to know if a variable is specifically a list.
To solve this, the Array built-in object provides a static method called Array.isArray() which reliably returns true if a value is an array, and false otherwise.

let myData = [1, 2, 3];
let myObj = { name: "Preyum" };

console.log(typeof myData); // "object" (Not very helpful!)
console.log(Array.isArray(myData)); // true (Reliable check)
console.log(Array.isArray(myObj)); // false

Instantiable Objects: Objects like Date are constructors. You must use the new keyword to create an instance before you can use most of their methods.

// Global Functions: Parsing strings and checking values
console.log(parseInt("10.5")); // 10
console.log(parseFloat("10.5")); // 10.5
console.log(isNaN("Hello")); // true

// Static Object: Math (No 'new' keyword)
console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.max(10, 20, 5)); // 20

// Instantiable Object: Date (Requires 'new' keyword)
let now = new Date();
console.log(now.getFullYear()); // Gets current year

// Instantiable Object: Error
// Used to create custom error objects, usually to be 'thrown'
let myError = new Error("Something went wrong!");
console.log(myError.message); // "Something went wrong!"

// Instantiable Object: Function
// Every JavaScript function is actually a Function object.
// While you can create them dynamically like this, standard declaration is preferred.
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)); // 8

// Primitive Wrapper Objects: String, Number, Boolean
// These are the objects that JavaScript uses behind the scenes for Auto-Boxing.
// WARNING: Do NOT use the 'new' keyword with them in modern code, as it creates an object instead of a primitive, leading to strict equality (===) bugs.
// They should only be used without 'new' for Type Conversion (e.g., Number("5")).
let badString = new String("Hello");
console.log(typeof badString); // "object" (This is bad!)
let goodString = String("Hello");
console.log(typeof goodString); // "string" (This is good!)

JSON Object (Static): The JSON object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. This is crucial when sending or receiving data from APIs.
- JSON.stringify(): Converts a JavaScript object or value to a JSON string.
- JSON.parse(): Parses a JSON string, constructing the JavaScript value or object described by the string.

let user = { name: "Preyum", domain: "CS" };

// Converting an object to a string (e.g., to send to an API or save in local storage)
let jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Preyum","domain":"CS"}'
console.log(typeof jsonString); // "string"

// Parsing a string back into a JavaScript object
let parsedUser = JSON.parse(jsonString);
console.log(parsedUser.name); // "Preyum"
console.log(typeof parsedUser); // "object"

Web Storage API (localStorage): While not technically part of the core JavaScript language (it's part of the browser's Web API), localStorage is an incredibly common built-in object used to store key-value pairs in the web browser. The data survives even after the browser window is closed.
- Note: localStorage only stores strings. If you want to store an object, you MUST use JSON.stringify() before saving, and JSON.parse() when retrieving.

// Saving data (key, value)
localStorage.setItem("theme", "dark");

// Retrieving data
let currentTheme = localStorage.getItem("theme");
console.log(currentTheme); // "dark"

// Saving an object requires JSON.stringify
let sessionUser = { name: "Preyum", isLoggedIn: true };
localStorage.setItem("userSession", JSON.stringify(sessionUser));

// Retrieving an object requires JSON.parse
let retrievedSession = JSON.parse(localStorage.getItem("userSession"));
console.log(retrievedSession.isLoggedIn); // true

Console Object: The console object provides access to the browser's debugging console (or the terminal in Node.js). It is incredibly useful for logging information, warnings, and errors during development.
- console.log(): Prints general informational messages.
- console.error(): Prints an error message (usually styled in red with a stack trace in browsers).
- console.warn(): Prints a warning message (usually styled in yellow).
- console.table(): Displays tabular data (like an array of objects) as a neat table.
- console.time() and console.timeEnd(): Starts and stops a timer, useful for measuring how long an operation takes.

console.log("This is a standard log message.");
console.error("This is an error message!");
console.warn("This is a warning.");

// Displaying data nicely
let users = [
    { name: "Preyum", role: "Admin" },
    { name: "John", role: "User" }
];
console.table(users);

// Measuring performance
console.time("Loop Time");
for(let i = 0; i < 1000000; i++) {} // Some heavy operation
console.timeEnd("Loop Time"); // e.g., "Loop Time: 2.5ms"

Document Object Model (DOM)

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.
When a web page is loaded, the browser creates a Document Object Model of the page, structured as a tree of objects.
The document itself is a built-in object provided by the browser that models the entire webpage. Because it represents the HTML document, it acts as the entry point to the DOM tree.
JavaScript can manipulate the DOM to create dynamic and interactive web experiences.
Note: In modern frameworks like React and Next.js, you rarely manipulate the DOM directly. Instead, you manipulate the "Virtual DOM" through state, and React handles the actual DOM updates. However, understanding the real DOM is essential.

The window Object (The Global Object)

While the DOM represents the document (the webpage content), the BOM (Browser Object Model) represents the browser window itself.
The core of the BOM is the window object. It is the global object in a browser environment.
Because it is the global object, every globally scoped variable, function, and built-in object is implicitly attached to it.
This means that objects like document, console, and functions like alert(), setTimeout(), or setInterval() are actually properties and methods of the window object. Because it is the global scope, you can usually omit typing window..

// The following two lines do the exact same thing:
window.console.log("Hello from the window!");
console.log("Hello from the window!");

// The 'document' is actually a property of the window:
// window.document.getElementById(...)

// Alert dialogs are window methods:
// window.alert("Warning!");
// alert("Warning!");

// Getting the inner width and height of the browser window itself
console.log("Window width:", window.innerWidth);
console.log("Window height:", window.innerHeight);

The document Object Properties

You can directly access high-level parts of the webpage using built-in properties on the document object:
- document.title: Gets or sets the title of the document (the text shown in the browser tab).
- document.body: Returns the <body> element of the document, allowing you to manipulate the main content area directly.

// Reading the current page title
console.log(document.title); 

// Changing the page title dynamically
document.title = "New Page Title!";

// Changing the background color of the entire webpage body
document.body.style.backgroundColor = "lightblue";

Common DOM Methods

Selecting Elements:
- document.getElementById(id): Selects a single element by its ID.
- document.querySelector(selector): Returns the first element that matches a CSS selector.
- document.querySelectorAll(selector): Returns a NodeList of all elements that match a CSS selector.
Modifying Elements:
- element.textContent: Gets or sets the text content of a node and its descendants.
- element.innerHTML: Gets or sets the HTML markup contained within the element.
- element.style.property: Modifies the inline CSS style of an element.
- element.classList.add(className) / .remove() / .toggle(): Modifies the classes on an element.
Event Listeners and Handlers:
- Event Handlers (e.g., onclick, onmouseover): Properties on DOM elements that allow you to assign a single function to an event. It's an older method but still widely used for simple interactions.
- addEventListener(event, function): The modern, preferred way to attach events. It allows attaching multiple functions to the same event on the same element without overwriting them.

// --- Selecting an element ---
// Let's assume there is a <button id="myBtn" class="btn primary">Click Me!</button> in the HTML
let btn = document.getElementById("myBtn");
let sameBtn = document.querySelector(".btn.primary");

// --- Modifying the element ---
// Change the text inside the button
btn.textContent = "Processing...";

// Add a new CSS class
btn.classList.add("loading");

// Change a specific style directly
btn.style.backgroundColor = "blue";

// --- Adding interactivity (Events) ---

// Method 1: Using the event handler property (onclick)
// Note: If you assign another function to btn.onclick later, it will overwrite this one.
btn.onclick = function() {
    console.log("Button clicked using onclick!");
};

// Method 2: Using addEventListener (Preferred)
btn.addEventListener("click", function(event) {
    console.log("Button clicked using addEventListener!");
    // 'event' object contains details about the action (e.g., mouse coordinates)
    console.log("Mouse X:", event.clientX, "Mouse Y:", event.clientY);
});

Asynchronous JavaScript

JavaScript is single-threaded and synchronous by default. Asynchronous JavaScript allows the code to continue running other tasks while waiting for long-running operations (like fetching data, reading files) to complete, preventing the browser or server from freezing.

console.log("1. Start");

// This mimics a long-running task
setTimeout(() => {
    console.log("2. Async Operation Finished");
}, 1000);

console.log("3. End");
// Output order will be: 1, 3, 2

setTimeout() and setInterval()

Both are built-in methods of the window object used to schedule the execution of functions.

setTimeout()

setTimeout() executes a block of code once after a specified delay (in milliseconds).

console.log("Waiting for my Apple...");
let timeoutId = setTimeout(() => {
    console.log("Apple is served!");
}, 2000); // Delays execution by 2000 milliseconds (2 seconds)

// You can cancel the timeout before it executes using clearTimeout()
// clearTimeout(timeoutId);

setInterval()

setInterval() executes a block of code repeatedly, with a fixed time delay between each call.
It will continue running indefinitely until you explicitly stop it using clearInterval().

let count = 1;
console.log("Starting timer...");

// Runs every 1 second (1000 ms)
let intervalId = setInterval(() => {
    console.log("Tick: " + count);

    // Stop the interval after 3 ticks
    if (count === 3) {
        clearInterval(intervalId);
        console.log("Timer stopped.");
    }
    count++;
}, 1000);

Callbacks

A callback is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action.
Example of order and production (without order, production cannot start):

let order = (call_production) => {
    console.log("Order placed, please call production.");
    // We execute the callback function here
    call_production();
};

let production = () => {
    console.log("Order received, starting production of Apple Juice.");
};

order(production);

Issues with callbacks, the callback hell: Callback hell (or Pyramid of Doom) happens when multiple asynchronous operations are chained together using nested callbacks, making the code hard to read and maintain. Promises (discussed next) solve this.

// Callback Hell Example
step1(function() {
    step2(function() {
        step3(function() {
            step4(function() {
                console.log("All steps finished!");
            });
        });
    });
});

Promises

A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It solves the callback hell problem by allowing chaining.
reject() vs throw:
- throw is for immediate, synchronous errors. It pauses execution and looks for the nearest catch block in the current stack.
- reject() is for future, asynchronous errors. It signals that an async operation failed. Since the original try...catch might have already finished executing while waiting for the async task, reject() allows the error to be handled later via .catch() or an async/await try...catch.

function makeOrder() {
    return new Promise((resolve, reject) => {
        let isStockAvailable = false;

        setTimeout(() => {
            if (isStockAvailable) {
                resolve("Order placed successfully");
            } else {
                // Signals failure for an ASYNC operation
                reject("Error: Out of stock"); 
            }
        }, 1000);
    });
}

makeOrder()
    .then(msg => console.log(msg))
    .catch(err => console.error("Caught async error:", err));

Change example to use promises:

function makeOrder() {
    return new Promise((resolve, reject) => {
        let isStockAvailable = true;

        if (isStockAvailable) {
            resolve("Order placed successfully"); // This goes to the first .then()
        } else {
            reject("Error: Out of stock"); // This skips directly to .catch()
        }
    });
}

makeOrder()
    // No semicolons between then, catch, finally so the code can cascade
    .then((message) => {
        // Step 1: Receives the resolved value from makeOrder
        console.log(message); // Output: "Order placed successfully"
        return "Starting production"; // This returned value is passed to the NEXT .then()
    })
    .then((nextStep) => {
        // Step 2: Receives the returned value from the previous .then()
        console.log(nextStep); // Output: "Starting production"
    })
    .catch((error) => {
        // Step 3: Only runs if reject() was called, or if an error was thrown above
        console.log(error); 
    })
    .finally(() => {
        // Step 4: Always runs at the very end, whether it was resolved or rejected
        console.log("Operation closed (runs regardless of success or failure).");
    });

Async and Await

async and await are syntactic sugar on top of Promises, making asynchronous code look and behave more like synchronous code, which is much easier to read.
An async function always returns a Promise. The await keyword pauses the execution of the async function until the Promise settles (resolves or rejects).

function fetchFruit() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Mango");
        }, 1500);
    });
}

async function prepareSmoothie() {
    console.log("2. Starting prep inside async function...");

    try {
        // Execution inside this function pauses here until fetchFruit is done.
        // However, the rest of the synchronous code outside this function keeps running!
        let fruit = await fetchFruit(); 
        console.log(`4. Smoothie made with ${fruit}!`);
    } catch (error) {
        console.log("Failed to get fruit.");
    }
}

console.log("1. Ordering Smoothie...");

// Calling the async function. It starts running synchronously until it hits 'await'.
prepareSmoothie();

console.log("3. Doing other tasks while waiting for the smoothie...");

/* 
Output Order:
1. Ordering Smoothie...
2. Starting prep inside async function...
3. Doing other tasks while waiting for the smoothie...
(After 1.5 seconds delay)
4. Smoothie made with Mango!
*/

Modules (Import and Export)

Modules allow you to break your code into separate files. This makes it easier to maintain the code base. React and Next.js are entirely built around importing and exporting components and functions.
Important Note on Usage: To actually use ES6 modules natively in a browser, the HTML script tag importing the main JavaScript file MUST include the type="module"\ attribute (e.g., <script type="module" src="app.js"></script>\). In modern frameworks like React/Next.js, the build tools handle this for you automatically.

Named Exports

You can create named exports two ways: individually or all at once at the bottom. You can have multiple named exports per file.
When importing, you must use the exact same name inside curly braces {}\. You can also rename (alias) imports using the as\ keyword to avoid naming conflicts.

// mathUtils.js (Exporting)

// 1. Exporting individually on the same line
export const add = (a, b) => a + b;

// 2. Declaring first, exporting at the bottom
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;

export { subtract, multiply }; 

// app.js (Importing)
// Using 'as' to alias 'add' to 'addNumbers'
import { add as addNumbers, subtract, multiply } from './mathUtils.js';

console.log(addNumbers(5, 3)); // 8
console.log(multiply(2, 4)); // 8

Default Exports

You can only have one default export per file. It is often used for exporting the main component in a file.
When importing, you can name it anything you want and you do not use curly braces.

// Greeting.js (Exporting)
const Greeting = () => "Hello, Preyum!";
export default Greeting;

// app.js (Importing)
// We can name it whatever we want, let's call it GreetComp
import GreetComp from './Greeting.js';
console.log(GreetComp()); // "Hello, Preyum!"

Stay tuned for my next post, where we'll be exploring React! While this covers the essentials, If there’s anything you feel I should have included, let me know in the comments below and I'll gladly add it!

Forem: Preyum Kumar

Modern React Essentials: From Component Architecture to Advanced Hooks

Index

Modern React Development with Vite

Prerequisites: Node.js

Why Vite?

Strict Mode: Why useEffect runs twice

Environment Variables (.env)

Using npm (Node Package Manager)

Dev vs. Prod: Different Commands

Proxying API Requests (vite.config.js)

Core React Concepts

React Fundamentals

The Virtual DOM and Reconciliation

The Immutability Principle: Why Spread?

Babel and JSX

The .render() Method

React with TypeScript

TSX vs. JSX: The Power of Types

Interface vs. Type

Required vs. Optional Properties

Typing Events in TypeScript

Type Inference: Implicit vs. Explicit

1. Implicit Type Inference

2. Explicit Type Definition

Building UIs with Components

Components

Event Handling: Passing Arguments

Props (Properties)

The Magic "children" Prop

Component Composition: Avoiding Prop Drilling

Portals: Rendering Outside the Tree

1. Setup (in your index.html)

2. Definition (in JS)

Lifting State Up: Sibling Communication

Rendering Lists: The "No Index" Rule

Conditional Rendering

Fragments and Keyed Fragments

Error Boundaries: The App Safety Net

Styling in React: Inline vs CSS Modules vs Tailwind

State Management and Hooks

The Rules of Hooks

State vs. Props vs. Refs: Which one to use?

useState: Controlled vs Uncontrolled

useState: Handling Multiple Inputs

useState: Asynchronous Updates and Batching

useEffect: The Dependency Array

1. No Dependency Array

2. Empty Dependency Array ([])

3. Dependency Array with Values ([count])

useEffect: The Lifecycle Mental Model

useEffect Cleanup: AbortController

useLayoutEffect vs useEffect

useRef and forwardRef

useImperativeHandle

Advanced Hooks

useReducer: Managing Complex State with Payloads

useContext: The Provider Pattern

Global State Alternatives (Zustand & Redux)

Custom Hooks: Reusing Logic

useId (Accessibility)

Working with APIs: Loading and Error States

Navigation (React Router)

Performance and Optimization

React.memo

useMemo and useCallback

useTransition (React 18)

useDeferredValue

Lazy Loading and Suspense

Professional Testing with Vitest

Modern JavaScript Essentials: From Basics to Asynchronous Programming

JavaScript

Index

Foundations

How to Install JavaScript

Putting Comments in the Code

The Variables

The DataTypes

Auto-Boxing

Operators and Logic