Optional Chaining (?.) & Nullish Coalescing (??)

Optional Chaining (?.) aur Nullish Coalescing (??) JavaScript mein ES2020 se aaye hain aur objects ya variables ke saath safely kaam karne ke liye powerful tools hain. Yeh errors se bachate hain aur code ko concise banate hain. React mein inka use props, state, aur API data handle karne mein hota hai. Is section mein hum inhe simple aur clear examples ke saath samjhenge.

1. Optional Chaining (?.)

Optional Chaining (?.) object properties ya methods ko access karne ka safe tareeka hai jab aapko pata nahi hota ki property exist karti hai ya nahi. Agar property undefined ya null hai, toh error ke bajay undefined return hota hai.

Syntax:

object?.property
object?.method()
array?.[index]

Explanation:

• ?. check karta hai ki object null ya undefined toh nahi. Agar hai, toh undefined return karta hai.
• Yeh dot operator (.) ka safe version hai.

Example 1: Basic Optional Chaining

const user = {
  name: "Rahul",
  address: { city: "Delhi" }
};

console.log(user.address?.city); // Output: Delhi
console.log(user.phone?.number); // Output: undefined (no error)

Explanation:

• user.address?.city check karta hai ki address exist karta hai, phir city access karta hai.
• user.phone?.number mein phone nahi hai, toh undefined return hota hai bina error ke.
• Bina optional chaining ke, user.phone.number error deta (Cannot read property 'number' of undefined).

Example 2: Optional Chaining with Methods

const user = {
  name: "Ankit",
  getInfo: () => "User Info"
};

console.log(user.getInfo?.()); // Output: User Info
console.log(user.getDetails?.()); // Output: undefined (no error)

Explanation:

• getInfo?.() check karta hai ki getInfo function exist karta hai, phir call karta hai.
• getDetails?.() mein function nahi hai, toh undefined return hota hai.

2. Nullish Coalescing (??)

Nullish Coalescing (??) default values set karne ka tareeka hai jab variable null ya undefined ho. Yeh logical OR (||) se alag hai kyunki || falsy values (jaise 0, “”, false) ko bhi default se replace karta hai, jabki ?? sirf null ya undefined ke liye kaam karta hai.

Syntax:

value ?? defaultValue;

Example 3: Nullish Coalescing vs Logical OR

const name = null;
const age = 0;

console.log(name ?? "Guest"); // Output: Guest
console.log(age ?? 18); // Output: 0

console.log(name || "Guest"); // Output: Guest
console.log(age || 18); // Output: 18

Explanation:

• ?? sirf null ya undefined ke liye default value deta hai, isliye age ?? 18 mein 0 return hota hai.
• || falsy values (0, “”, false) ke liye bhi default value deta hai, isliye age || 18 mein 18 return hota hai.

3. React mein Optional Chaining aur Nullish Coalescing ka Use

React mein yeh operators props, state, aur API data ke saath safely kaam karne ke liye use hote hain, khaas karke jab data incomplete ya async ho.

Example 4: Optional Chaining with Props

import React from 'react';

function UserCard({ user }) {
  return (
    <div>
      <h1>Name: {user?.name ?? "Guest"}</h1>
      <p>City: {user?.address?.city ?? "Unknown"}</p>
    </div>
  );
}

export default function App() {
  const user = { name: "Rahul" }; // address missing
  return <UserCard user={user} />;
}

Explanation:

• user?.name check karta hai ki user exist karta hai, aur ?? "Guest" default value deta hai agar name null/undefined ho.
• user?.address?.city nested properties ko safely access karta hai, aur ?? "Unknown" default deta hai.
• Yeh code Vite project mein src/App.jsx mein daal ke try kar sakte ho (npm run dev).

Example 5: Nullish Coalescing with State

import React, { useState } from 'react';

function Profile() {
  const [user, setUser] = useState({});

  const updateUser = () => {
    setUser({ name: "Ankit", age: 0 });
  };

  return (
    <div>
      <h1>Name: {user.name ?? "Guest"}</h1>
      <p>Age: {user.age ?? 18}</p>
      <button onClick={updateUser}>Update User</button>
    </div>
  );
}

export default Profile;

Explanation:

• user.name ?? "Guest" default “Guest” deta hai jab name undefined hai.
• user.age ?? 18 0 ko preserve karta hai kyunki ?? sirf null/undefined ke liye kaam karta hai.
• updateUser state ko update karta hai, aur UI dynamically change hota hai.
• Yeh component Vite project mein src/Profile.jsx mein daal ke test kar sakte ho.

Example 6: Optional Chaining with API Data

import React, { useState, useEffect } from 'react';

function UserDetails() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Simulating API call
    setTimeout(() => {
      setData({ user: { profile: { name: "Rahul" } } });
    }, 1000);
  }, []);

  return (
    <div>
      <h1>Name: {data?.user?.profile?.name ?? "Loading..."}</h1>
    </div>
  );
}

export default UserDetails;

Explanation:

• data?.user?.profile?.name nested properties ko safely access karta hai jab tak API data load nahi hota.
• ?? "Loading..." default value dikhata hai jab data null hai.
• Yeh component Vite project mein src/UserDetails.jsx mein daal ke test kar sakte ho.

Deep Dive: Optional Chaining vs Logical AND, Nullish Coalescing vs OR

Optional Chaining vs Logical AND (&&): && falsy values ke liye short-circuit karta hai, lekin ?. sirf null/undefined ke liye safe hai.

const user = { name: "" };
console.log(user.name && user.name.length); // Output: "" (falsy, no error)
console.log(user.address && user.address.city); // Output: undefined
console.log(user.address?.city); // Output: undefined (safer)

Nullish Coalescing vs OR (||): ?? sirf null/undefined ke liye default deta hai, jabki || falsy values ke liye bhi default deta hai.

const value = 0;
console.log(value || 10); // Output: 10 (0 is falsy)
console.log(value ?? 10); // Output: 0 (0 is not null/undefined)

Key Points

• Optional Chaining (?.): Null/undefined properties ko safely access karta hai, errors se bachata hai.
• Nullish Coalescing (??): Sirf null/undefined ke liye default value deta hai, falsy values ko preserve karta hai.
• React Use: Props, state, aur API data ke saath safely kaam karne ke liye perfect.
• Best Practice: Nested properties ke liye ?. use karo, aur defaults ke liye ?? jab falsy values preserve karne hon.
• Avoid Overuse: Complex logic ke liye functions ya explicit checks use karo taaki code readable rahe.