JavaScript Simplified: Focus on Core Concepts

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

addEventListener in JavaScript – Complete Guide Handling user interactions is a core part of modern web development. The addEventListener() method allows developers to attach event handlers to HTML elements in a clean and flexible way. In this tutorial, you will learn: • What addEventListener() is • How it works with different events • Real examples with click and keyboard events • Removing event listeners properly • Best practices developers should know If you're learning JavaScript or preparing for frontend interviews, this guide will be helpful. 🔗 Read the article: https://lnkd.in/gwYibxEz #JavaScript #FrontendDevelopment #WebDevelopment #Programming #Coding #SoftwareDevelopment

🚀 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

🚀 𝗟𝗲𝘃𝗲𝗹𝗶𝗻𝗴 𝘂𝗽 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝗲𝗮𝗱𝗮𝗯𝗶𝗹𝗶𝘁𝘆 𝘄𝗶𝘁𝗵 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗟𝗶𝘁𝗲𝗿𝗮𝗹𝘀 String concatenation in JavaScript can quickly turn messy—especially as logic scales. That’s where template literals step in and change the game. I've put together a detailed blog breaking this down: “𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗟𝗶𝘁𝗲𝗿𝗮𝗹𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: 𝗦𝗮𝘆 𝗚𝗼𝗼𝗱𝗯𝘆𝗲 𝘁𝗼 𝗦𝘁𝗿𝗶𝗻𝗴 𝗖𝗼𝗻𝗰𝗮𝘁𝗲𝗻𝗮𝘁𝗶𝗼𝗻 𝗡𝗶𝗴𝗵𝘁𝗺𝗮𝗿𝗲𝘀” Link: https://lnkd.in/dQdeSyxh 🔍 What the blog covers: 🔹 Why traditional string concatenation becomes hard to maintain 🔹 How template literals improve readability and developer experience 🔹 Practical use-cases with expressions and multi-line strings 🔹 Writing cleaner, more scalable JavaScript code If you're working with JavaScript, this is a small shift that delivers a big productivity gain. Grateful for the continuous learning ecosystem and guidance from: Hitesh Choudhary Piyush Garg Anirudh J. Chai Aur Code Akash Kadlag Suraj Kumar Jha Nikhil Rathore Jay Kadlag DEV Community #JavaScript #WebDevelopment #TechnicalWriting #CleanCode #LearningInPublic #Chaicode #Cohort

Day 3/30 — JavaScript Journey JavaScript Conditionals (if / else, switch) Today your code learns to DECIDE. 🧠 Most beginners write code that runs. Great developers write code that thinks. 🔥 The Core Idea Conditionals turn JavaScript from a calculator into a decision engine. Your code stops doing everything… and starts doing the right thing at the right time. ⚡ if / else → Real-Time Decisions Use this when logic is dynamic and complex. if (user.isLoggedIn) {  showDashboard(); } else {  redirectToLogin(); } 👉 Reads like human thinking: “If this is true → do this, otherwise → do that.” ⚡ else if → Multiple Paths if (score > 90) {  grade = "A"; } else if (score > 75) {  grade = "B"; } else {  grade = "C"; } 👉 Your code evaluates top → bottom First match wins. Execution stops. ⚡ switch → Clean Structured Decisions Best when comparing one value against many options switch (role) {  case "admin":   access = "full";   break;  case "user":   access = "limited";   break;  default:   access = "guest"; } 👉 Cleaner than multiple else if 👉 Faster to scan, easier to maintain ⚠️ Critical Concepts (Most People Miss This) • Truthiness matters if ("0") // true 😳 if (0)  // false • === vs == 5 == "5"  // true (loose) 5 === "5" // false (strict) 👉 Always prefer === (predictable behavior) • Missing break in switch = fall-through bug case "admin":  access = "full"; // no break → next case runs too ⚠️ 🧠 Pro Insight Conditionals are not just syntax… They define your application’s behavior logic. Bad logic = bugs Good logic = clean systems 💡 When to Use What Situation Best Choice Complex logic / ranges if / else Multiple conditions else if Single variable, many values switch 🚀 Final Thought Beginners write: “Make it work” Developers evolve to: “Make it decide correctly” Because in real systems… logic is everything. If you master conditionals, you don’t just write code anymore — you control outcomes. 🔥

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

