Prototypes in JavaScript: Inheritance and Memory Efficiency

🚀 JavaScript Simplified Series — Day 28 Promises made async code better… But still… something feels messy 😵 👉 Too many .then() 👉 Hard to read 👉 Looks like chaining hell What if async code could look like normal synchronous code? 🤔 🔥 Solution → Async / Await 🔹 The Problem with Promises fetchData() .then(data => { console.log(data) return processData(data) }) .then(result => { console.log(result) }) .catch(err => console.log(err)) 👉 Works… but not clean ❌ 🔹 Async / Await (Cleaner Way) async function handleData() { try { let data = await fetchData() console.log(data) let result = await processData(data) console.log(result) } catch (err) { console.log(err) } } handleData() 👉 Looks simple & readable ✅ 🔍 What is happening? 👉 async → function always returns a promise 👉 await → waits for promise to resolve 🔹 Example function fetchData() { return new Promise(resolve => { setTimeout(() => { resolve("Data received") }, 2000) }) } async function getData() { let data = await fetchData() console.log(data) } getData() 👉 Output: Data received 🔥 Real Life Example Think of cooking 🍳 👉 Order ingredients 👉 Wait for delivery 👉 Then cook With async/await: Step by step… clean and clear 🔥 Simple Summary async → makes function async await → waits for result Result → clean & readable code 💡 Programming Rule Write async code like sync code. Clarity > complexity. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 Day 25 – Async JavaScript (Real-Time + Coding) Today I focused on both theory and coding for async JavaScript concepts. 🔹async/await 👉 Used async/await for cleaner and more readable asynchronous code instead of chaining .then(). 🔹 Promise.all (Parallel API Calls): Used to handle multiple API calls in parallel. const [user, orders] = await Promise.all([ fetch('/api/user').then(res => res.json()), fetch('/api/orders').then(res => res.json()) ]); 👉 Real-time use: Fetching multiple APIs together (user data + orders) to reduce loading time. -->Fetching user details, orders, and notifications together instead of waiting one by one. 🔹 Parallel vs Sequential Calls ✅ Sequential (Slower): Executes one after another; used when tasks depend on previous results, but increases total execution time. const user = await fetch('/api/user').then(res => res.json()); const orders = await fetch('/api/orders').then(res => res.json()); 👉 Real-time: Each API waits for the previous one → increases load time. ✅ Parallel (Faster): Executes multiple tasks simultaneously; used when tasks are independent, reducing overall loading time and improving performance. const [user, orders] = await Promise.all([ fetch('/api/user').then(res => res.json()), fetch('/api/orders').then(res => res.json()) ]); 👉 Real-time: Both APIs run together → faster response → better user experience. 🔹 Retry API Call : Implemented retry logic for failed requests. async function fetchWithRetry(url, retries = 3) { try { const res = await fetch(url); if (!res.ok) throw new Error("Failed"); return await res.json(); } catch (err) { if (retries > 0) { return fetchWithRetry(url, retries - 1); } else { throw err; } } } 👉 Real-time use: Handles temporary failures like network issues. --> Useful for handling network issues or temporary API failures without breaking the app. 🔹 Event Loop (Execution Order) : Understood how JavaScript handles async tasks (Microtask vs Macrotask) console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 👉 Output: Start → End → Promise → Timeout 👉 Real-time use: Helps debug async execution issues -->In real-time: Helps in debugging issues like delayed UI updates or unexpected execution order #JavaScript #AsyncJS #FrontendDevelopment #Angular #CodingJourney

