Understanding Prototypes in JavaScript

🚀 JavaScript Simplified Series — Day 30 JavaScript feels fast… But have you ever wondered 👇 👉 How does it handle multiple tasks at once? 👉 How does async code run without blocking? This is where the **Event Loop** comes in 😎 --- ## 🤯 The Big Confusion JavaScript is **single-threaded** 👉 It can do **one thing at a time** Then how does this work? 👇 ```javascript id="el1" console.log("Start") setTimeout(() => { console.log("Async Task") }, 0) console.log("End") ``` 👉 Output: Start End Async Task Wait… why? 🤔 --- ## 🔥 Behind the Scenes JavaScript has 3 main parts: 👉 Call Stack 👉 Web APIs 👉 Callback Queue --- ## 🔹 Step by Step Flow 1️⃣ `console.log("Start")` → runs first 2️⃣ `setTimeout` → goes to **Web API** 3️⃣ `console.log("End")` → runs next 4️⃣ Callback goes to **Queue** 5️⃣ Event Loop checks → stack empty? 6️⃣ Yes → push callback to stack 👉 Then runs → "Async Task" --- ## 🔍 Visualization ```id="viz1" Call Stack → Executes code Web APIs → Handles async tasks Queue → Stores callbacks Event Loop → Manages everything ``` --- ## 🔥 Real Life Example Think of a **restaurant 🍽️** 👉 Waiter takes order → sends to kitchen 👉 Kitchen prepares food 👉 Meanwhile waiter serves others 👉 When food is ready → serves you 👉 Event Loop = waiter managing tasks --- ## 🔥 Simple Summary JS → single-threaded Async → handled outside Event Loop → manages execution --- ### 💡 Programming Rule **JavaScript is not multi-threaded… but it behaves like it is.** --- 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 Day 30 → Event Loop Day 31 → Scope (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

✨ 𝗪𝗿𝗶𝘁𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗦𝘁𝗿𝗶𝗻𝗴𝘀 𝗟𝗶𝗸𝗲 𝗔 𝗛𝘂𝗺𝗮𝗻 ⤵️  Template Literals in JavaScript: Write Strings Like a Human ⚡  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/d_HhAEsM  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Why string concatenation becomes messy in real apps   ⇢ Template literals — the modern way to write strings   ⇢ Embedding variables & expressions using ${}   ⇢ Multi-line strings without \n headaches   ⇢ Before vs After — readability transformation   ⇢ Real-world use cases: HTML, logs, queries, error messages   ⇢ Tagged templates (advanced but powerful concept)   ⇢ How interpolation works under the hood   ⇢ Tradeoffs & common mistakes developers make   ⇢ Writing cleaner, more readable JavaScript  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Frontend #Programming #CleanCode #Hashnode

🚀 JavaScript Simplified Series — Day 35 Prototypes are powerful… But let’s be honest 😅 👉 Syntax thoda confusing lagta hai 👉 Hard to read 👉 Not beginner friendly What if we could write the same thing in a **clean and simple way?** 🤔 --- ## 🔥 Solution → Classes --- ## 🔹 What are Classes? Classes are just a **clean syntax over prototypes** 👉 Same power 👉 Better readability --- ## 🔹 Without Class (Old Way) ```javascript id="clx1" function User(name) { this.name = name } User.prototype.greet = function() { console.log("Hello " + this.name) } let u1 = new User("Abhay") u1.greet() ``` --- ## 🔹 With Class (Modern Way 😎) ```javascript id="clx2" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } } let u1 = new User("Abhay") u1.greet() ``` 👉 Same result 👉 Cleaner code --- ## 🔹 Adding More Methods ```javascript id="clx3" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } sayBye() { console.log("Goodbye") } } ``` --- ## 🔥 Real Life Example Think of a **blueprint 🏗️** 👉 Class = blueprint 👉 Object = actual building Same design → multiple objects --- ## 🔥 Simple Summary Class → cleaner syntax Constructor → initialize values Methods → behavior --- ### 💡 Programming Rule **Write code that humans can read. Classes make code cleaner.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi --- 📌 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 Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 34 Objects are powerful… But what if you could **share properties and methods between objects automatically?** 🤔 Without copying code again and again 😵 This is where **Prototypes** come in 🔥 --- ## 🔥 The Problem ```javascript id="pt1" let user1 = { name: "Abhay", greet: function() { console.log("Hello") } } let user2 = { name: "Rahul", greet: function() { console.log("Hello") } } ``` 👉 Same function repeated ❌ 👉 Code duplication ❌ --- ## 🔥 Solution → Prototype JavaScript objects have a hidden property: 👉 **[[Prototype]]** Through this, objects can **inherit properties** --- ## 🔹 Example ```javascript id="pt2" function User(name) { this.name = name } User.prototype.greet = function() { console.log("Hello " + this.name) } let u1 = new User("Abhay") let u2 = new User("Rahul") u1.greet() u2.greet() ``` 👉 Output: Hello Abhay Hello Rahul --- ## 🔍 What’s happening? 👉 `greet()` is not inside object 👉 It is shared via prototype 📌 Memory efficient + reusable --- ## 🔥 Real Life Example Think of a **template 🧾** 👉 Same format 👉 Different data Like: Form template → reused for all users --- ## 🔥 Prototype Chain If property not found: 👉 Object → Prototype → Next Prototype → null --- ## 🔥 Simple Summary Prototype → shared properties Avoid duplication Enable inheritance --- ### 💡 Programming Rule **Don’t repeat logic. Share it using prototypes.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary 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 Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