Today I revised how JavaScript actually works under the hood. Here are the key takeaways: The Execution Context Everything in JavaScript happens inside an execution context, which has two components: Memory Component (Variable Environment): Stores variables and functions as key-value pairs Code Component (Thread of Execution): Executes code one line at a time JavaScript is synchronous and single-threaded, meaning it can only execute one command at a time in a specific order. The Two-Phase Process Phase 1 - Memory Creation Phase: JS scans through the code and allocates memory before execution. Variables are assigned undefined, while functions get their entire code stored in memory. This is the foundation of hoisting! Phase 2 - Code Execution Phase: The actual execution begins. Variables are assigned their real values, and when functions are invoked, a brand new local execution context is created. Once a function returns, its execution context is destroyed. The Call Stack This is the mechanism that maintains execution order. The global execution context sits at the bottom, and each function call pushes a new context onto the stack. When functions return, they're popped off. The control always remains at the top of the stack, following the LIFO (Last-In-First-Out) principle. Understanding these fundamentals is essential for every JavaScript developer. These core concepts form the foundation upon which all advanced JavaScript features are built. Whether you're just starting out or have years of experience, revisiting these basics helps strengthen your overall understanding of the language! It's not just about writing code that works—it's about understanding why it works!

Most developers learn Objects first in JavaScript… But very few truly understand when to use Map instead of Object. And that’s where small mistakes start affecting performance and code quality. I’ve written a detailed yet easy-to-understand guide on: • Key differences between Map and Object • Why Map handles keys more efficiently • Iteration and performance comparison • Practical use cases you’ll face in real projects If you're serious about improving your JavaScript fundamentals or preparing for interviews, this is worth your time. 👉 Read the full article here: https://lnkd.in/gDyB7vap Let me know your thoughts — do you use Map in your projects? #JavaScript #FrontendDevelopment #WebDevelopment #Programming #SoftwareDevelopment #Coding #Developers #TechCareers #LearnJavaScript

🚀 JavaScript Simplified Series — Day 24 You clicked a button… But something strange happened 😳 👉 Button ka event bhi chala 👉 Parent div ka event bhi chala 👉 Aur kabhi kabhi pura page react kar leta hai Why? 🤔 --- ## 🔥 This is called → Event Bubbling --- ## 🔹 Real Example ```html id="eb1" <div id="parent"> <button id="child">Click Me</button> </div> ``` ```javascript id="eb2" let parent = document.querySelector("#parent") let child = document.querySelector("#child") child.addEventListener("click", function() { console.log("Button Clicked") }) parent.addEventListener("click", function() { console.log("Div Clicked") }) ``` 👉 Output when button is clicked: Button Clicked Div Clicked --- ## 🔍 What’s happening? Event flow: 👉 First child (button) 👉 Then parent (div) 📌 Event travels **inside → outside** This is called **Event Bubbling** --- ## 🔹 Why does this happen? Because browser follows a flow: 👉 Target element → Parent → Body → Document --- ## 🔹 How to Stop Bubbling? Sometimes you don’t want parent event to trigger 😎 ```javascript id="eb3" child.addEventListener("click", function(e) { e.stopPropagation() console.log("Button Clicked") }) ``` 👉 Now only button event runs --- ## 🔥 Real Life Example Think of a **water bubble 🫧** Bubble upar jaati hai… 👉 Same way event travels upward --- ## 🔥 Simple Summary Event Bubbling → event moves upward Parent bhi trigger hota hai stopPropagation() → bubbling stop karta hai --- ### 💡 Programming Rule **Understand event flow warna bugs samajh nahi aayenge 😄** --- 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 (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🧠 Day 13 — Class vs Prototype in JavaScript (Simplified) JavaScript has both Classes and Prototypes — but are they different? 🤔 --- 🔍 The Truth 👉 JavaScript is prototype-based 👉 class is just syntactic sugar over prototypes --- 📌 Using Class (Modern JS) class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello ${this.name}`); } } const user = new Person("John"); user.greet(); // Hello John --- 📌 Using Prototype (Core JS) function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello ${this.name}`); }; const user = new Person("John"); user.greet(); // Hello John --- 🧠 What’s happening? 👉 Both approaches: Create objects Share methods via prototype Work almost the same under the hood --- ⚖️ Key Difference ✔ Class → Cleaner, easier syntax ✔ Prototype → Core JavaScript mechanism --- 🚀 Why it matters ✔ Helps you understand how JS works internally ✔ Useful in interviews ✔ Makes debugging easier --- 💡 One-line takeaway: 👉 “Classes are just a cleaner way to work with prototypes.” --- #JavaScript #Prototypes #Classes #WebDevelopment #Frontend #100DaysOfCode