🚀 JavaScript Simplified Series — Day 25 Imagine this 👇 You have a list of 100 items… And you want to add a click event on each item 😵 Will you do this? let items = document.querySelectorAll("li") items.forEach(item => { item.addEventListener("click", function() { console.log("Item clicked") }) }) Works… but not efficient ❌ 👉 What if new items are added later? 👉 You’ll have to add event again 😩 🔥 Solution → Event Delegation 🔹 Idea Instead of adding event to every child… 👉 Add event to parent And detect which child was clicked 🔹 Example <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> let list = document.querySelector("#list") list.addEventListener("click", function(e) { console.log(e.target.innerText) }) 👉 Click any item → it works 😎 🔍 How it works? Because of event bubbling 👉 Event child se parent tak travel karta hai Parent catches it 🔹 Why Event Delegation is Powerful? ✅ Less code ✅ Better performance ✅ Works for dynamic elements 🔥 Real Life Example Think of a classroom 🎓 Instead of asking each student individually… 👉 Teacher asks whole class Jo respond kare → identify karo 🔥 Simple Summary Event Delegation → parent handles child events Uses → event bubbling Benefit → efficient & scalable 💡 Programming Rule Don’t attach events everywhere. Use delegation smartly. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 26 You click a button… But nothing happens immediately 😳 Instead… it waits. Then suddenly → response comes. How does JavaScript handle this? 🤔 🔥 The Problem JavaScript runs line by line (synchronously) console.log("Start") console.log("Process") console.log("End") 👉 Output: Start Process End Everything runs one after another 😵 But Real World is Different Think about: 👉 API calls 👉 File loading 👉 Timers They take time ⏳ If JavaScript waits… everything will freeze ❌ 🔥 Solution → Asynchronous JavaScript JavaScript can handle tasks without blocking execution 🔹 Example with setTimeout console.log("Start") setTimeout(() => { console.log("Delayed Task") }, 2000) console.log("End") 👉 Output: Start End Delayed Task 🔍 What’s happening? 👉 setTimeout runs later 👉 JavaScript doesn’t wait 👉 Code continues execution 🔹 Callback in Async setTimeout(function() { console.log("Task Done") }, 1000) 👉 Function runs after delay 📌 This function is a callback 🔥 Real Life Example Ordering food 🍔 You order → wait Meanwhile → you do other work Food arrives later 👉 That’s async behavior 🔥 Simple Summary Sync → line by line execution Async → non-blocking execution Callback → function runs later 💡 Programming Rule Don’t block execution. Let JavaScript handle tasks asynchronously. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript (Callbacks) Day 27 → Promises (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

Lately, I’ve been going deeper into JavaScript coercion, and the more I study it, the less random JavaScript feels. A lot of behaviour that looks strange at first starts making sense once you realise that JavaScript is following rules defined in the ECMAScript specification. Recently, I focused on the abstract operations behind conversion, especially: - ToNumber - StringToNumber - ToString - ToPrimitive - OrdinaryToPrimitive One of the biggest takeaways for me is that JavaScript does not just “guess” what to do with values. It follows a defined process depending on the operation being performed. For example: - `"5" - 1` works because subtraction expects numbers. - `Number("")` becomes `0`. - `Number(undefined)` becomes `NaN`. - `ToNumber(BigInt)` throws an error, but `ToString(BigInt)` works. - When an object is involved, JS first tries to extract a primitive value before continuing coercion The part I found especially interesting was object-to-primitive conversion. If JavaScript encounters an object in a coercion context, it first checks for `Symbol.toPrimitive`. If that is not available, it falls back to `OrdinaryToPrimitive`, where the order of calling `toString()` and `valueOf()` depends on the hint being used: - string hint → toString() first - number hint → valueOf() first I also learned more about why string-to-number conversion behaves the way it does: - Number("25") gives 25 - Number(" 25 ") also gives 25 - Number("Infinity") gives Infinity - Number("1_000") gives NaN - Number("10n") gives NaN What is changing my understanding the most is this: - Instead of memorising “weird JavaScript behaviour”, I’m now trying to ask: 1. What operation is being performed? 2. What type of value does that operation expect? 3. Which abstract operation is JavaScript using behind the scenes? That mindset makes the language much easier to reason about. I’ve also been maintaining detailed notes on what I’m learning. If anyone wants to go deeper into these topics, I’ve uploaded them here: GitHub repo: https://lnkd.in/ephuZ-w6 #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #ECMAScript #100DaysOfCode

Yesterday, I went deeper into one of the most confusing parts of JavaScript: "The + operator" At first glance, `+` looks simple. But unlike operators such as -, *, and /, JavaScript’s + has two possible meanings: - numeric addition - string concatenation And that is exactly what makes it tricky. My biggest takeaway was this: 1. When JavaScript sees a + b, it does not immediately assume numeric addition. 2. It first has to decide: - Should this be string concatenation? - Or should this be numeric addition? That decision is what makes "+" so different from operators like "-". For example: - "5" - 1 gives 4 because subtraction is numeric only. But: - "5" + 1 gives "51" because once JavaScript sees that one side becomes a string, it goes down the string concatenation path. I also learned that the real logic of + is deeper than the small operator section most people look at first. The actual mental model I now use is: 1. Convert both sides to primitives 2. If either primitive is a string: - convert both to strings - concatenate Otherwise: - convert both to numeric values - make sure the numeric types match - perform numeric addition That also led me into learning ToNumeric, which was another big insight. Before this, I mostly thought in terms of ToNumber, but ToNumeric is different: - ToNumber only gives a Number - ToNumeric can return either a Number or a BigInt That is why: - 1n + 2n works but - 1 + 2n throws a TypeError because JavaScript does not allow mixing Number and BigInt in that numeric path. The more I study coercion, the more I realise that JavaScript is not random at all. A lot of “weird” behavior starts making sense when you stop memorising examples and instead ask: - what operation is being performed? - what kind of value does it need? - which abstract operation is JavaScript using behind the scenes? That shift in mindset is making the language far more understandable for me. I’ve also been maintaining detailed notes on everything I’m learning. If anyone wants the deeper breakdown with examples and spec-based notes, I’ve uploaded them here: GitHub repo: https://lnkd.in/ephuZ-w6 Next, I’ll keep going deeper into coercion and loose equality. #JavaScript #TypeScript #WebDevelopment #SoftwareEngineering #ECMAScript #100DaysOfCode

𝗕𝗲𝘀𝘁 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀 𝗶𝗻 𝟮𝟬𝟮𝟲 Starting with JavaScript is just the first step. Frameworks feel complicated next. This guide cuts through the noise. It shows you which tools to learn first in 2026 and why. Frameworks handle repetitive code. They let you build features faster. Over 70% of developers use one daily. Picking the right one saves you months of frustration. Look for these traits as a beginner: - Easy first project setup - Clear documentation - Helpful community - Good performance - Path to a job Here are the top choices. **React** Backed by Meta. Component-based, like Lego for UI. Huge job market. Setup: `npx create-react-app` or use Vite. Simple counter example: ```javascript import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } ``` Pros: Massive ecosystem, many jobs. Cons: Needs extra tools for routing, hooks have a learning curve. Netflix uses React. Server tweaks cut their load times by 30%. **Vue** Progressive and flexible. Easy to add to any project. Great docs. Setup: `npm init vue@latest`. Todo list example: ```vue <script setup> import { ref } from "vue"; const items = ref([]); const newItem = ref(""); function addItem() { if (newItem.value) { items.value.push(newItem.value); newItem.value = ""; } } </script> <template> <input v-model="newItem" @keyup.enter="addItem" placeholder="Add todo" /> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template> ``` Pros: Lightweight, reactive system. Cons: Smaller ecosystem than React. Alibaba uses Vue. It sped up their development by 50%. **Svelte** Compiles to tiny, fast vanilla JS. Minimal code. Feels natural. Setup: `npm create svelte@latest`. Reactive example: ```html <script> let name = 'world'; $: greeting = `Hello ${name}!`; </script> <input bind:value={name} /> <p>{greeting}</p> ``` Pros: Blazing speed, no virtual DOM. Cons: Smaller library selection. The New York Times uses Svelte. Slashed load times by 40%. **Next.js** React with built-in server features. Great for full apps. Setup: `npx create-next-app@latest`. Server component example: ```javascript async function Home() { const data = await fetch("https://api.example.com").then(res => res.json()); return <div>{data.message}</div>; } ``` Pros: Easy deploying, fast builds. Cons: Must learn React first. TikTok uses it for enterprise scale. **Angular** Full framework from Google. TypeScript-based. Highly structured. Setup: `ng new my-app`. Component with signal: ```typescript import { Component, signal } from "@angular/core"; @Component({ selector: "app-greeting", template: `<h1>Hello {{ message() }}!</h1>`, }) export class Gr

🚀 JavaScript Simplified Series — Day 23 A website without interaction is boring… 😴 No clicks No input No response Just static content ❌ 🤔 Real Question How does a website know… 👉 When you click a button? 👉 When you type in an input? 👉 When you scroll? This is where Events come in. 🔥 What is an Event? An event is something that happens in the browser 👉 Click 👉 Hover 👉 Key press 👉 Scroll JavaScript listens to these events and reacts. 🔹 Adding an Event Listener let button = document.querySelector("button") button.addEventListener("click", function() { console.log("Button Clicked") }) 👉 When user clicks → function runs 🔹 Common Events // Click button.addEventListener("click", fn) // Input input.addEventListener("input", fn) // Key press document.addEventListener("keydown", fn) 🔹 Real Example let btn = document.querySelector("button") let heading = document.querySelector("h1") btn.addEventListener("click", function() { heading.innerText = "You clicked the button!" }) 👉 Click → text change 😎 🔹 Event Object JavaScript automatically gives event details button.addEventListener("click", function(event) { console.log(event) }) 📌 You get info like: 👉 Mouse position 👉 Target element 👉 Key pressed 🔥 Real Life Example Think of a doorbell 🔔 You press → sound comes 👉 Action → Reaction Same in JS: User action → Event → Response 🔥 Simple Summary Event → user action addEventListener → listen to event function → response 💡 Programming Rule Websites react to users. Events make that possible. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Hoisting — Explained with Tricky Examples + Interview Points Ever wondered how JavaScript runs your code before it even reaches certain lines? That’s where hoisting comes in 👇 🔹 What is Hoisting? Hoisting is JavaScript's default behavior of moving declarations (not initializations) to the top of their scope during the compilation phase. 🔹 Simple Example console.log(a); // undefined var a = 10; 👉 Behind the scenes: var a; console.log(a); a = 10; 🔹 Tricky Cases (Very Important!) 1️⃣ var vs let vs const console.log(a); // undefined var a = 5; console.log(b); // ❌ ReferenceError let b = 10; 👉 let and const are hoisted BUT not initialized → they stay in Temporal Dead Zone (TDZ) 2️⃣ Function Declaration vs Function Expression greet(); // ✅ Works function greet() { console.log("Hello"); } greet(); // ❌ Error var greet = function() { console.log("Hello"); }; 👉 Function declarations are fully hoisted 👉 Function expressions behave like variables 3️⃣ Variable + Function Same Name var x = 10; function x() { console.log("Hello"); } console.log(x); // 10 👉 Function is hoisted first, but variable assignment overrides it 4️⃣ Inside Scope var x = 1; function test() { console.log(x); // undefined var x = 2; } test(); 👉 Local x is hoisted → shadows global x 🔹 Where & When Do We Use Hoisting? ✔ Helps understand execution flow ✔ Useful in debugging unexpected undefined values ✔ Important when working with functions before declaration ✔ Critical in interviews & writing clean code 👉 Best Practice: Always declare variables at the top Prefer let and const to avoid confusion Avoid relying on hoisting in production code 🔹 Interview Points 💡 ✔ What is hoisting? ✔ Difference between var, let, and const hoisting ✔ What is Temporal Dead Zone? ✔ Function declaration vs expression hoisting ✔ Why does undefined occur instead of error? ✔ Hoisting inside function scope ✔ Real-time debugging scenarios 🔹 Quick Tip 👉 Hoisting ≠ moving code physically 👉 It’s just how JavaScript executes code internally 💬 Mastering hoisting = Strong foundation in JavaScript 📌 Save this for interviews & teaching sessions! #JavaScript #Frontend #WebDevelopment #CodingInterview #LearnToCode

When working with JavaScript, choosing the right data structure can improve both performance and code clarity. A common question developers face: 👉 Set vs Array — which one should you use? While Arrays are versatile and widely used, Sets provide unique advantages: ✔ Automatically remove duplicates ✔ Faster lookup operations ✔ Cleaner intent for unique collections However, Arrays are still better for indexing, ordering, and transformations. I’ve broken down the differences with practical examples in this article: 🔗 https://lnkd.in/gqqmBcGe If you're learning or improving JavaScript, understanding this difference can level up your coding skills. What’s your go-to choice in real projects — Set or Array? #JavaScript #WebDevelopment #FrontendDevelopment #Programming #SoftwareDevelopment #Coding #Tech #Developers #Learning #CareerGrowth