𝗕𝗲𝘀𝘁 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀 𝗶𝗻 𝟮𝟬𝟮𝟲 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

🚀 TypeScript Best Practices: The Comma (,) vs. The Semicolon (;) Whether you're a seasoned engineer or just starting your TypeScript journey, small syntax choices can make a huge difference in code readability and maintainability. One of the most common questions for developers transitioning from JavaScript is: "When do I use a comma versus a semicolon?" Here is a quick breakdown to keep your enterprise-grade codebase clean and consistent. 🏗️ The Semicolon (;): Defining the Blueprint When you are defining Interfaces or Type Aliases, you are creating a "set of instructions" or a contract for the compiler, not actual data. Best Practice: Use semicolons to terminate members in a structural definition. Why? Interfaces are conceptually similar to class definitions. The semicolon tells the TypeScript compiler that the definition of that specific property or method is complete, acting as a clear boundary for the engine. TypeScript // ✅ Good: Clear separation of structural definitions interface User { id: number; name: string; email: string; } 💎 The Comma (,): Handling the Data When you move from defining a type to creating an Object Literal, you are working with live data in the JavaScript runtime. Best Practice: Use commas to separate key-value pairs in an object. Why? In JavaScript, an object is essentially a list of data. Commas are the standard delimiter for items in a list, just like in an array. Using a semicolon inside an object literal is a syntax error that will break your build! TypeScript // ✅ Good: Standard JavaScript object notation const activeUser: User = { id: 1, name: "John Doe", email: "dev@example.com", // Trailing commas are great for cleaner Git diffs! }; 💡 Senior Dev Tips for Your Workflow Visual Distinction: While TS technically allows commas in interfaces, sticking to semicolons helps you distinguish "Types" from "Objects" at a glance during rapid code reviews. Watch the Typos: Ensure your implementation strictly follows your interface—watch out for common spelling slips like balance vs balence which can lead to runtime headaches. Accessibility First: Remember that clean code is accessible code—maintaining strict typing and clear syntax supports better documentation for everyone on the team. What's your preference? Do you stick to semicolons for types to keep things "classy," or do you prefer the comma-everywhere approach? Let's discuss in the comments! 👇 #TypeScript #WebDevelopment #CodingBestPractices #FrontendEngineering #CleanCode #JavaScript #SeniorDeveloper

Day 1/100 of Javascript Today Topic : Javascript Engine JS code is first tokenized and parsed into an AST (Abstract Syntax Tree). The interpreter converts this into bytecode and begins execution. While running, the engine identifies hot code and uses a JIT compiler to optimize it into machine code for better performance. 1. What is Tokenizing? Tokenizing = breaking your code into small meaningful pieces (tokens) After tokenizing: Code Part Token Type let keyword x identifier = operator 10 literal ; punctuation 2. What Happens After Tokenizing? Tokens → Parsing Parser converts tokens into: 👉 AST (Abstract Syntax Tree) Example (conceptually): VariableDeclaration ├── Identifier: x └── Literal: 10 3. Why JavaScript is JIT Compiled? JS is called JIT (Just-In-Time) compiled because: 👉 It compiles code during execution, not before. ⚙️ Flow Code → Tokens → AST → Bytecode → Execution → Optimization → Machine Code 🔥 Step-by-Step 1. Interpreter Phase AST → Bytecode Starts execution immediately 👉 Fast start, but not the fastest execution 2. Profiling Engine watches: Which code runs frequently (hot code) 3. JIT Compilation Hot code → compiled into optimized machine code 👉 Now it runs much faster Also looked at different JavaScript engines: 👉V8 (Google) → Uses Ignition (interpreter) + TurboFan (optimizer), heavily optimized for performance 👉SpiderMonkey (Mozilla) → Uses Interpreter + Baseline + IonMonkey (JIT tiers) 👉Chakra (Microsoft) → Has its own JIT pipeline with profiling and optimization stages Each engine has a different internal architecture, but all follow the same core idea. Reference : 1. https://lnkd.in/gvCjZRJK 2. https://lnkd.in/gwcWp-dE 3. https://lnkd.in/gWGiNJZk. 4. https://lnkd.in/g7D4MiQ8 #Day1 #JavaScript #100DaysOfCode

