JavaScript quirks and surprises: Arrays, Maps, and more

Recently I decided to stop memorizing JavaScript and start understanding how it actually works." 😎 💪 Over the past few days, I’ve been diving deeper into how JavaScript actually works behind the scenes. Instead of just writing code, I started learning what really happens inside the JavaScript engine when our code runs. Here are some of the key concepts I’ve been learning: 🔹 Execution Context Every time JavaScript runs code or a function, it creates an execution context that contains the environment needed to run that code. 🔹 Global Memory vs Local Memory Variables declared globally live in global memory, while variables inside functions live in their own local memory. 🔹 Call Stack JavaScript uses a call stack to keep track of which function is currently running and where execution should return after a function finishes. 🔹 Scope & Variable Lookup When JavaScript looks for a variable, it first checks the current scope, then moves outward to outer scopes until it finds it. 🔹 Closures One of the most interesting concepts so far. A function can remember the variables from the environment where it was created, even after that outer function has finished executing. Understanding these concepts made me realize something important: Writing JavaScript is one thing. Understanding how JavaScript thinks is a completely different level. Still learning, still exploring, and enjoying the process. 🚀 If you're learning JavaScript too, what concept took you the longest to understand? #JavaScript #WebDevelopment #Programming #LearnInPublic #FrontendDevelopment

Day 2 of my JavaScript learning journey. Everyone says: “Just use let and const, never var.” Today I finally understood why. Variables already managed to confuse me once. Here’s what I explored today. Variables in JavaScript: -Variables store data so we can use it later in our program. There are three ways to create them: 1️⃣ var The old way. It’s function-scoped and gets hoisted, which can sometimes cause confusing behavior. 2️⃣ let Modern and block-scoped. You can change the value later. let score = 10; score = 20; 3️⃣ const Also block-scoped, but the value cannot be reassigned. const name = "Shobhit"; One interesting thing I learned: Even if a variable is declared with const, objects inside it can still be modified. Another surprising discovery: typeof null returns "object". This is actually a long-standing JavaScript bug from the early days of the language. It stayed because changing it would break too many websites. My rule going forward: Use const by default. Use let when the value needs to change. Avoid var. Day 2 done. Slowly understanding how JavaScript actually works. What confused you the most when you first learned JavaScript? #JavaScript #LearningInPublic #WebDevelopment #100DaysOfCode #Frontend

🚨 JavaScript Objects looked simple… until I explored what’s actually happening behind the scenes. When I first started learning JavaScript, objects felt very straightforward — just {} and some key-value pairs. But today I spent time digging deeper into how JavaScript objects actually work, and I realized there's a lot more happening internally. Here are a few concepts that really stood out to me while learning 👇 💡 Object Literals – the simplest way to create objects let user = { name: "Pradeep", age: 21 }; 🧱 Constructor Functions (ES5) – useful when you want to create multiple objects with the same structure function User(name) { this.name = name; } 🔍 this Keyword – it refers to the object that is calling the function, which makes context very important in JavaScript. 🧬 Prototype – methods added to the prototype are shared across all instances created from the constructor. This helps save memory and avoid repeating the same functions for every object. ⚙️ Object.create() – allows you to create a new object using another object as its prototype. 🧠 Shallow Copy vs Deep Copy – something that confused me at first. Shallow copy: let copy = { ...obj }; Deep copy: let copy = JSON.parse(JSON.stringify(obj)); ⚠️ Important insight: A shallow copy only copies the first level. If the object contains nested objects, changes can still affect the original. Learning this made me realize that JavaScript objects are powered by a powerful prototype system, not just simple key-value storage. Still learning and exploring JavaScript fundamentals every day. 🚀 💬 What JavaScript concept took you the longest to understand? #javascript #webdevelopment #frontenddevelopment #codingjourney #softwaredevelopment #developers #programming #100daysofcode

