Skip to main content

Posts

1️⃣ Shallow Copy vs Deep Copy

 Yes! In JavaScript , when you perform a deep copy , completely new memory is allocated for the copied object or array, unlike a shallow copy where nested objects still share references. Let me explain in detail. Shallow Copy Only copies the first level of the object/array. Nested objects/arrays are still shared between the original and the copy. Changes in nested objects affect both original and copy. let obj1 = { name : "Alice" , address : { city : "NY" } }; let shallowCopy = { ...obj1 }; // or Object.assign({}, obj1) shallowCopy. address . city = "LA" ; console . log (obj1. address . city ); // Output: "LA" → nested object shared! Notice that changing the nested object in shallowCopy also affects obj1 . Deep Copy Creates a completely independent copy . Nested objects/arrays are also copied to new memory locations . Changing the copy does not affect the original. let obj1 = { name : "Alice"...

Scope in JavaScript

  Scope determines the accessibility of variables, functions, and objects in different parts of your code. In JavaScript, scope can be global, function, block, or module level . 1.1 Types of Scope 1.1.1 Global Scope Variables declared outside any function or block have global scope . Accessible from anywhere in the code. var globalVar = "I am global" ; function showVar ( ) { console . log (globalVar); // Accessible here } showVar (); console . log (globalVar); // Accessible here too 1.1.2 Function Scope Variables declared inside a function using var are function-scoped . Only accessible inside the function. function test ( ) { var x = 10 ; console . log (x); // 10 } console . log (x); // Error: x is not defined 1.1.3 Block Scope Variables declared with let or const inside {} are block-scoped . Only accessible inside that block. { let a = 5 ; const b = 10 ; console . log (a, b); // 5, 10 } console . log (a, b); // ...

✅ Summary: Why URLs give strings, useParams(), and parseInt()

1️⃣ Why URLs give strings? Everything in a URL is text only . When React Router reads a URL, it gives values like "12" , "100" as strings , not numbers. Example: URL: http://localhost:3000/user/15 15 → "15" (string) 2️⃣ What is useParams() ? useParams() is a React Router hook. It returns all dynamic values from the URL. Example: const { id } = useParams (); If your route is: < Route path= "/user/:id" element={ < User />}/> And your URL is /user/10 , then: id === "10" // string 3️⃣ Why do we use parseInt() with useParams() ? Since URL params come as strings , but sometimes we need numbers , we convert them: const { id } = useParams (); const userId = parseInt (id); // "10" → 10 ⭐ Final Combined Example import { useParams } from "react-router-dom" ; function User ( ) { const { id } = useParams (); // id = "5" const userId = parseIn...

Ternary operator and its working on mechanism on array

  If condition is true → use valueIfTrue If condition is false → use valueIfFalse ✅ Your amenity example Your code: {amenity === 'wifi' ? 'WIFI' : amenity} Breakdown: ✔ Condition: amenity === 'wifi' This checks: “Is the current amenity equal to 'wifi'?” ✔ If condition is TRUE → show: 'WIFI' ✔ If condition is FALSE → show: amenity 🎯 Example with your amenitiesList const amenitiesList = [ 'wifi' , 'parking' , 'kitchen' ]; Looping through each item: 🔹 1. amenity = "wifi" Check condition: 'wifi' === 'wifi' → TRUE So ternary returns: 'WIFI' 👉 Display: WIFI 🔹 2. amenity = "parking" Check condition: 'parking' === 'wifi' → FALSE So ternary returns: amenity // which is "parking" 👉 Display: parking 🔹 3. amenity = "kitchen" Check condition: 'kitchen' === 'wifi' → FALS...

Entity Relationship Model

  What is the ER model? The ER model is a high-level conceptual data model used to describe the structure of a database in terms of entities (things of interest), attributes (properties of those things), and relationships (how those things are associated). It helps designers capture data requirements visually before implementation. Core concepts 1. Entity An entity is a real-world object or concept that is distinguishable and relevant to the system (e.g., Student , Course , Employee ). Represented as a rectangle in diagrams. Entity types : the class (e.g., Student ). Entity instances (tuples/records) are members of that class (e.g., a specific student). 2. Attribute A property of an entity (or relationship) — e.g., Student has StudentID , Name , DOB . Types: Simple (atomic) : cannot be divided (e.g., Age ). Composite : composed of sub-parts (e.g., Address → Street , City , Zip ). Derived : computed from other attributes (e.g., Age from DOB ). ...

Role of box-sizing and its attributes in css

  🧱 Default behavior (content-box) By default, browsers use: box-sizing : content-box; This means: Total element width = content width + padding + border So if you have: .container { width : 300px ; padding : 20px ; border : 5px solid black; } Then the total visible width becomes: 300 (content) + 40 ( left + right padding) + 10 ( left + right border) = 350 px ⚠️ The box becomes wider than 300px , which can cause overflow or layout shifts. ✅ With box-sizing: border-box When you use: box-sizing : border-box; the formula changes to: Total element width = width (including padding + border) So the same CSS now behaves like this: width = 300 px (total) → content area = 300 - ( 40 padding + 10 border) = 250 px ✅ The box stays exactly 300px wide — no overflow. 🎯 Why it’s useful Prevents unexpected overflow due to padding/borders Makes responsive layouts easier Keeps your box sizes consistent You can trust width to be the actu...

Why using CSS units like em can lead to overflow ?

 Yes, that can definitely happen — let me explain why 👇 🧠 What em really means 1em = the font size of the element (or its parent) . So em is relative , not absolute like px . This means its actual value depends on context — i.e., where you use it. ⚠️ Why em can cause overflow There are 3 main reasons : 1. Nested scaling effect Each nested element inherits and multiplies the em value. body { font-size : 16px ; } .container { font-size : 2em ; /* 2 × 16px = 32px */ } .box { width : 10em ; /* 10 × 32px = 320px */ } Even though you might expect 10em = 160px, it actually becomes 320px because it’s relative to .container , not body . 👉 If you keep nesting elements using em , it quickly becomes bigger than expected , causing overflow . 2. Font-size scaling increases box size If you use em for layout properties (like width , padding , or margin ) and also increase font-size , those properties scale up too. Example: .card { font-size : 20px ; width : 1...