🚀 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

Most JavaScript devs think Object keys follow insertion order. And it’s caught even senior devs off guard. Create an object and add keys in this order: "b", "a", "1". const obj = {}; obj.b = 'second'; obj.a = 'third'; obj.1 = 'first'; Log Object.keys(obj). You’d expect: ['b', 'a', '1'] You get: ['1', 'b', 'a'] 🤯 The number jumped to the front, but the strings stayed in order. Same object. Same assignment logic. Completely unexpected order. This silently breaks: → API wrappers that expect keys to match a specific schema → UI components that map over objects for "alphabetical" sorting → Testing suites that compare object snapshots No error thrown. Just a data structure that "rearranges" itself. Why does this happen? It’s defined in the ECMAScript spec (OrdinaryOwnPropertyKeys).  JavaScript objects don't have a single "order." They follow a strict three-tier hierarchy: 1. Integer Indices: Sorted in ascending numeric order (always first). 2. String Keys: Sorted in chronological insertion order. 3. Symbol Keys: Sorted in chronological insertion order (always last). The engine treats "1" as an integer index, so it "cuts the line" and moves to the very front, regardless of when you added it. Once you know this, you'll stop trusting Object.keys() for ordered data and start reaching for Map. 🔖 Learn more about how JS engines handle property order → https://lnkd.in/gRY6hdcM Were you aware that numbers always "cut the line" in JS objects? 1️⃣ Yes / 2️⃣ No 👇 #JavaScript #WebDev #Coding #SoftwareEngineering #Frontend

Call, Apply, or Bind? 🚀 Mastering the "this" context in JavaScript Ever wondered how to borrow methods or control the this keyword in JavaScript? These three methods are essential for every JS developer's toolkit. Here’s a quick breakdown: 📞 .call(): Invokes the function immediately. Arguments are passed individually. fullName.call(personObject, "Hyderabad", "Telangana"); 📧 .apply(): Invokes the function immediately. Arguments are passed as an Array. fullNameWithAddress.apply(personObject2, ["Bangalore", "Karnataka", "India"]); 🔗 .bind(): Does not invoke the function immediately. It returns a new function with the context locked in, which you can call later. let bindMethod = fullNameWithAddresBind.bind(personObject3, "Chennai", "Tamilnadu"); bindMethod(); The Key Difference? It’s all about how you handle arguments and execution timing. Use call for speed, apply when working with arrays (like math operations), and bind for event listeners or delayed execution. Check out my code snippets below to see them in action! 👇 let personObject = { firstName: "Santha Kumar", lastName: "Chigurupati", } let fullName = function (city, state) { console.log(this.firstName + " " + this.lastName + " " + city + " , " + state); } // CALL fullName.call(personObject, "Hyderabad", "Telangana"); let personObject2 = { firstName: "Saahus Neal", lastName: "Chigurupati", } let fullNameWithAddress = function(city, state, country) { console.log(this.firstName + " " + this.lastName + " " + city + " " + state + " " + country) } // APPLY fullNameWithAddress.apply(personObject2, ["Banglore", "Karnataka", "India"]) let personObject3 = { firstName: "Suhaas Neal", lastName: "Chigurupati", } let fullNameWithAddresBind = function(city, state, country, profession) { console.log(this.firstName + " " + this.lastName + " " + city + " " + state + " " + country + " " + profession) } //BIND let bindMethod = fullNameWithAddresBind.bind(personObject3, "Chennai", "Tamilnadu", "India", "Artist"); bindMethod() #JavaScript #WebDevelopment #CodingTips #Frontend #Programming #JSFundamentals