Another Day of My JavaScript Mastering Learning Journey DEY WITH ME!!! Today I explored one of the most important concepts in JavaScript: Prototypes. In JavaScript, objects can share properties and methods through something called a prototype. Instead of every object having its own copy of a method, JavaScript stores shared methods on the prototype so multiple objects can reuse them. For example, if we create a constructor like Person, we can add methods to Person.prototype. Every object created from Person will automatically have access to those methods. This approach helps save memory and keep code more efficient, because the methods are shared rather than duplicated for every object. Example idea: Create a constructor (like Person) Add methods to Person.prototype Every instance can use those methods Understanding prototypes helped me see how JavaScript handles inheritance and object behavior under the hood. Small steps like this are helping me build a stronger foundation as I continue learning JavaScript and backend development. #JavaScript #WebDevelopment #CodingJourney #LearningInPublic

🚀 Day 6 of My JavaScript Journey Today was all about mastering Strings & Date Object in JavaScript — and honestly, it made me realize how powerful these basics really are 🔥 Here’s what I learned 👇 📌 Strings in JavaScript Different ways to create strings ("", '', and backticks ` `) Why backticks (template literals) are modern & super useful 💡 Finding string length using .length Accessing characters using index 📌 Important Concept Strings are immutable → original value can’t be changed ⚠️ 📌 String Methods Convert text: .toUpperCase() .toLowerCase() Search inside strings: .includes(), .indexOf() Extract parts: .slice() (supports negative index 🔥) .substring() Modify strings: .replace() .trim() Convert string to array: .split() 📌 Concatenation Combine strings using + Mixing numbers with strings → automatic type conversion 🤯 📌 Date Object (Real Game Changer 🕒) Getting current date & time Understanding UTC vs Local Time Formatting date (ISO & local formats) Extracting parts like year, month, day Creating custom dates 📌 Advanced Concepts Date.now() → gives milliseconds since Epoch (Jan 1, 1970) ⏳ Importance of UTC & Epoch Time in real-world apps Browser automatically converts UTC → Local Time 🌍 💡 Big Learning: Even basic things like strings & dates have deep concepts that are used in real-world applications like chat apps, logs, scheduling systems, etc. Consistency is the key 🔑 Day by day, getting closer to becoming a better developer 💻🔥 #JavaScript #WebDevelopment #MERNStack #CodingJourney #Day6 #Learning #Developers

JavaScript's parser has a split personality and it will silently give you a completely different result based on where you place a {}: [] + [] → "" [] + {} → "[object Object]"  {} + [] → 0 Same operands. Swapped order. Completely different result and it's not even a number anymore?? Here's what's actually happening 👇 When {} comes first, JavaScript doesn't see an object literal. It sees an empty block statement like an empty if body. So it reads the line as: {} // ← empty block (ignored) +[] // ← unary + operator on an array Unary + forces type conversion → +[] converts [] to "" → "" to 0. Result: 0 Flip it, and {} is now in expression position so JS treats it as an object. Then string concatenation kicks in. Result: "[object Object]" Same characters. Different position. Two completely different mental models activated by the parser. This is why JavaScript's implicit type coercion + context-sensitive parsing is a beautiful nightmare. The fix? Always be explicit: Number([]) // 0 String({}) // "[object Object]" Never let JS guess. It has terrible taste. 😅 Save this for your next code review, guaranteed to start a conversation. JavaScript Mastery w3schools.com

Stop trying to read a novel in a language you don’t speak. Many students ask me: “What JavaScript concepts should I learn before starting React?” The biggest mistake I see is this: People jump into frameworks too early. Before learning React, build a strong JavaScript foundation. Here are the concepts you should be comfortable with: The JavaScript Foundation : • Basics → let, const, hoisting, how JS actually runs • Functions → arrow functions & higher-order functions • Data handling → object/array destructuring, spread & rest • Logic → ternary operator, && and || conditional rendering • Array methods → .map(), .filter(), .reduce() • Async JavaScript → Promises, Fetch API, async/await • Events → event listeners & event bubbling • Error handling → try/catch And one more important thing: Build at least one small project using only Vanilla JavaScript. Frameworks become much easier when you understand the language behind them. If you're learning React right now which JavaScript concept confused you the most? #JavaScript #ReactJS #WebDevelopment #LearnToCode #FrontendDevelopment

Stop trying to read a novel in a language you don’t speak. Many students ask me: “What JavaScript concepts should I learn before starting React?” The biggest mistake I see is this: People jump into frameworks too early. Before learning React, build a strong JavaScript foundation. Here are the concepts you should be comfortable with: The JavaScript Foundation : • Basics → let, const, hoisting, how JS actually runs • Functions → arrow functions & higher-order functions • Data handling → object/array destructuring, spread & rest • Logic → ternary operator, && and || conditional rendering • Array methods → .map(), .filter(), .reduce() • Async JavaScript → Promises, Fetch API, async/await • Events → event listeners & event bubbling • Error handling → try/catch And one more important thing: Build at least one small project using only Vanilla JavaScript. Frameworks become much easier when you understand the language behind them. If you're learning React right now Which JavaScript concept confused you the most? #JavaScript #ReactJS #WebDevelopment #LearnToCode #FrontendDevelopment

I stopped chasing correct answers in JavaScript today… and started chasing why I was wrong. 👇 --- 💥 Mistakes that taught me more than tutorials: ❌ Thought "onclick" supports multiple handlers 👉 It overrides—use "addEventListener" instead ❌ Confused arrow function "this" 👉 Arrow functions don’t have their own "this" ❌ Expected "var" to behave like "let" 👉 Faced hoisting and scope differences ❌ Assumed async code runs in order 👉 Learned: microtasks run before macrotasks ❌ Misunderstood "await" 👉 It pauses execution and resumes via the microtask queue ❌ Ignored shallow copy behavior 👉 Spread operator copies references, not nested objects --- 💡 Big shift: I wasn’t stuck because JavaScript is hard… I was stuck because I wasn’t questioning why. --- 🎯 What changed: ✔ I analyze outputs instead of guessing ✔ I understand how JS behaves under the hood ✔ I debug with clarity, not confusion --- 📌 Lesson: Mistakes in coding aren’t failures. They’re proof that your understanding is evolving. --- 🚀 Next focus: Closures + real-world problem solving --- If you're learning JavaScript: 👉 Which concept confused you the most? 👉 And what finally made it click? Let’s learn together 👇 #JavaScript #LearningInPublic #Frontend #CodingJourney #Debugging

🚨 Most developers think they understand JavaScript Arrays… until they see these results. 🤯 Today during my JavaScript practice, I realized something important: 👉 JavaScript arrays are easy to use, but tricky to truly understand. Some small examples can completely change how you think about the language. 🔥 1. map() vs forEach() let arr = [1,2,3]; let a = arr.forEach(x => x * 2); let b = arr.map(x => x * 2); console.log(a); // undefined console.log(b); // [2,4,6] ⚡ forEach() executes logic but returns nothing ⚡ map() returns a new transformed array 🔥 2. The famous sort() trap [1,2,10].sort() Result: [1,10,2] Why? 🤔 Because JavaScript sorts values as strings by default, not numbers. Correct way: [1,2,10].sort((a,b)=>a-b) 🔥 3. Removing duplicates from an array let arr = [1,2,3,2,1]; let unique = arr.filter((x,i,a) => a.indexOf(x) === i); console.log(unique); // [1,2,3] 🔥 4. Getting duplicate values let duplicates = arr.filter((x,i,a) => a.indexOf(x) !== i); Output: [2,1] 💡 Big learning from today: JavaScript isn’t just about writing code. It’s about understanding how the language actually behaves under the hood. Small hidden behaviors can make a huge difference in interviews and real-world projects. 📚 Array methods I practiced today ✔ push ✔ pop ✔ shift ✔ unshift ✔ splice ✔ slice ✔ map ✔ filter ✔ reduce ✔ find ✔ findIndex ✔ includes ✔ indexOf ✔ sort ✔ forEach ✔ every Still learning. Still improving. 🚀 If you're learning JavaScript too, which array method confused you the most when you started? 👇 #javascript #webdevelopment #frontenddevelopment #programming #coding #softwaredeveloper #developers #techcommunity #100daysofcode #learninpublic #js #codingjourney #webdev #developerlife